Does anyone know why the nav list im using on the left has more left and bottom padding than it should?

in dreamweaver and Firefox it appears how i'd like it, but as usual IE likes to be awkward.

heres a link to the page:
http://inspindesign.zidev.com/test/work.php?id=2

and heres my CSS code:

body {
font:11px Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-image:url(../Images/bg_square2.gif);
text-align:center;
margin:0;
}

h1 {
font-size:130%;
font-weight:900;
border-bottom:1px solid #323232;
border-left:1px solid #323232;
padding-left:3px;
padding-bottom:3px;
}

h2 {
font-size:115%;
}

.title {
font-size:14px;
font-weight:900;
}

#container {
text-align:left;
margin:0 auto;
width:720px;
background:#171717 url(../Images/banner.gif) no-repeat 50% 0%;
padding-top:120px;
border:solid #323232;
border-width:3px 4px 4px 3px;
margin-bottom:3px;
}

#quals {
width:100%;
background:url(../Images/architecture4.gif) no-repeat 100% 100%;
margin:0;
padding:0;
}

#quals p {
width:560px;
margin:0;
padding-bottom:5px;
}

#work_nav {
width:150px;
display:inline;
float:left;
margin:0;
padding:0;
}

#work_info {
width:550px;
display:inline;
float:left;
margin:0 0 5px 0;
padding:2px;
border:1px solid #323232;
}

#work_pic {
width:300px;
display:inline;
float:left;
margin-left:4px;
}

#work_pic_nav {
width:100%;
text-align:right;
}

#work_pic_nav img {
margin-left:3px;
}

#work_details {
width:230px;
border-left:1px solid #323232;
border-bottom:1px solid #323232;
display:inline;
float:right;
padding:2px;
margin:0;
}

#work_details .title, #work_details ul.list {
margin:0;
display:block;
padding:0 0 4px 0;
border-bottom:1px solid #323232;
}

#work_details .title {
background-color:#323232;
border-bottom:1px solid #323232;
}

#work_details p {
display:block;
margin:1px 0 0 0;
}

div.left1 {
width:350px;
float:left;
display:inline;
margin-left:5px;
}

div.right1 {
text-align:right;
width:300px;
float:right;
display:inline;
margin:0 0 0 10px;
}

div.ralign {
text-align:right;
width:370px;
float:left;
display:inline;
}

div.nav {
width:720px;
}

div.nav img {
border-top:3px solid #323232;
border-bottom:3px solid #323232;
}

#content {
width:715px;
margin:0 0 0 5px;;
padding:4px 0 0 0;
}

#deco_line {
display:inline;
width:100%;
float:left;
background:url(../Images/deco_line.gif) no-repeat 0 100%;
}

#footer {
width:720px;
text-align:center;
font-weight:bolder;
font-stretch:extra-condensed;
background-color:#323232;
padding:2px 0;
clear:left;
margin:0;
}

a {
color:#FFF;
}

a:hover {
color:#D60000;
}

div.news {
width:346px;
height:150px;
overflow:auto;
border:solid #171717;
border-width:1px 0px 0px 1px;
display:block;
margin-bottom:10px;
margin-left:0;
}

div.news_h, div.news_m {
width:308px;
background-color:#323232;
padding-left:15px;
border-bottom-color: #171717;
border-bottom-style: solid;
}

div.news_h {
font-weight:900;
font-size:12px;
height:20px;
background:url(../Images/deco_news.gif) 0 0 no-repeat;
background-color:#323232;
border-width:1px;
padding-top:12px;
}

div.news_m {
background-image:url(../Images/bg_square.gif);
border-width:2px;
padding-top:5px;
padding-bottom:4px;
}

div.info {
border:1px solid #323232;
width:344px;
margin-bottom:4px;
margin-right:4px;
}

#intro {
border:1px solid #323232;
float:right;
display:inline;
margin-right:5px;
background: url(../Images/bg_square.gif);
width:330px;
border-bottom:30px solid #323232;
}

div.info .title {
background-color:#323232;
display:block;
padding-bottom:5px;
}

div.info img {
margin:4px 2px 2px 2px;
}

#intro p {
text-align:right;
width:240px;
padding:0;
margin:0;
margin:0 3px 3px 3px;
display:inline;
float:right;
}

div.info p {
text-align:right;
display:block;
padding:0;
margin:0;
margin:3px;
}

ul#nav {
margin:2px 0 0 0;
padding:0px;
list-style-type:none;
float:right;
border-bottom:80px solid #323232;
}

ul#nav li {
display:inline;
}

ul#nav a {
display:block;
text-decoration:none;
background-color:#323232;
width:70px;
padding:5px 4px;
border-bottom:1px solid #171717;
font-weight:900;
font-stretch:condensed;
text-align:right;
}

ul#nav a:hover {
color:#FFF;
background-color:#D60000;
}

ul#worknav {
margin:0 0 5px 0;
padding:0;
list-style-type:none;
float:left;
display:inline;
}

ul#worknav a {
display:block;
width:100%;
text-decoration:none;
background-color:#323232;
padding:5px 4px;
border-bottom:1px solid #171717;
font-weight:900;
font-stretch:condensed;
}

ul#worknav a:hover {
color:#FFF;
background-color:#D60000;
}

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

ul.list li {
background:url(../Images/bg_li.gif) no-repeat 0 100%;
padding-left:14px;
margin:0;
}

Thanks to anyone who can help!

Try this code: (no display: inline; )

#work_nav {
width:150px;
float:left;
margin:0;
padding:0;
}

The problem is IE's doubled float margin bug.
Any time you have a floated element (right or left) and then you apply MARGIN in the same direction, ie. margin-left on a left-floated element and same for right, IE will DOUBLE the amount of the left margin number.

To fix that, first use conditional comments to target IE6 and below, creating a 2nd CSS file that will contain ONLY 'fixes' for IE. The fix in this case is to add display: inline for those floated elements with same-direction margins.

http://www.positioniseverything.net/...ed-margin.html

why do women always send out subliminal messages to get back at people.

Here is how i did it without using display: inline;. Tested in IE6 IE7 and FF2

HTML CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="file:///C|/MAFFOS/Site/Inspin Design/Templates/default.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<link href="CSS/styles.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>

<body>
<div id="container">
  <div class="nav"><img src="http://inspindesign.zidev.com/test/Images/links_bar.gif" width="720" height="40" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="556,4,679,31" href="#" />
      <area shape="rect" coords="426,4,549,31" href="quals.htm" />
      <area shape="rect" coords="296,4,419,31" href="#" />
      <area shape="rect" coords="165,4,288,31" href="#" />
      <area shape="rect" coords="35,5,158,32" href="index.php" />
      <area shape="rect" coords="35,4,158,31" href="#" />
      <area shape="rect" coords="35,4,158,31" href="#" />
    </map>
  </div>

  <div id="deco_line">
    <div id="content"><!-- InstanceBeginEditable name="Content" -->
      <h1>Portfolio</h1>
      <p>Here is all of my best work so far. To the side of each peice you can see important information for each one, aswell as a description. Click the 'More views' section to see more images of that project. </p>
      <div id="work_nav"><span class="highlightlight">

<ul id="worknav">
<li><a href="work.php?id=1">Apollyon</a></li>
<li><a href="work.php?id=10">Apollyon: Demo</a></li>
<li><a href="work.php?id=9">Jaadoo</a></li>
<li><a href="work.php?id=14">Port Sunlight LTC</a></li>
<li><a href="work.php?id=2">Rollernews wallpaper</a></li>
<li><a href="work.php?id=11">Team Retro II</a></li>
<li><a href="work.php?id=12">Team Retro III</a></li>
<li><a href="work.php?id=13">Terminator poster</a></li>
</ul> </span> </div>

      <div id="work_info">
        <div id="work_pic">
          <div id="work_pic_nav"><strong>More views|</strong><img src="http://inspindesign.zidev.com/test/Images/view.gif" width="35" height="5" /><img src="Images/view.gif" width="35" height="5" /><img src="Images/view.gif" width="35" height="5" /><img src="Images/view.gif" width="35" height="5" /></div>
          <p>

<img src="http://inspindesign.zidev.com/test/Images/workpics/7.jpg" />
        </div>
        <div id="work_details">

          <ul class="list">
            <li>Rollernews wallpaper</li>
            <li>12/2006</li>
            <li>Graphic</li>
            <li><a href="http://www.flickr.com/photos/koubis/sets/72157594407993035/detail/" target="_blank">http://www.flickr.com/photo...</a></li>
          </ul>

          <p>
            My entry for the Rollernews [an aggressive skate website] wallpaper competition.<p>I made it in Photoshop and used some chalk on paper to acheive the grungy pattern on it. I like the contrast between this and the clean patterns on the right.          </p>
        </div>
      </div>
    <!-- InstanceEndEditable --></div>
  </div>
  <div id="footer">Inspin Design&copy;</div>

</div>
</body>
<!-- InstanceEnd --></html>

CSS CODE:

body {
font:11px Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-image:url(../Images/bg_square2.gif);
text-align:center;
margin:0;
}

h1 {
font-size:130%;
font-weight:900;
border-bottom:1px solid #9F0000;
border-left:1px solid #9F0000;
padding-left:3px;
padding-bottom:3px;
}

h2 {
font-size:115%;
}

.title {
font-size:14px;
font-weight:900;
}

#container {
text-align:left;
margin:0 auto;
width:720px;
background:#171717 url(../Images/banner.gif) no-repeat 50% 0%;
padding-top:120px;
border:solid #323232;
border-width:3px 4px 4px 3px;
margin-bottom:3px;
}

#quals {
width:100%;
background:url(../Images/architecture4.gif) no-repeat 100% 100%;
margin:0;
padding:0;
}

#quals p {
width:560px;
margin:0;
padding-bottom:5px;
}

#work_nav {
width:150px;
float:left;
margin:0;
padding:0;
}

#work_info {
width:550px;
display:inline;
float:left;
margin:0 0 5px 0;
padding:2px;
border:1px solid #323232;
}

#work_pic {
width:300px;
display:inline;
float:left;
margin-left:4px;
}

#work_pic_nav {
width:100%;
text-align:right;
}

#work_pic_nav img {
margin-left:3px;
}

#work_details {
width:230px;
border-left:1px solid #323232;
border-bottom:1px solid #323232;
display:inline;
float:right;
padding:2px;
margin:0;
}

#work_details .title, #work_details ul.list {
margin:0;
display:block;
padding:0 0 4px 0;
border-bottom:1px solid #323232;
}

#work_details .title {
background-color:#323232;
border-bottom:1px solid #323232;
}

#work_details p {
display:block;
margin:1px 0 0 0;
}

div.left1 {
width:350px;
float:left;
display:inline;
margin-left:5px;
}

div.right1 {
text-align:right;
width:300px;
float:right;
display:inline;
margin:0 0 0 10px;
}

div.ralign {
text-align:right;
width:370px;
float:left;
display:inline;
}

div.nav {
width:720px;
}

div.nav img {
border-top:3px solid #323232;
border-bottom:3px solid #323232;
}

#content {
width:715px;
margin:0 0 0 5px;;
padding:4px 0 0 0;
}

#deco_line {
display:inline;
width:100%;
float:left;
background:url(../Images/deco_line.gif) no-repeat 0 100%;
}

#footer {
width:720px;
text-align:center;
font-weight:bolder;
font-stretch:extra-condensed;
background-color:#323232;
padding:2px 0;
clear:left;
margin:0;
}

a {
color:#FFF;
}

a:hover {
color:#D60000;
}

div.news {
width:346px;
height:150px;
overflow:auto;
border:solid #171717;
border-width:1px 0px 0px 1px;
display:block;
margin-bottom:10px;
margin-left:0;
}

div.news_h, div.news_m {
width:308px;
background-color:#323232;
padding-left:15px;
border-bottom-color: #171717;
border-bottom-style: solid;
}

div.news_h {
font-weight:900;
font-size:12px;
height:20px;
background:url(../Images/deco_news.gif) 0 0 no-repeat;
background-color:#323232;
border-width:1px;
padding-top:12px;
}

div.news_m {
background-image:url(../Images/bg_square.gif);
border-width:2px;
padding-top:5px;
padding-bottom:4px;
}

div.info {
border:1px solid #323232;
width:344px;
margin-bottom:4px;
margin-right:4px;
}

