Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi,
I have a problem with the following CSS viewed in Safari 3.1.2. The navigation links should have a grey bar appearing as a background-color on rollover and the grey bar should fill the width of the div (almost). They work fine in IE6, IE7 and FF, but Safari will not display the rollovers unless I remove "display:block;" that is highlighted in ".leftNav a:hover", ".leftNav ul a:hover" and "leftNav li a:hover". If I remove this line the background-color does not fill the width of the div in IE and FF. I need to find a way for both of these to work. Any help would be appreciated.
Cheers
Pockitz
I have put a page on my site which shows the left hand Nav with display:block; in place (works in IE and FF, but not Safari) and the right hand Nav with display:block; removed (works in IE/FF/Safari but background color does not fill div width.
You can view the page here:
http://www.pockitz.co.uk/test/leftNavTest.html
and here is the CSS for the left hand nav which does not work in Safari:
#left-sidebar {
float: left;
height:650px;
padding:10px;
padding-top:20px;
background-color:#FFFFFF;
width: 140px;
top: 100px;
_top: 100px; /* for IE to read properly */
}
.leftNav{
color:#333333;
font-size:1.2em;
font-weight:bold;
line-height:140%;
}
.leftNav a{
text-decoration:none;
}
.leftNav a:hover{
color:#CC0033;
text-decoration: none;
background-color:#CCCCCC;
display:block; /*remove this for Safari to show hover properly properly */
width:160px;
_width:140px; /* for IE to read properly */
}
.leftNav ul{
color:#333333;
font-weight:normal;
list-style-type: none;
}
.leftNav ul a{
color:#333333;
font-weight:normal;
list-style-type: none;
text-decoration:none;
}
.leftNav ul a:hover{
color:#CC0033;
font-weight:normal;
text-decoration: none;
background-color:#CCCCCC;
display:block; /*remove this for Safari to show hover properly properly */
width:160px;
_width:140px; /* for IE to read properly */
}
.leftNav li{
color:#999999;
font-weight:bold;
text-indent:10px;
}
.leftNav li a{
color:#999999;
font-weight:bold;
text-indent:10px;
text-decoration:none;
}
.leftNav li a:hover{
color:#CC0033;
font-weight:bold;
text-indent:10px;
text-decoration: none;
background-color:#CCCCCC;
display:block;/*remove this for Safari to show hover properly properly */
width:160px;
_width:140px; /* for IE to read properly */
} -
You shouldn't need to use display:block anyway. All you need to do is float your list element's and give them a width value. I think that's why Safari isn't recognising your hover conditions on the [li]'s, because you haven't floated them to define them as a block or given them a width either.
Your HTML is invalid too: you can't have the likes of "Carpets", "Floor Tiles", "Vinyl Flooring" heading in an un-ordered list without them having a child element of their own. Also, your CSS has a lot of repeated conditions that can be thrown away and trimmed away. I've made a stripped down example, with revised HTML and CSS. -
Hi Tetsuo,
Thanks for solving my problem. This is my first experiment into creating a site with DIV tags and lists, so I am chuffed that the only thing that I have not been able to solve so far are these hover states. I have applied your changes to the site CSS and HTML and it looks great.
Thanks again.
Cheers
Pockitz
P.S.
"Tetsuo is not your friend, he's ours, if somebody's gonna kill him, it should be us!"
Akira is a fantastic movie.
1 to 3 of 3