Extra list spacing in IE6

Discussion in 'HTML & Website Design' started by jordanthegreat, Dec 12, 2007.

0
  1. #1
    Hey Guys. Need your help.

    I have created the following web page as a layout for a site for a school project. The big buttons in the top right will be the nav. I used a <ul> for them (the entire site will be tableless) but for some reason, in IE6 only, there seems to be extra space between each button (or <li>). The extra space is only on the sides though and it causes some buttons to get pushed to a third line which is not good at all. I noticed that by taking the float off of the nav area, the extra spacing goes away. I also tried removing white space in the html but that did not help.

    Do you guys have any suggestions on how I can resolve this problem?

    http://reelracing.tv/antbar/index.html

    The style is internal so just view the source and you will see everything you need.

    Thanks for your help.
    Jordan
     
    jordanthegreat, Dec 12, 2007 IP
  2. mashup

    mashup Active Member

    Messages:
    144
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    55
    #2
    have you tried to define the width of your ul class and have you added: display:inline

    a screen might help to solve this but i'm pretty sure you just need to adjust your ul class
     
    mashup, Dec 12, 2007 IP
  3. babyboy808

    babyboy808 Well-Known Member

    Messages:
    491
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    125
    #3
    You don't have a Doctype in your code, your in quirks mode:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0038)http://reelracing.tv/antbar/index.html -->
<?xml version="1.0" encoding="utf-8" ?>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><title>Antigua &amp; Barbuda</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
	BACKGROUND-COLOR: #7da5d7; TEXT-ALIGN: center
}
#wrapper {
	BACKGROUND: url(images/bl.gif) #fff repeat-y left top; MARGIN: 0px auto; WIDTH: 800px; TEXT-ALIGN: left
}
#boxtop {
	BACKGROUND: url(images/ctl.gif) no-repeat left top; WIDTH: 100%; HEIGHT: 22px
}
#boxtop span {
	DISPLAY: block; BACKGROUND: url(images/ctr.gif) no-repeat right top; POSITION: relative; HEIGHT: 22px
}
#boxbottom {
	BACKGROUND: url(images/cbl.gif) no-repeat left bottom; HEIGHT: 26px
}
#boxbottom span {
	DISPLAY: block; BACKGROUND: url(images/cbr.gif) no-repeat right top; POSITION: relative; HEIGHT: 26px
}
#content {
	PADDING-RIGHT: 13px; PADDING-LEFT: 20px; BACKGROUND: url(images/br.gif) repeat-y right top; PADDING-BOTTOM: 1px; MARGIN: -5px 0px -10px; PADDING-TOP: 1px; POSITION: relative
}
#header {
	BOTTOM: 8px; POSITION: relative
}
#header img {
	FLOAT: left
}
#nav {
	FLOAT: right
}
#nav ul {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 500px; PADDING-TOP: 0px;
	border: 1px solid red;
}
#nav ul li {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; 
	PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 4px; 
	WIDTH: 121px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;
	display: inline;
}
#nav ul li img {
	DISPLAY: block
}
</style>

<meta content="MSHTML 6.00.2800.1314" name="GENERATOR" /></head>
<body>
<div id="wrapper">
<div id="boxtop"><span></span></div>
<div id="content">



<div id="header"><img src="Antigua &amp; Barbuda_files/logo.gif" /> 
<div id="nav">
<ul>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /> </li>
  <li><img src="Antigua &amp; Barbuda_files/nav_button.gif" /></li></ul>
</div>
</div>



<div style="CLEAR: both"></div>
<div id="body">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur 
condimentum justo ac eros. Praesent aliquet diam in lectus. Phasellus urna est, 
viverra vitae, consequat ac, sodales ut, urna. Cum sociis natoque penatibus et 
magnis dis parturient montes, nascetur ridiculus mus. Donec convallis.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Sed lorem pede, pellentesque at, imperdiet vel, vestibulum a, 
enim. Etiam ut odio euismod massa sodales euismod. Mauris feugiat neque eget 
erat.</p></div></div>
<div id="boxbottom"><span></span></div></div></body></html>
    Code (markup):
     
    babyboy808, Dec 12, 2007 IP
  4. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #4
    I have defined the width of my <ul>. And I just tried adding display:inline but that did not help. Thanks for your input anyways.

    I do have a Doctype. It starts at line 2. Strict.
     
    jordanthegreat, Dec 13, 2007 IP
  5. dextor_from_scriptlance

    dextor_from_scriptlance Peon

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    You need to set margins and padding to 0
     
    dextor_from_scriptlance, Dec 13, 2007 IP
  6. jordanthegreat

    jordanthegreat Active Member

    Messages:
    390
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    58
    #6
    To which element? Because currently both ul and li have margin and padding set to 0 (save for margin left of the li which is 4px but that is intentional. the space in IE6 is much greater than 4px)
     
    jordanthegreat, Dec 13, 2007 IP