Same markup, different rendering... IE6

Why is MS doing this to me?

[shasan]

And I'm not talking about cross-browser compatibility. I'm talking SAME BROWSER compatibility... does that even make any sense? Allow me to explain.

Experimenting with a transitional version of my website going from nested tables to CSS.

1. Working on a Menu box which is now completely CSS

2. Boxed links with the box's background colour changing on hover.

3. It's supposed to change colour if you mouseover anywhere on the box (i.e. doesn't have to be on the word).

4. Works fine in NN7, Opera 7.

5. Works fine in IE6... once. Suppose I want two boxes, one under the other, I cut and paste the code and the box shows up just fine, EXCEPT that it ONLY lights up when I hover over the WORDS.

6. What is the deal? Same EXACT code, cut and pasted... all the div tags are accounted for, nothing missing, but it acts different. SAME page, SAME browser, TWO different renderings.

it's making me mental.

P.S. It's really tight in both NN7 and Opera7

[DrDoc]

Floating boxes? ;)
Sounds very much like the "peekaboo bug".
There was a post fairly recently about that: [webmasterworld.com...]

[SuzyUK]

>>Cut/pasted code...

is there still a width on the parent element?

the whole "box" will only react to a hover event if (in IE) it's given a width if that width is a percentage then it's a percentage of the parent...

Suzy

[shasan]

hmm... I'm still new to this, so I'm not sure what you mean by the parent element. I have the HTML structured in the following way:

<!--START LEFT COLUMN-->
<div id="leftstuff">
<!--START BOX 1 --> 
<div class="boxmain">
 <div id="boxtitle"> <!--Box title has a different bg-->
 Categories 
 </div>
 <div id="boxcontent">
 <div id="boxlinks">
 <a href="http://www.example.com">One</a>
 <a href="http://www.example.com">Two</a>
 <a href="http://www.example.com">Three</a>
 <p></p><--don't worry I'll get rid of this
 </div>
 </div>
</div>
<!-- END BOX 1 -->
<!-- START BOX 2 (Exactly the same divs) --> 
<div class="boxmain">
 <div id="boxtitle"> <!--Box title has a different bg-->
 Categories 
 </div>
 <div id="boxcontent">
 <div id="boxlinks">
 <a href="http://www.example.com">One</a>
 <a href="http://www.example.com">Two</a>
 <a href="http://www.example.com">Three</a>
 <p></p><--don't worry I'll get rid of this
 </div>
 </div>
</div>
<!-- END BOX 2 -->
</div>
<!-- END LEFT COLUMN -->

The hovering is happening in div#boxlinks, so I guess the parent element would be div#boxcontent... In which case, there is no width defined. The width is defined in div#leftstuff and in div#boxmain.

Again, the wierd thing is that the hovering works in Box 1 but not in Box 2 *shrug*

any help is greatly appreciated, I'm trying my best to convert :)

[shasan]

Ok, i fixed it. It was the widths as Suzy said. (Thx suzy!)Defined width:100% for both boxcontent and boxlinks and that fixed it the IE trio(5-6), and EVERYTHING always works in Opera.

Only problem I had was with Firebird and NN7. Mozilla seems to do funny things with width:100% and padding combined. Say I have padding: 1px, they seem to add the 1px on top of the 100%.

So if the parent element is 150px wide, the child seems to effectively span 151px (or is it 152px.. both sides?).

Anyway, I think that's what was happening, it was overshooting the parent box in those two browsers. I had to get rid of the padding and center the text.

Doesn't look that bad I guess, can't have everything. Alls I know is that it works in all the major browsers...

Now to get the 3 column liquid layout to work in IE... (M.S. again? You betcha.)

shasan.

[gmiller]

Yes, when you specify the width of an element, you're specifying the width before adding in padding and margins.

I also notice that you've got duplicated id attributes in your HTML. I'm slightly surprised none of the browsers choked on that.

[shasan]

they seem to work in all the browsers. Why would they not work?

I'm still unsure as to the use of id's versus classes.

[DrDoc]

ID = unique. Just as there can only be one person with the exact same SSN/ID # the IDs on the page have to be unique.

class = group of elements. Just as there are different breeds of dogs, though they are all dogs, you can use a class name to group an element with others.

[shasan]

Ah, So if I have:

div#somediv { some styles }

I can only call <div id="somediv"></div> once in my page?

what would I use this for?

[DrDoc]

Well, you can have a div called #footer for example... or an unordered list called #navbar.
The main elements on a page are excellent uses of ID