IE7 - bottom margin craziness 1

[kaht]

So, my machine got the IE7 critical update today. What stinks is my company is mostly win2k machines, so this problem isn't even very relevant for the time being (till they upgrade to XP).

Anyway, I have to start with a disclaimer - these pages have a lot of very unnecessary markup. It's used to create the pretty rounded borders around everything. Which means a lot of nested divs. This project is something I started working on when I first started learning CSS, so it's a bit excessive.

http://www.silkypups.com/ccapweb/page1.html

http://www.silkypups.com/ccapweb/page2.html

This application is on our company network so I extracted 2 skeletons to post on the internet so that I could provide everybody with an example of what's going on. If you view the 2 pages posted above with IE6 or FF they display as was intended. However, viewed in IE7 there's a new problem that I can't quite figure out.

Looking specifically on page1.html, the menu div on the left side extends down an extra 3 pixels. Unfortnately the right-bottom and left-bottom surrounding divs do not, which means that the cutesy borders do not line up correctly. The 2 images for the bottom corners are up too high and don't line up with the bottom border.

Now, if you direct your attention to page2.html you'll see that the navigation menu does not have that problem, but the user list directly below does. So it made me wonder why they have the exact same structure but only the div on the bottom had that problem. The only thing that I could conceive is that I had given a margin-bottom:3px to the div, but nothing was below it and for that reason it was getting screwy. So, on page1.html directly after menu on the left side I put <div></div> so that there would be something below. This worked - making the borders line up. So, I then did the exact same thing for the content area of the page, that worked as well for whatever reason......

However, the same fix applied to page2.html did not work, again for whatever reason.....

So, what is everybody's opinion? Is this a bug that is exclusive to IE7? Bug issues with IE7 have been hard for me to find on google so far, given the fact that IE7 is so new. For that reason I can't find any sort of documentation on this problem. If it is a bug that is exclusive to IE7, then does anybody know of any IE7 specific CSS hacks? I'm headed out for the day so it will likely be tomorrow before I'll be able to respond. Thanks for any help.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[ChrisHunt]

I don't have IE7 on this machine so I can't examine your problem directly, but my guess is that it's a CSS problem. Maybe this bit:

* html div#menu .menuItem {

   height:1%;

}

or maybe this:

* html div#navList2 ul li a {

   /* IE sets different margins for list items so we give them a smaller padding */

   padding:2px 0px 2px 19px; 

}

The [tt]* html[/tt] hack doesn't work on IE7 - they fixed that bug - but you may still need to send that CSS to get the layout right. Microsoft recommend you use conditional comments instead of hacks to target their browsers. That may be the simplest approach.

Something else you could try is swapping all rules like this:

* html foo {
   height: 1%;
}

for this:

foo {
   zoom: 1;
}

Which should have the same effect (giving the element "layout" in IE) but won't affect other browsers. I think it'll give you validation errors in your CSS though.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[kaht]

Chris, I think you've got it figured out. I did a little testing and found a few things:

1) * html does work in IE7, but only when you've not supplied a doctype. I made up a quick test yesterday to see if * html was supported by IE7, and it worked - but w/o a doctype on the page. After your suggestion I added a doctype to the test page and it stopped working.

2) The same case works with the hover pseudo class. I tested that yesterday as well because I remember that to be one of the things that IE supposedly "fixed". And of course, it didn't work - but again today after your suggestion I added the doctype and it worked fine. I like how microsoft is still catering to the crappy old developers - IE7 seems to work just like crappy old IE6 when it's in quirks mode.

3) In page1.html and page2.html above I modified the code to knock IE into quirks mode by throwing the letter "a" in front of the doctype. When I did this the holly hack started working again because IE7 interpreted the * html styles and the borders lined up like they were supposed to. So it would appear that you were correct in deducing that the * html styles were not being applied - that seems to be the apparent problem.


So, my issue seems to lie in the fact that I need to set styles targeted directly at IE7 now, or more specifically a better way to set blanket styles for all versions of IE.... I've never used conditional comments before, so I'll have to look up on them. Don't suppose you know off the top of your head if they work in css files? Time to go hit google....

Thanks again.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[ChrisHunt]

No doctype = quirks mode = IE5,6 & 7 all behaving in the same sucky way. Not recommended, as it makes it harder to get IE consistent with other browsers.

Conditional comments only work in HTML.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[kaht]

Yeah, but unfortunately my page acts more like this:

IE6 with doctype = IE7 in quirks mode.

Dropping the doctype isn't really an option, and I'd prefer that my CSS validates, so I guess I'm going to have to pull the IE only styles out of the CSS file and into the page.... what a pain in the ass.....

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

 

[Vragabond]

You can however use IE conditionals to load yet another stylesheet. A stylesheet that contains nothing but IE css corrections. Then you can use something like:

<!--[if lt IE 7]
<link href="ie6_style.css" rel="stylesheet" type="text/css" media=screen>
<![endif]-->
<!--[if IE 7]
<link href="ie7_style.css" rel="stylesheet" type="text/css" media=screen>
<![endif]-->

For instance. I don't have IE7 yet so I don't know if it will require any special treatment over IE6.

 

[kaht]

Thanks vragabond, that's actually what I did on friday to fix it.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]