PDA

View Full Version : M$ needs to be slaped in the face. CSS problems



NotalesS
29 Apr 2008, 03:07 PM
Hey there guys, i'm trying to finished up a site and it looks perfect in Safari, FF but when IE comes to town, you want to pull your hair out.

So my current woes is in IE 6,7.

IE6
1. The navigation floats right I(Its suppose to be center with margin: 0 auto;), and there is no rule that says float right.
2. The left side of my sliding doors ( rounded nav) does not show up.
3. Drop down menu doesn't work as well.
4. In my 3 main boxe ( they absolute position) The content inside (h2, ul list) are pushed way up.


IE7
1. Nav stays center, just sliding doors left side img does not appear
Same as 4 in IE6 problem


I've been trying to figure out different solutions to make these elements work the way there suppose to but no luck. The only alternative i have at the moment is to write IE6, IE7 only css rules. Thats something i really dont want to do. I still need to clean up alot of the css so please excuses the mess.

Heres the css and xhtml filenotaless.net/ie_problems.zip

Wickham
30 Apr 2008, 06:34 AM
I've managed to get IE7 and IE6 to show the menus better but I haven't cured all the problems. I did it the easy way by inserting conditional comments as the styles are so complicated I couldn't quickly find a solution that worked for all browsers.

Insert this in the index.html file head section after the main stylesheet link just before the </head> tag:-

<!--[if ie]>
<style type="text/css">
#nav ul ul { margin:1em 0 0 -72px; }
#topPanel ul { display: block; position: relative; top: 100px; }
</style>
<![endif]-->

<!--[if ie 6]>
<style type="text/css">
body {behavior:url(csshover.htc);}
#nav_container { width: 980px; }
#nav_ul_one { margin-left: 100px; }
#nav_ul_one li { float: left; }
</style>
<![endif]-->

You need to download csshover.htc file Version 1.42.060206 from near the bottom of this page:-
http://www.xs4all.nl/~peterned/csshover.html
There's no need to open it and look at it, just put it in the same folder as the html file.

Firefox and IE6 show the second level nav links side by side under item 1 and I haven't found a solution for that.