#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145

    Internet Explorer Problem :(


    Hello,

    I have tried to do a div next to another div. This worked fine. However then in one div I placed thre other div's, and made them stay next to each other. Naturally one of them did not stay in the same line and wraped under neat the others. The problem is that the right div is now displaying well on FireFox, but incorect on Internet Explorer. (Altough when I set the borders I noticed that the border for the right div was wrong Here is my html code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html>
    	<head>
    		<style>
    
    			html {
    
    				min-width: 750px;
    			}
    
    			body {
    
    				margin: 0;
    				padding: 10px 0px;
    				background: #ff0000;
    			}
    
    			div#wrap {
    
    				width: 750px;
    				margin: 0 auto 10px auto;
    				padding: 0;
    				text-align: left;
    				background: #ffffff;
    				border: 1px solid #d1c7ac;
    			}
    
    			div#innerwrap {
    
    				width: 720px;
    				margin: 0 15px;
    				padding: 8px 0;
    				border: 1px sold #ff0000;
    			}
    
    			#body {
    				padding-top: 10px;
    
    			}
    
    
    			#left {
    
    				display: inline;
    				width:510px;
    				height:510px;
    			}
    
    			#box {
    
    				border: 1px solid #d1c7ac;
    				float: left;
    				color: #000000;
    				font-size: 8pt;
    				overflow: hidden;
    				width:250px;
    				height:220px;
    			}
    
    			#right {
    				height:510px;
    				text-align: center;
    				border: 1px solid #d1c7ac;
    			}
    
    		</style>
    	</head>
    	<body>
    		<div id="wrap">
    			<div id="innerwrap">
    				<div id="body">
    					<div id="left">
    						<div id="box" class="top-left">
    							Box 1.
    						</div>
    						<div id="box" class="top-right">
    							Box 2
    						</div>
    						<div id="box" class="middle-left">
    							Box 3
    						</div>
    						<div id="box" class="middle-left">
    							Box 4
    						</div>
    					</div>
    					<div id="right">
    						This is the right text
    					</div>
    					<br>
    					last line
    				</div>
    			</div>
    		</div>
    	</body>
    </html>
    Is there maybe a hack I can do to internet explorer so that this element will be solved?

    or my css is completly wrong, and I need to change it?

    Just a small explanation on the css; I have a div that contains boxes (left) and another div that just contains text (right). This should be placed next to each other since I did the display: inline; in the left div css.

    thanks for any sugestions,

    regards,
    sim085
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    UK
    Posts
    64
    Rep Power
    14
    Hey there. I did something really similar a while ago (except I only had two boxes in the left container). Here's the code for what I did in case you find it helps you with yours (it works fine in IE):

    L

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    
    <head>
    
    <style>
    
       body
    	{background-color: #000033;
    	border: 0px;
    	padding: 0px;}
    
       div.main 
    	{position: absolute;
    	top: 15px;
    	left: 50%; 
    	margin-left: -300px;
    	width: 600px;
    	height: 800px;
    	background-color: #FF0000;
    	border: 2px solid #FFFFFF;}
    
       div.left
    	{float: left;}
    
       div.box1
    	{background-colour: #FF0000;
    	margin-top: 10px;
    	border: 2px solid #FFFFFF;
    	height: 180px;
    	width: 281px;
    	margin-left: 10px;}
    
       div.box2
    	{background-colour: #FF0000;
    	margin-top: 10px;
    	border: 2px solid #FFFFFF;
    	width: 281px;
    	height: 500px;
    	margin-left: 10px;
    	float: left;}
    
    </style>
    
    </head>
    
    <body>
    
       <div class="main">
    	
    	<div class="left">
    	
    	   <div class="box1"></div>
    
    	   <div class="box1"></div>
    
    	</div>
    	
    	<div class="box2"></div>
    
       </div>
    
    </body>
    
    </html>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    426
    Rep Power
    48
    IE likes to throw margins in where there are none. Add * {margin:0;padding:0} to your css and see if it then fits. You may have to adjust your margins and padding elsewhere but it's the best we can do with IE.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    UK
    Posts
    64
    Rep Power
    14
    Hello again

    Just one other thing. Not that it's causing your problem, but I think it's better if you're using absolute positioning and you want to put your column in the centre, to do: left: 50%; margin-left: - (whatever half the width of the column is). I might be wrong as I'm no expert but I think doing it with 'auto' might cause problems sometimes. I don't know what other people think.

    L
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    UK
    Posts
    64
    Rep Power
    14
    And again, tis me

    If you add float: left to your #left div, I think it solves your problem.

    But (and pleeeease don't take offence as I really am pretty new to this) I think you could tidy up your css just a little bit here. Like with the positioning of that main column for e.g. (And there are still differences between how it looks in the two browsers I think you could avoid).

    Hope it's sorted now

    L

    Comments on this post

    • sim085 agrees : Thanks Liana :) That float:left did the trick. No Offence taken :) I always love sugestions, and was amazed at how you handeled the absolute in the main tag, since I had some problems using absolutes :( However you gave me d spirit 2 try that again
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Hi, that worked fine yesterday .. however my toughts could not stop on what you told me about the absolutes. I do find my css code a little complicated yes, and I am not the kind of person that says as long as it works fine is ok...

    so I was wondering, is my css going agains some standard, or maybe it is working just because of luck?

    thanks for any comments on my css

    regards,
    sim085
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    426
    Rep Power
    48
    You are only allowed to use an id name once per page. In addition, you have border: 1px sold

    Validate your code and you would see these and other errors.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    426
    Rep Power
    48
    You don't want to have that as inline. That would be the same as making it a text word. What you should try is making the #left div float:left.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Why should I use the id once? I have nearly all the elements in my page with a different id and different properties for those id's. What is the problem? it becomes slower or something like that?

    I removed that display:inline, it was being useless over there, thanks for pointing that out and also thanks for that sold :$:$

    thanks
    sim085
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Location
    UK
    Posts
    64
    Rep Power
    14
    Originally Posted by sim085
    Hi, that worked fine yesterday .. however my toughts could not stop on what you told me about the absolutes. I do find my css code a little complicated yes, and I am not the kind of person that says as long as it works fine is ok...

    so I was wondering, is my css going agains some standard, or maybe it is working just because of luck?

    thanks for any comments on my css

    regards,
    sim085
    Hey

    Like I said before, I'm not convinced there really is anything 'wrong' with doing the centering your way. I only started learning this stuff recently and a friend saw something I'd done using that technique, and called it 'a nasty hack'. So I tried two other ways (the one above and a different one), which he looked at and said were 'both fine'. But I think I should check out such advice before I pass it on to others. For all I know he's talking b****x! Instead I just leap in with advice as soon as I think I know something (too anxious to show off you see ). So best to see what others think about that.

    Umm.. the rest of your css. I wasn't quite sure what the #innerwrap and the #body were doing, but that's maybe because you have more text etc to add. Though couldn't you remove the #body and add 10px to the top margin of the #innerwrap? (18px instead of 8).

    There's also something a bit funny going on with the #right div in IE. If you add a background colour you'll see what I mean (just so you can look at what it's doing better I mean. I know you want it white). I think you need to specify a width and float it left.

    Re your Id question - I think I need to understand Id vs class better too! Perhaps the problem would be if you then needed to do getElementById and you had more than one element with the same Id. It might go mad. But I could be wrong - there might be a different reason.

    Validating it is a good idea. I need to start doing that too.

    Good luck!

    L
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2006
    Posts
    426
    Rep Power
    48
    From the W3C HTML Specification:

    id
    This attribute assigns a name to an element. This name must be unique in a document.
    class
    This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2004
    Posts
    617
    Rep Power
    145
    Hey Liana

    Thanks for your long reply as you I only started css these last two weeks, before I used tables a lot :$

    You and icantthinkofone are right about the id's. Something I did not look into in detail, I will make sure to change that Thanks for the sugestion

    The background colour you mentioned. I gave a red background to the right box, and in IE it came quite well. The problem from what i could see was in FireFox, which started the red background from the right corner! I still can not understand why that happens, however with a white background it seems ok.

    Also I checked the css again, and from what I can see it looks ok. I mean I have a div (left) set float: left; and the other div (right) set float: right, can not understand why the background of right takes also the left part as well. However it is something I will look in at a later stage

    btw - I am also a person in a hurry. last time I did the post saying I still had some problem. feigured out that the problem was only because the width of the the left div and with width of the right div where more then the speicified 720px, which naturally made everything go bollocks

    thanks again for all the help Liana and thanks to icantthinkofone as well for spoting those errors in the css, and also telling me about the unique ids, without you I am sure I would not have changed those thanks.

    regards,
    sim085

IMN logo majestic logo threadwatch logo seochat tools logo