ansaurus

Question

Answer 1

+1 A:

Starting with FF 3.5, they starting using the same box-model rendering as other more modern browsers (IE8, Safari, Chrome). IE7 is using an earlier out-dated model. You may need to target IE7 specifically with a CSS hack. One common IE7 hack is the *:first-child+html hack.

*:first-child+html <your class or id>
{
    margin: ...
}

This will target ONLY IE7. If you want to target FF 3+, you can use:

html>/**/body <your class or id>
{
    margin: ...
}

and for FF 3.5 ONLY:

body:nth-of-type(1) <your class or id>
{
    margin: ...
}

cnobles 2009-10-14 19:42:43

Answer 2

A:

Since IE 7 does not include padding when deciding the width of the element while other modern browsers do the only option for you is to use a IE 7 only hack with width:560px

halocursed 2009-10-14 19:47:17

Sorry for the confusion, my original issue wasn't related to the padding/box model but how the left div was positioned - IE has it vertically lower than FF. Please see updated code in question.

2009-10-14 19:57:21

Answer 3

A:

Instead of doing any hacks, try adding this to the beginning of the document before the <html> tag:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

Without a doctype declaration, IE7 goes into quirksmode and padding works differently than in Firefox.

From wikipedia (in quirksmode IE7 acts like IE5 in this regard):

When a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward. Internet Explorer 5 includes the content, padding and borders within a specified width or height; this results in a narrower or shorter rendering of a box.

Joel 2009-10-14 19:53:01

Tried that no luck - please see updated question for more clarity on what the issue is (my first set of code was confusing).

2009-10-14 19:58:06

Answer 4

A:

I tweaked your original example a little and the code below looks the same in IE, FF, Chrome, and Opera.

     <html>
<head>
<style>

#wrapper{
    width: 923px;
    vertical-align: top;
}

.boxRight{
background-color:#FFFFFF;
border:3px solid #DDDDCA;
float:right;
margin:3px 0;
width:560px;

}

#boxleft{

color:#277491;
width:357px;
float: left;

}

</style>
</head>
<body>
<div id="wrapper">   
    <div id="boxleft">leftdiv</div>
    <div id="boxr1" class="boxRight">test<br/>test<br/></div>
    <div id="boxr2" class="boxRight">test2<br/>test2<br/></div>    
</div>
<div style="clear:both;"></div>
</body>
</html>

EDIT: I updated my code after your edit to your original post. The above works in FF, Chrome, IE, Opera.

Chuck 2009-10-14 20:00:33

What I'm trying to accomplish though is what FF renders in my original example, that is a div on the left that starts at the same height as the first "right" div. This solution seems to render the div on the left below the others.

2009-10-14 20:04:22

Updated code. I also moved the wrapper style from the element and created one class for the box on the right since they both were the same. No need for 2 classes to maintain. I also moved the left box to be first in the list.

Chuck 2009-10-14 20:38:15

Thanks this worked.

2009-10-14 20:41:41

ansaurus

tags:

views:

answers:

IE7 versus FF floating issue

related questions