IE6 not showing bottom border

[Philippa Priddle]

I've designed this test page:-

http://www.step-up-to-science.com/bi...reWs/test.html

I've put a bottom border on the top right links: 'Skip to contents' and 'Skip to navigation'. It works fine in Firefox, but in IE6, the bottom border doesn't show. I've put these links inside a 'skip' div. This is floated and is contained within a 'head' div which is relatively positioned. This is the relevant CSS.

#head {
	color: #000000;
	position: relative;
	height: 20px;
	width: 768px;
	font: 1.0em Arial, Helvetica, Verdana, sans-serif;
	background: #003366;
	padding-bottom: 25px;
	}

.skip {
	color: #FFFFFF;
	position: absolute;
	top: 0px;
	right: 0px;
	/*width: 538px;*/
	/*height: 40px;*/
	font: 1.0em Arial, Helvetica, Verdana, sans-serif;
	padding-top: 0px;
	padding-right: 10px;
	background: #003366;
	}
	
.skip li {
	position: relative;
	float: right;
	list-style-type: none;
	padding: 0px 7px; 
	}
	
.skip a:link {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 0.5px solid #FFFFFF;
	font-weight: bold;
}

.skip a:visited {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 0.5px solid #FFFFFF;
	font-weight: bold;
}

.skip a:hover {
	color: #FFFFFF;
	text-decoration: none;
	border: none;	
}

and this the HTML

<div id="head">
	 
	  <ul class="skip">
			<!--open skip div-->	
			<li><a href="#main">Skip to contents</a></li>
			<li><a href="#navmenu">Skip to navigation</a></li>			
	  </ul>
			<!--close skip div-->
			</div>

Can anyone help?

Thank you very much.

[Stomme poes]

Well, IE7 and 6 both do it, and I think they're simply cutting off that border. It's right at the very bottom edge of the menu.

Are these meant to stay looking like they do, or are they absolutely positioned as a test and will become invisible later?

I would do the code differently, esp with IE's issues with floated li's.

<div id="head">
  <ul class="skip">
    <li><a href="#main">Skip to contents</a></li>
    <li><a href="#navmenu">Skip to navigation</a></li>			
  </ul>
</div>
(same as yours)

CSS:
#head {
  color: #000;
  position: relative;
  height: 20px;
  width: 768px;
  font: 1em Arial, Helvetica, Verdana, sans-serif;
  background: #036;
} <--removed bottom padding, not sure what that's doing

.skip {
  position: absolute;
  top: 10px; <-- looked moved-down in FF for me, while too high on IE
  right: 10px;
}
	
.skip li {
  display: inline;
  list-style-type: none;
}
	
.skip a {
  color: #fff;
  padding: 0 7px;
  font: 1em/1.2em Arial, Helvetica, Verdana, sans-serif;
  font-weight: bold;
}


.skip a:hover, .skip a:focus {
  text-decoration: none;
}

Since you're absolutely positioning it, using padding to then try to change its position surely will look differently between browsers. When I looked in IE, the menu was waaay up at the top of #head. In FF there was a gap in the top.
Do you have a universal reset? Makes sure all browsers start at 0 so they put things in the same place.
* {
margin: 0;
padding: 0;
}

Or you could just have it for lists, which are particularly different per browser:
ul {
margin: 0;
padding: 0;
}

So I left the a's inline, and let text-decoration do the same job as the border (dunno if you specifically wanted the border instead for some reason?), letter .skip a give all the same declarations to all the other types of a (with the text-decoration: none as the exception for :hover and :focus).

Removed height and width on the ul so that it could grow... I wonder if IE was looking at that 1em font size and shrinking the ul to that exact size (which could hide the border I think) so I added a line-height which is a hair bigger.

By the way, this isn't true:
body {
...
font-size: 62.5%; /* This takes font size to a standard dimension so that 1 em = 10 px */
wish it were. Makes the text too tiny to read on machines with non-standard dpi settings. : (

I dunno, did this work?

[Erik J]

Try set the bottom border on the anchor element with no state, instead of :link or added:

	
.skip a,
.skip a:link {
	color: #FFFFFF;
	text-decoration: none;
	border-bottom: 0.5px solid #FFFFFF;
	font-weight: bold;
}

[Stomme poes]

Lawlz, erik has the easier answer : )

[Erik J]

border-bottom: 0.5px solid #FFFFFF;

I should have mentioned that a pixel can't be divided, change that 0.5px to 1px.
(But that's not the cause not showing in IE.)

[Philippa Priddle]

Thanks both for your help.

Stomme poes, the padding issue was one that I was trying to sort out, so thanks for pointing out the universal reset:

* {
margin: 0;
padding: 0;
}

Would you normally avoid using floated divs in preference of using display:inline?

Thanks erik, your suggestion worked. I used '.skip a' instead of '.skip a:link'. Does IE have an issue with it and if so, is it generally best to avoid using it?

[Stomme poes]

I dunno if IE has some special issue with a:link, but I personally don't ever bother with it as it's pretty useless. a can give its declarations to all the other a's ( :hover, :focus etc) while a:link is only only untouched uncached links... meaning, if you're setting your "defaults" on a:link, you have to repeat everything for every other state too. It's always less code to set a default for "a" and then only the differences in :hover etc.

When I first started doing menus, I started floating the li's cause that's what people did. But when IE7 came out, sometimes instead of having the li's sit in a horizontal line like it should, some people got a "staircase effect" where each link was a bit lower than the others. Floating the a's instead solved this problem (also makes the a's blocks, so height and width can be set, also margins, and removes luckily an IE whitespace bug that display: block seems to create). I only float my li's when doing a dropdown menu since the sub ul's are children of the li and not the a. No staircase effect seen then anyway. But, IE7 needs something to be said about the li's... it's like they need to be mentioned. So I set them to display: inline even though that's what they'd do anyway when I'm floating the a's. I'm guessing IE doesn't know to display them inline by default cause they're really not "inline" elements but "flow", whatever that is. Something between a block and inline I guess...
You can also just say something like color, or font-weight or something. IE7 just needs you to show the li's exist or something : )

But were this my header, I wouldn't have even absolutley positioned the menu anyway... just set a width (in ems) that's just wide enough for the menu items to stay in line (in all browsers... remember people have various dpi's set so one machine might look inline while on another part of the menu wraps) and float the menu right... and give padding-top on #head to push the menu down a bit, to where you wanted it. I still dunno why IE didn't have your menu placed exactly where it should be; my only guess was that you set the menu to 0, 100% (top right) and then tried to use some padding too and that screwed with IE? Because the outline in FF was nice, while in IE the height of the menu was exactly (and nothing over) 1em... which didn't seem to get the underline/border.

In any case, good luck with the site.

MC Hawking:
"Upon blind faith, they place reliance/
what we need more of is science..."

[Philippa Priddle]

Thanks for your very useful advice on floating li's and links. In future I won't bother with a:link if defaults can be set for a instead. Anything to reduce code!

I do see your point about setting a width for the menu instead of positioning it absolutely and I may well experiment using your method. It does need to be right.

Thanks again for your time.

[Stomme poes]

Funny, I was just looking for info about a bug when I ran across that IBM guy's site (I forget his name, but he works with accessibility etc) and he was explaining this thing about IE and skip links... or any links. When tabbing around the page, hitting enter on any link brought the cursor back to the top of the page, even when it wasn't supposed to (like an in-page link as skip links usually are), and among other things, setting the link in question to position: absolute fixed this... I didn't read it real in-depth, just skimmed because it wasn't about my bug, but I did consider how my own skip links faired. I should try to find that page again...

Okay, I found A page by the guy, but it's not THE page, because THE page started out with using a table just to wrap the link (and that was overdoing it, as the article later pointed out that other things triggered IE to work correctly)...
http://jimthatcher.com/news-070607.htm

So while I usually don't position my skip links absolutely, there may be a benefit to doing so for IE6 users... test test test.

[DEVlady]

Thanks a lot Stomme. Your suggestions helped me getting my <li> to have proper borders in IE.