Can anyone tell me what in the HECK is wrong with this code?

seanoneil72
avatar
rank Regular

Regular


Posts: 37
Joined: 2008-01-23

Posted: Sat, 2008-05-17 12:18

I have a page that is suddenly broken, so I stripped it down to a basic few elements.. just enough to display the problem.

Here is the short of it:

I have a graphic top bar and on it sits an unordered list of some links. Directly below that is the nav footer with more links.

Problem is when I preview in a browser, IE 7 shows half of the top links are cut off.. the words are literally cut in half on the horizontal axis, and there is no hotspot on the missing areas of text either.

In FF, if I have anything below the top nav list, it pushes it down by roughly the same number of pixels as are being cut away from my top nav links in an IE7 preview.. at least it DID that when I had other elements besides the nav footer directly below the nav header.. now it seems to not mind so much.

Can anyone give this code a quick look and tell me why th hecck this is happening? I have tried all of the obvious margin, padding, etc. And it was cutting off the links when I had several more elements on the page.. I just deleted them to see if I could trace the problem.

Thank you!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<%@ Page language="C#" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Optimizer Inc. Advanced Tools For Online Business</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/gradient-background.jpg);
background-repeat: repeat-x;
}
#container {
width: 786px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#Top {
width: 786px;
height: 160px;
background-image: url(images/Top.jpg);
}
#topline-blue {
background-color: #010E5D;
height: 12px;
}
#Top-nav {
height: 43px;
width: 786px;
background-image: url(images/Top-Nav.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
text-align: center;
margin: 0px;
padding: 0px;
}
#Top-nav li {
display: inline;
margin-right: 19px;
margin-left: 19px;
margin-top: 0px;
padding: 0px;
margin-bottom: 0px;
}
    #Top-nav ul {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
padding-top: 11px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: -11px;
    }
#nav-footer {
height: 49px;
width: 786px;
background-image: url(images/nav-footer.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
color: #FFFFFF;
text-align: center;
margin: 0px;
padding: 0px;
clear: right;
float: left;
}
#nav-footer ul {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 15px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav-footer li {
display: inline;
margin-right: 19px;
margin-left: 19px;
}
#bottom-index {
height: 90px;
width: 786px;
background-image: url(../Images/bottom-index.jpg);
margin: 0px;
float: left;
background-repeat: no-repeat;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: center;
display: inline;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
color: #FFFFFF;
}
#bottom-index ul {
display: inline;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
}
#bottom-index li {
display: inline;
margin-right: 20px;
margin-left: 20px;
padding: 0px;
}
#weblinkhome {
margin-top: 94px;
margin-left: 30px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
}
.style9 {color: #000000}
.style10 {
color: #FFFFFF
}
-->
</style>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>

<body>
<div id="topline-blue"></div>
<div id="container">
  <div id="Top"><a href="index.html"><img src="images/webophomebutton.jpg" alt="web" width="327" height="49" id="weblinkhome" longdesc="http://www.web.com" /></a></div>
  <div id="Top-nav"><ul>
      <li> <a href="index.html" class="style9">Home </a></li>
      <li><a href="products.html" class="style9">Products</a></li>
      <li><a href="company-info.html" class="style9">Company Info</a></li>
      <li><a href="contact-us.html" class="style9">Contact Us</a></li>
      <li class="style9"><a href="www.web.com" class="style9">Buy</a></li>
      <li><a href="free-trial.html" class="style9">Free Trial</a></li>
      <li><a href="demo.html" class="style9">Demo</a> </li>
  </ul>
  </div>
  <div id="nav-footer">
    <ul>
      <li><a href="index.html" class="style10">Home </a></li>
      <li><a href="products.html" class="style10">Products</a></li>
      <li><a href="company-info.html" class="style10">Company Info</a></li>
      <li><a href="contact-us.html" class="style10">Contact Us</a></li>
      <li><a href="buynow.html" class="style10">Buy</a></li>
      <li><a href="free-trial.html" class="style10">Free Trial</a></li>
      <li><a href="demo.html" class="style10">Demo</a> </li>
  </ul>
  </div>
  <div id="bottom-index">
    <ul>
  <li><a href="terms-and-conditions.html" class="style10">Terms and conditions</a></li>
  <li><a href="privacy-policy.html" class="style10">Privacy policy</a></li>
  </ul>
  </div>
</div>
</body>
</html>