IE float margin/padding

[gonso]

my page has a <div> that has been floated left; next to it is another <div> that has a "margin-left" set to exactly the width of the floated <div>. in netscape, my text/images in the <div> next to the floated <div> run right up against the floated <div>.

however in IE, there is a small space (indent, margin, padding?) between my images/text and the floated <div>.

i am figuring that IE has got some rendering problems but i am wondering if anyone can help figure how to get my text/images to sit right next to the floated <div>

here's the link to the site:

[ohsu.edu...]

here are my styles for each <div>

#leftcontent{
float:left;
width: 148px;
background-color: #CCD1D2;
margin-top:0px;

}

#rightcontent{
margin-left:148px;
margin-top: 0px;
padding-left:0px;
background-color: #ffffff;

}

the following is a <div> within the "rightcontent" div that i would like to run directly into the "leftcontent" <div>

#subsection{
height: 26px;
background-image: url(../Images/ct_john_images/subsection_titlebg.gif);
background-repeat: no-repeat;
background-position: 0 0;
}

thanks for any and all help.

john

[ergophobe]

It's because of the IE box model. If you have a XHTML 1.0 Strict DTD (as one example) you will not have this problem. If you have no DTD (or it's not on the very first line), IE will revert to "quirks" mode. In that case

In IE
total width = width

In Opera, Mozilla, W3C Recs, Firefox, Safari, Konqueror....

total width = left margin + left border + left padding + width + right padding + right border + right margin

That answer it?

Tom

[gonso]

Tom,

i understand the problem with IE's box model. however, i have not set any "width" properties so i don't know why this would affect my <div>.

also, to my knowledge, my doctype should switch on IE6's correct rendering mode. i wll double check it.

thanks for the help

j

[ergophobe]

Sorry,

I didn't read closely enough.

Does it still have problems if all margins, borders and padding are set to 0 (except of course the one to offset the right div)?

Is the containing element floated? I've had differences between IE and Mozilla when the containing element is not floated.

[gonso]

it is floated...i think this might be the cause of the small indent.

the right-margins on the float are not set to 0 at the moment...but i have tried that and it didn't work.

it's pretty quirky b/c if you check my page at the moment, one of the <div>'s is aligned correctly against the float. two others are not. the one that is aligned correctly has a min-height property while the other two do not. if i change the other two to "min-height" (as opposed to "height" then it renders it correctly aligned.

however, technically the min-height property is not working because the <div> with the min-height property should be a lot longer.

i am thoroughly confused.

j

[ergophobe]

Gonso,

Did you get this figured out? Since you posted a URL, I broke down and looked at your page in both IE and Firefox and it looks fine.

By the way, in general WebmasterWorld has a rule against posting personal URLs (this is in the charter). In principle readers should not have to leave the page to see the problem. The reasons for this is

- to encourage people to simplify and generalize their questions

- many people were misusing this (as in, "what's wrong with "mysite.com"? which then gets indexed by Google and it appears that the page is popular because it has inbound links etc etc).

- to avoid becoming a site review site.

I would not say your post violates any of these, but the rule is sort of a necessary evil.

It might also be a good idea to check out WebmasterWorld Guidelines for Posting Code [webmasterworld.com]. Again, not because there is a problem with the original post which is thoroughly appropriate, but just as future reference.

Cheers,

Tom

[SuzyUK]

Is (or was) the "gap" in IE about 3px?

if so it's not the box model.. but IE's buggy rendering of floats (even in strict mode it's got problems)

see msg#3 in this thread [webmasterworld.com] for explanation/fix if required..

Suzy