homepage Welcome to WebmasterWorld Guest from 54.227.41.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
No bottom border in IE
A horizontal menu with bottom border not displaying in IE
bobwhosmiles




msg:3567259
 11:53 pm on Feb 5, 2008 (gmt 0)

Hi,

I've made what I think is quite a tasteful replica of the nav menu for the flash version of my wife's photography site. It displays beautifully in firefox but in Internet Exploder the bottom border of each button fails to show.

Two questions.

Firstly - Can anyone suggest a fix for getting it to show in IE?

Secondly - each button needs to be a different colour but as you can see, this has massively expanded the css to define each. Is there a way to be more concise? In any other language I'd store the colour code in a string and use an IF statement but CSS ain't like that.

There are actually six buttons but I've only shown 3 to save space!

Cheers

Bob

The CSS:

#navlist
{
margin: 0;
padding: 80px 0 0px 0px;
line-height: 14px;
font-weight: bold;
margin: 2px 2px 2px 2px;
}
#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
.homenav a:link, .homenav a:visited{
border-bottom: 4px solid #B97290
text-decoration: none;
color: #999;
background: #ffffff;
padding-left: 20px;
padding-right: 0px;
padding-top: 4px;
padding-bottom: 4px;
}
.homenav a:hover, #homecurrent{
border-bottom: 4px solid #B97290;
text-decoration:none;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
background: #B97290;
color: #fff;
}
.gallerynav a:link, .gallerynav a:visited{
border-bottom: 4px solid #7F7573;
text-decoration: none;
color: #999;
background: #ffffff;
padding-left: 20px;
padding-right: 0px;
padding-top: 4px;
padding-bottom: 4px;
}
.gallerynav a:hover, #gallerycurrent{
border-bottom: 4px solid #7F7573;
text-decoration:none;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
background: #757573;
color: #fff;
}
.aboutmenav a:link, .gallerynav a:visited{
border-bottom: 4px solid #8A9FB0;
text-decoration: none;
color: #999;
background: #ffffff;
padding-left: 20px;
padding-right: 0px;
padding-top: 4px;
padding-bottom: 4px;
}
.aboutmenav a:hover, #aboutmecurrent{
border-bottom: 4px solid #8A9FB0;
text-decoration:none;
padding-left: 10px;
padding-right: 10px;
padding-top: 4px;
padding-bottom: 4px;
background: #8A9FB0;
color: #fff;
}

And now the html:


<div id="navcontainer">
<ul id="navlist">
<li class="homenav"><a href="#" id="homecurrent">home</a></li>
<li class="gallerynav"><a href="#">gallery</a></li>
<li class="aboutmenav"><a href="#">about me</a></li>
</ul>
</div>

 

SuzyUK




msg:3567491
 9:10 am on Feb 6, 2008 (gmt 0)

hi bobwhosmiles!

Firstly - Can anyone suggest a fix for getting it to show in IE?

yes there are a couple of ways, it's IE and it's layout thing again, however possibly easiest for your inline setup is just to add
position: relative; to #navlist li. You could also just trigger hasLayout on the <a> elements or float the <li>'s. Floating the list would still bring an IE foible whereby you might need hasLayout on the <a> elements so either way IE might need a wee help, this way at least position: relative; doesn't cause other browsers any problem.

Secondly - each button needs to be a different colour but as you can see, this has massively expanded the css to define each. Is there a way to be more concise? In any other language I'd store the colour code in a string and use an IF statement but CSS ain't like that.

There is a way to be more concise, it's the Cascade Part of CSS. You set all the common properties on an element then use the cascade, and/or specificity to override only the bits that need to change. I mention specificity here too because you have an extra layer for your "current" link and its color needs to be set specifically.

anyhow here the premise:
#navlist {
margin: 2px;
padding: 80px 0 0 0;
font-weight: bold;
background: #cfc; /*remove this*/
}

#navlist ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#navlist li {
display: inline;
position: relative;
}

that bit is pretty much as you had it, although I removed line-height from navlist, it wasn't doing anything as your top/bottom padding on the links is very specific.. the background-color on #navlist is just for visual and shows where the links were actually being cutoff in IE (before position: relative was added to the li)

next..
#navlist li a {
border-width: 0 0 4px 0;
border-style: solid;
text-decoration: none;
padding: 4px 0 4px 20px;
color: #999;
background: #fff;
}

#navlist li a:hover {
padding: 4px 10px 4px 10px;
}

that is all the common properties for each link, :link and :visited removed as the first bit covers all link states, then it is just the padding on the :hover state that needs to be overriden using the cascade. The hover state will still have the border-width, border-style and text-decoration etc as set by the previous rule because you haven't overruled them so there is no need to declare them again.

The only thing from here on in that needs to change is the border-color, background-color and text color for each link, it's hover state and the current link.

#navlist li.homenav a {
border-color: #B97290;
}

#navlist li.homenav a:hover,
#navlist li.homenav a#homecurrent {
background: #B97290;
color: #fff;
}

taking one of them (the rest follow the pattern of this one).. the first should be obvious, the only thing that is different about the .homenav link as opposed the more general link properties set above is its border-color, (it's getting the 4px bottom border and solid properties from the general settings above) - Again you don't need to set the border-color on the :hover state, it gets it by inheritance. For the hover state all you need to set is the background-color and color required, and as this also applies to the 'current' link the second selector gets added here too and the cascade overrules the colors which were set by the general properties for it too.

small note, the selectors are also sticking to a pattern, i.e. each one builds on the last.. this is because selector specificity can overrule the cascade, while this is useful in complex sheets, IMHO it's best to follow the pattern you start with and use the cascade where possible.

It actually is a bit like IF statements, setting the majority rules first then saying, oh, hang on if it's got this ID then I want that instead ;)

HTH

bobwhosmiles




msg:3569559
 10:53 am on Feb 8, 2008 (gmt 0)

Hi SuzyUK,

Thanks so much for your help with this. Just the job - and you've helped my understanding of CSS massively!

Cheers

Bob

jessejump




msg:3570899
 2:26 pm on Feb 10, 2008 (gmt 0)

>>>>>>>> border-bottom: 4px solid #B97290
text-decoration: none;

border-bottom is missing a ";" after

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved