Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layout problem. FF vs. IE

    Just want to know why FF is spacing this differently than IE. To me IE is doing it correctly.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Template</title>
    <style type="text/css">
    * {
    	margin: 0;
    }
    html, body {
    	text-align: center;
    }
    .mainbox 
    {	
    	width: 780px;
    	margin-left: auto;
    	margin-right: auto;
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    }
    .innerleftbox 
    {
    	float: left;
    	width: 389px;
    	border: solid 1px #000;
    }
    .innerrightbox 
    {
    	float: right;
    	width: 389px;
    	border: solid 1px #000;
    }
    </style>
    </head>
    <body>
    <div class="mainbox">
    	
    	<div class="innerleftbox">Left Text</div>
    	<div class="innerrightbox">Right Text</div>
    </div>
    
    </body>
    </html>
    IE is lining the two inner boxes up correctly, adjacent to eachother. FF is wrapping the right box as if there isn't enough room for both of them on one line in the main body.

    Why is this?

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    13
    Thanks
    0
    Thanked 2 Times in 2 Posts
    whats happening is: when you put a border on a div, say 1px, IE puts that 1px inside the div, not increasing its width, where as FF puts the border outside the div, therefore increasing its size by 2px(1px on each side)

    this sorta fixes it, theres a small gap in IE but it works

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Template</title>
    <style type="text/css">
    * {
    	margin: 0;
    }
    html, body {
    	text-align: center;
    }
    .mainbox 
    {	
    	width: 780px;
    	margin-left: auto;
    	margin-right: auto;
    	border-left: solid 1px #000;
    	border-right: solid 1px #000;
    }
    .innerleftbox 
    {
    	float: left;
    	width: 389px;
    	border: solid 1px #000;
    	border-width:1px 0 1px 1px;
    }
    .innerrightbox 
    {
    	float: right;
    	width: 388px;
    	border: solid 1px #000;
    }
    </style>
    </head>
    <body>
    <div class="mainbox">
    	
    	<div class="innerleftbox">Left Text</div>
    	<div class="innerrightbox">Right Text</div>
    </div>
    
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Damn IE is stupid. What kind of logic does that make?

    Is there anyway to get around this so there is no gap in IE?

    Thanks for the quick reply!

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also, does IE put their margins inside of the div as well?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •