why are my links looking like this!?

tameem · #1 (**permalink**) Feb 18th, 2007, 03:01

http://home.comcast.net/~adamq/chapter07/links-nav.html

how come my links have the additional spacing below each a element..when I setup display:block it appears! I cant figure out why Im getting this to look this way..it looks fin ein firefox but of course in IE6 it doesn';t look right. what am I missing..??

karinne · #2 (**permalink**) Feb 18th, 2007, 03:05

Add height: 1px; to #nav-list a {

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="all">
* {
    padding: 0;
    margin: 0;
}
body {
    font: 100% Arial, Helvetica, sans-serif;
}
#nav-list {
    font-size: .80em;
    list-style-type: none;
    margin: 0;
    padding: 2px;
    border: 1px solid #333;
    width: 160px;
}

#nav-list a {
    text-decoration: none;
    background: #FFFFCC;
    display: block;
    padding: 2px 5px;
    height: 1px;
}
</style>
</head>

<body>
<ul id="nav-list">
  <li><a href="#">Star Wars</a></li>
  <li><a href="#">Empire Strikes Back</a></li>

  <li><a href="#">Return of the Jedi</a></li>
  <li><a href="#">Prequel News</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Links</a></li>
</ul>
</body>
</html>

mreine · #3 (**permalink**) Feb 18th, 2007, 05:56

This is a bug in IE where it adds the space after the /li closing. Something about seeing a return. I'd have to search again to find the full bug explanation.

Like karinne suggested, adding the height attribute fixes it. I believe adding a width also fixes it.

Changing the code to the below layout will also fix it without having to add the height or width attribute.

Code: Select all

<ul id="nav-list"><li>
 <a href="#">Star Wars</a></li><li>
 <a href="#">Empire Strikes Back</a></li><li>
 <a href="#">Return of the Jedi</a></li><li>
 <a href="#">Prequel News</a></li><li>
 <a href="#">Contact Us</a></li><li>
 <a href="#">Links</a></li></ul>

tameem · #4 (**permalink**) Feb 18th, 2007, 07:16

the problem with doing that is it screws up the the way the links look in firefox...

tameem · #5 (**permalink**) Feb 18th, 2007, 18:15

the problem I have with the last posting is we are changing semantic markup into invalid markup. id prefer to leave the markup as is and apply 1px height.

so other browsers does not see this, I used the * html so the rule only is seen by IE. thanks for all your postings.

mreine · #6 (**permalink**) Mar 18th, 2007, 08:09

Changing semantic markup in to invalid markup... huh? All this does is move the <li> to the previous line. Makes no difference whatsoever semantically. And both IE and FF look exactly the same when done this way.

Adding a height and using the * are both hacks.

I think IE7 corrected this issue which means any site using the height hack will see jumbled vertical links. I need to do more testing in IE7 to make sure of this though.

tameem · #7 (**permalink**) Mar 19th, 2007, 14:28

i didnt mean to confuse semantic with valid markup, those are two different things. I meant i was afraid that by doing that as posted above as far as changing the li, it would produce invalid markup when I tried to validate the document.
whats so suprising to me is none of the CSS books I hvae read so far speaks to this issue in IE6 so I was suprised it didn't work.
thanks again.

karinne · #8 (**permalink**) Mar 19th, 2007, 14:47

So ... did you try the solution I offered? Adding the height: 1px; to #nav-list a { ? Because ... that works and is a solution found everywhere.

tameem · #9 (**permalink**) Mar 19th, 2007, 15:21

Yes, I did and it worked. Thanks.

karinne · #10 (**permalink**) Mar 19th, 2007, 15:26

Ok ... no problem! I was just confused there with the last few posts!

moojoo · #11 (**permalink**) Mar 19th, 2007, 17:26

IE adds extra spacing when you make a styled vertical list, a workaround is width:100%; on the li's in your css.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Msie doesn't make my links links..	delusion	Web Page Design	7	Nov 7th, 2007 08:05
PR4 links for sale...links in an excellent position	agent14	Link Building and Link Sales	1	Mar 5th, 2007 21:33
PR 5 Links available for recip links	GARY	Link Building and Link Sales	1	Aug 19th, 2006 09:52
Blured Links (image links)	bruno89	Web Page Design	2	Jul 25th, 2006 14:48
Different coloured links without modifying links?	Webforumz Staff	Web Page Design	12	Aug 29th, 2003 18:48

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
why are my links looking like this!?