#intro {
border:1px solid #323232;
float:right;
display:inline;
margin-right:5px;
background: url(../Images/bg_square.gif);
width:330px;
border-bottom:30px solid #323232;
}

div.info .title {
background-color:#323232;
display:block;
padding-bottom:5px;
}

div.info img {
margin:4px 2px 2px 2px;
}

#intro p {
text-align:right;
width:240px;
padding:0;
margin:0;
margin:0 3px 3px 3px;
display:inline;
float:right;
}

div.info p {
text-align:right;
display:block;
padding:0;
margin:0;
margin:3px;
}

ul#nav {
margin:2px 0 0 0;
padding:0px;
list-style-type:none;
float:right;
border-bottom:80px solid #323232;
}

ul#nav li {
display:inline;
}

ul#nav a {
display:block;
text-decoration:none;
background-color:#323232;
width:70px;
padding:5px 4px;
border-bottom:1px solid #171717;
font-weight:900;
font-stretch:condensed;
text-align:right;
}

ul#nav a:hover {
color:#FFF;
background-color:#9F0000;
}

ul#worknav {
margin: 0;
padding: 0 5px;
list-style-type:none;
float:left;
}
#worknav li {
width: 130px;
}
ul#worknav a {
display:block;
width:100%;
text-decoration:none;
background-color:#323232;
padding:5px 4px;
border-bottom:1px solid #171717;
font-weight:900;
font-stretch:condensed;
}

ul#worknav a:hover {
color:#FFF;
background-color:#9F0000;
}

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

ul.list li {
background:url(../Images/bg_li.gif) no-repeat 0 100%;
padding-left:14px;
margin:0;
}

Thanks both of you!

I did read about the double float margin bug in the CSS book ive been reading, only I totally forgot about it.

hmmmmmm now Im a little confused.

I already had the floated elements set to
display:inline;

Also taketherisk, what exactly did you do to get it to work? did you just remove the display setting? as Ive tried that aswell and still cant get it to work.

why do women always send out subliminal messages to get back at people

No one is trying to 'get back' at you.

Now that I'm fully awake (it was late last night), and looked more deeply, I see that the extra padding is on the LI inside #worknav, and not the result of doubled float margin.

hmmmmmm ive tried adding this to my stylesheet:

ul#worknav li {
padding:0;
margin:0;
}

But it still doesnt seem to work. was that what you meant?

KkillgasmM,

Just copy the style sheet i gave you. Its the whole thing. Also your HTML had some mistakes which i fixed for you. ie. <li><a>link</li></a>.
Here are the CSS parts changed:

OLD CSS CODE:

 
#work_nav {
width:150px;
display:inline;
float:left;
margin:0;
padding:0;
}

ul#worknav {
margin:0 0 5px 0;
padding:0;
list-style-type:none;
float:left;
display:inline;
}

NEW CSS CODE:

#work_nav {
width:150px;
float:left;
margin:0;
padding:0;
}
ul#worknav {
margin: 0;
padding: 0 5px;
list-style-type:none;
float:left;
}

And ADDED:

#worknav li {
width: 130px;
}

No one is trying to 'get back' at you.

Well you made display: inline; bold. As if to say i don't know what i'm talking about. There are just nicer ways to say that. Please be straight up and say like, "actually Taketherisk, i think display: inline; will make it work... because....". I'll put it down to you being up late. I do think we got off on the wrong foot, and just so you know, i don't have anything against you.

Ahhh at last it works!

Cheers for that. I didn't expect something like that to work though, I thought that removing the display:inline; from #work_nav would cause #work_info to move onto the next line?

Dont all elements have to be set as display:inline if you want them to appear on the same line? obviously not!

Dont all elements have to be set as display:inline if you want them to appear on the same line?

Not necessarily since most elements have a default of inline, block or none.

TaketheRisk - just for the record, I bolded 'display: inline' so that it would not be missed, not to say 'you're wrong'. I have nothing against you either . When you get to be as old as me, trying to think straight on stuff like this after 10PM doesn't always work out well.. LOL.

TaketheRisk - just for the record, I bolded 'display: inline' so that it would not be missed, not to say 'you're wrong'. I have nothing against you either .

Great! Now i wont see bold text as something different