Help, border making nav go weird....

Samuel235 · 03-27-2011, 12:13 PM

Hey guys, i have a nav that has a 1px solid border on while developing so i can trouble shoot easier if anything goes wrong, however when i remove this border the nav drops by around 50pixels, i have images of this... dont know how to upload on here, does anyone have skype or anything to speak to help me solve this problem out? Thanks guys, ive attached the code below....

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">
<head>
 <title>BigLampPhotography.co.uk</title>
 <link rel="stylesheet" type="text/css" href="main.css" />
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
 <div id="Navcontainer">
 <div id="Nav">
<ul>
<li><a href="#"><img src="images/navhome.png" alt=""/></a></li>
<li><a href="#"><img src="images/navportraits.png" alt=""/></a></li>
<li><a href="#"><img src="images/navgallery.png" alt=""/></a></li>
<li><a href="#"><img src="images/navcrazy.png" alt=""/></a></li>
<li><a href="#"><img src="images/navcontactus.png" alt=""/></a></li>
<li><a href="#"><img src="images/navsales.png" alt=""/></a></li>
</ul>
 </div><!-- end of #Nav -->
 </div><!-- end of #Navcontainer -->

CSS

Code:

* {
 margin:0;
 padding:0;
}

img {
border:none;
}

body {
}

ul{
list-style-type:none;
font-size: 0px;
}

/***** NAVBAR STYLES *****/

#Navcontainer{
background-image: url("images/navbg.png");
background-repeat: repeat-x;
height: 69px;
text-align:center;
vertical-align: middle;
border: 1px solid red;
}

#Nav {
width: 902px;
margin: 29px auto;
text-align: center;
}

#Nav ul {
list-style-type: none;
}

#Nav li {
display:inline;
margin-right: 40px;
}

abduraooft · 03-27-2011, 03:31 PM

It's due to collapsing margins. Either set overflow:auto/hidden to #Navcontainer or change margin-top from #Nav and set padding-top to #Navcontainer.

PS: Got some divitis?

Samuel235 · 03-27-2011, 03:42 PM

Quote:

PS: Got some divitis?

I think i may have....I just love using them!

Thanks for the help, it worked great!

oVTech · 03-27-2011, 03:43 PM

Maybe this will help you:

Code:

<html>
<head>
<style type="text/css">
body {
  background-color:#d0e4fe;
  margin:0;
  padding:0;
}
ul{ border: 1px solid green;
  list-style-type: none;
  margin: 0;
  padding: 0;
}


#Nav { border: 1px solid red;
  width: 902px;
  height: 64px;
  margin: 0 auto;
  background-color:#c0d4dc;
}
#Nav ul {
  font-size: 22px;
  margin: 4px;
  padding: 14px;
}
#Nav li {border: 1px solid yellow;
  display:inline;
  margin: 12px;
  padding: 2px;
}
</style>
</head>

<body>


<div id="Nav">
<ul>
<li><a href="#"><img src="images/navhome.png" alt=""/>one</a></li>
<li><a href="#"><img src="images/navportraits.png" alt=""/>two</a></li>
<li><a href="#"><img src="images/navgallery.png" alt=""/>three</a></li>
<li><a href="#"><img src="images/navcrazy.png" alt=""/>four</a></li>
<li><a href="#"><img src="images/navcontactus.png" alt=""/>five</a></li>
<li><a href="#"><img src="images/navsales.png" alt=""/>six</a></li>
</ul>
</div><!-- end of #Nav -->

<p>This is a paragraph.</p>
</body>
</html>