Forum Moderators: open
Brand new to the site and css so please forgive me if this is in the wrong place. I did search for help topics on this but nothing jumped out (lots of other useful stuff did though - thanks!)
My first proper site is now live and (in my opnion) looks lovely, however when my wife visited it using ie6 (big corporation, haven't upgraded) the navigation options didn't work.
It's a simple case of invert the colour on hover, so dark on white becomes white on dark except in ie6 as it appears to become white on white.
Here is the code (sorry if it's too much or not enough)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="navigation">
<p class="navigationtitle">Have a look around</p>
<p><a href="index.html" target="_self" class="navigationbuttons">Home</a></p>
<p><a href="Websites.html" target="_self" class="navigationbuttons">Web Design</a></p>
<p><a href="BusinessDevelopment.html" target="_self" class="navigationbuttons">Business Development</a></p>
<p><a href="marketing.html" target="_self" class="navigationbuttons">Marketing</a></p>
<p><a href="about.html" target="_self" class="navigationbuttons">About us</a></p>
<p><a href="values.html" target="_self" class="navigationbuttons">Our values</a></p>
<p><a href="Contactus.html" target="_self" class="navigationbuttons">Contact us</a></p>
<p><a href="News.html" target="_self" class="navigationbuttonsnews">Latest news</a></p>
</div>
CSS
#navigation {
width:150px;
height:350px;
margin:5px;
background-image:url(Images/Navigation-background.jpg);
background-repeat:no-repeat;
overflow:hidden;
position:relative;
top:-30px;
font-size:14px;
padding:10px;
}
a.navigationbuttons{
display:block;
font-size:12px;
font-family:"Century Gothic";
font-weight:bold;
color:#52474e;
margin-top:10px;
margin-left:1px;
margin-bottom:2px;
}
a.navigationbuttons:link {color:#52474e}
a.navigationbuttons:visited {color:#52474e;}
a.navigationbuttons:hover {color:#FFFFFF; cursor:pointer; background:#52474e;}
a.navigationbuttonsnews{
display:block;
font-size:14px;
font-family:"Century Gothic";
font-weight:bold;
color:#A0C300;
margin-top:10px;
margin-left:1px;
margin-bottom:2px;
}
a.navigationbuttonsnews:link {color:#A0C300}
a.navigationbuttonsnews:visited {color:#A0C300;}
a.navigationbuttonsnews:hover {color:#FFFFFF; cursor:pointer; background:#A0C300;}
.navigationtitle{
font-size:14px;
font-family:"Century Gothic";
font-weight:bold;
color:#52474e;
margin-top:10px;
margin-left:2px;
margin-bottom:2px;
}
Many thanks in advance
Tim
Try adding a specific width rule to both a.navigationbuttons and a.navigationbuttonsnews - I tried width:100%; and that did the trick.
Appreciate this and the welcome.
Cheers
In practical terms I know that many IE bugs are not there when I declare an explicit width for the element.
[edited by: tedster at 8:18 pm (utc) on Aug. 28, 2009]
Many of the IE problems are related to hasLayout and having it-or not having it applied to the element. It's all deviant from the standard CSS, but can be a real pain.
Here is Microsoft's take on it from 2005: [msdn.microsoft.com...] but you can also try to throw it about a bit if you need IE to fix things without needing to understand all of it :)
Or you can try first things like IE7.js to see if they don't fix the deviant behavior before you go to this.
