IE mysteriously decides to change.. padding?

**corypark** · 11-21-2008, 05:59 AM

I don't know what's going on here... check out http://intuitechinc.com/jammies/menuTest2.html in IE
and see how the second menu item is shifted down (or the rest are shifted up

)?
Here is the code: you can see there's no difference between them...

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>
   <script type="text/javascript">
  <!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

  // -->
  </script>
<body>
<table class="page" align="center" width="718" border="0">
  <tr>
    <td><table border="1" cellpadding="0" cellspacing="0" class="header">
  <tr>
          <td><div id="inYour">I <span class="selfHelp">d</span></div>
<div id="images"><img src="images/coffee.jpg" width="65" height="80" /><img src="images/calendar.gif" width="65" height="80" /><img src="images/cell.jpg" width="65" height="80" /><img src="images/writing.jpg" width="65" height="80" /><img src="images/traffic.gif" width="65" height="80" /><img src="images/package.jpg" width="65" height="80" /><img src="images/keyboard.jpg" width="65" height="80" /><img src="images/watch.jpg" width="65" height="80" /><img src="images/paperwork.jpg" width="65" height="80" class="norightmargin" />			</div>

	<div style="height:15px;"><ul id="nav"><li id="farLeft"><a href="">Help Resources </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
  				</li>
				<li><a href="">Products &amp; Services</a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
			  </li>
				 <li><a href="">Help Us Help You </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
 				 </li>
 				 <li><a href="">Advertise in IYJ </a>
                  <ul>
                    <li><a href="">thing 1</a></li>
                    <li><a href="">thing 2</a></li>
                    <li><a href="">thing 3</a></li>
                    <li><a href="">thing 4</a></li>
                    <li><a href="">thing 5</a></li>
                  </ul>
                </li></ul></div></td></tr></table>
				<table border="1" cellspacing="0" cellpadding="0" id="content">
  <tr>
          <td>content</td>
  </tr>
</table>
<table border="1" cellpadding="0" cellspacing="0" class="footer">
  <tr>
          <td><div style="height:15px;"><ul id="nav"><li id="farLeft"><a href="">Help Resources </a></li>
				<li><a href="">Products &amp; Services</a></li>
				 <li><a href="">Help Us Help You </a></li>
 				 <li><a href="">Advertise in IYJ </a></li></ul></div></td></tr></table>
<div align="center" class="copyright">Copyright 2008 - All rights reserved.</div>
</td>
  </tr>
</table>
</body>
</html>

and the CSS (sorry, it's not real neat)

Code:

body {
	background-color: #000000;
	padding: 20px;
}
 img, div, ul, li, a{
	padding:0;
	margin:0;
}

.spacer{
	font-size:0;
	line-height:0;
	clear:both;
}
ul {
	list-style-type: none;
	background-color:#009933;
	
}
#nav{
	margin:0;
	padding:0;
}

#nav a {
	font: 13px Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
}

#nav li li a {
	font-weight: normal;
	color: #fff;
	padding: 0.2em 10px;
}

#nav li li a:hover {
	padding: 0.2em 5px;
	background-color: #CC6666;
}

li {
	float: left;
	position: relative;
	width: 161px;
	height: 20px;
	text-align: center;
	cursor: pointer;
	background-color: #996666;
	border: 1px solid #fff;
	border-left: none;
}
li#farLeft {
	border-left: 1px  solid #fff;
	}

li ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #996666;
	font-weight: normal;
	padding: 0.5em 0 1em 0;
	border: solid 1px #fff;
	border-top: none;
}

li>ul {
	top: auto;
	left: auto;
}

li li {
	display: block;
	float: none;
	border: 0;
}

li:hover ul, li.over ul {
	display: block;
}
#mainTbl{
	width:100%;
	text-align:center;
	}
#container {
	width: 700px;
	text-align:center;
	background-color: #fff;
	padding: 15px auto;
	margin:auto;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 700px;
}
.header {
	margin:20px auto 0 auto;
	background-color:#666;
	padding: 0;
	text-align:center;
}
.header #images {
	background:#FFFFFF;
	margin: 15px auto 20px auto;
	width:609px;
	padding:3px;
	overflow:hidden;
	}
#inYour{
	color:#FFF;
	font-family:"Times New Roman", Times, serif;
	font-size:24px;
	margin-top: 20px;
}
.selfHelp{
	color:#9999FF;
}
#images img{
	display:block;
	float:left;
	margin-right:3px;
}
.norightmargin{
	margin-right:0!important;
}
#navTop {
	width:650px;
	margin:0;
	clear:both;
	font-size: 12px;
}
#content {
	width: 653px;
	margin: 1px auto;
}
#content td{
	padding: 10px;
}
.footer {
	margin:auto;
	background-color:#666;
	padding: 0;
	text-align:center;
}
.copyright{
	color: #666;
	font: 13px Arial, Helvetica, sans-serif;
	margin: 15px auto;
	clear:both;
}
hr {
	display: none;
}
.page {
	width: 718px;
	margin: 25px auto;
	text-align: center;
	background-color:#FFFFFF
}

Has anybody seen this before?.... help please?

**Snookerman** · 11-21-2008, 07:47 AM

I see that you're only using one cell in each table, you could do this easily with containers instead. It would improve your site in many ways and might solve your problem. Since you're only using one cell, you just have to replace the table tags with div tags and remove the rest like tbody tr and td. Take a look at this site to see all the benefits of ditching the tables:
http://hotdesign.com/seybold/everything.html

**corypark** · 11-21-2008, 08:41 AM

Thanks for the link... I'm just getting started with full CSS design, but it still does things I don't get and I end up resorting back (less and less though)
This issue however is actually within a suckerfish css dropdown menu which is a styled ul ... so I'm not sure removing the tables would do much... but I'd certainly try it out if it would... would it?

**corypark** · 11-21-2008, 08:44 AM

haha... hey at least I'm not using spacer gifs

Thread: IE mysteriously decides to change.. padding?

Thread Tools

Search Thread

IE mysteriously decides to change.. padding?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions