Thu, 2009-02-26 12:56
Being relatively new to CSS, I find I am spending a lot of time making it work in IE ("7" in particular).
So, does it make sense to have a forum "How can I get this to work with IE" or "Why won't this work with IE"
At this point, I am a believer in dual CSS sheets. From an organization perspective, it provides clarity (i.e. I know the code I am looking at is specifically for IE) and isolates the problem to a specific file. So I put this in each web site header:
<!--[if IE]> <link rel="stylesheet" type="text/css" href="style_ie.css" /> <![endif]--> <![if !IE]> <link rel="stylesheet" type="text/css" href="style.css" /> <![endif]>
(For beginners, don't let the comment stuff throw you off, it works.)
A good start would be, the following works in Firefox but the drop-down does not happen with IE7, what needs to be changed to make it work in IE:
#outside{ border:1px solid #000000; background:#000000; } #navigation-1 { padding:1px 0; margin:0px; list-style:none; width:100%; height:21px; border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF; font:normal 10pt verdana, arial, helvetica; } #navigation-1 li { margin:0; padding:0; display:block; float:left; position:relative; width:120px; } #navigation-1 li a:link, #navigation-1 li a:visited { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#000000; color:#ffffff; width:148px; height:13px; } #navigation-1 li:hover a, #navigation-1 li a:hover, #navigation-1 li a:active { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#666666; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; } #navigation-1 li ul.navigation-2 { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #000000; border-top:none; } #navigation-1 li:hover ul.navigation-2 { display:block; } #navigation-1 li ul.navigation-2 li { width:146px; clear:left; width:146px; } #navigation-1 li ul.navigation-2 li a:link, #navigation-1 li ul.navigation-2 li a:visited { clear:left; background:#005500; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } #navigation-1 li ul.navigation-2 li:hover a, #navigation-1 li ul.navigation-2 li a:active, #navigation-1 li ul.navigation-2 li a:hover { clear:left; background:#666666; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; } #navigation-1 li ul.navigation-2 li ul.navigation-3 { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #000000; border-left:1px solid #000000; background:#ffffff; z-index:900; } #navigation-1 li ul.navigation-2 li:hover ul.navigation-3 { display:block; } #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited { background:#000000; } #navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover, #navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active { background:#666666; } #navigation-1 li ul.navigation-2 li a span { position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; } #navigation-1 li ul.navigation-2 li:hover a span, #navigation-1 li ul.navigation-2 li a:hover span { position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }