PDA

Click to See Complete Forum and Search --> : Simple CSS problem

Hooded_Villian
08-13-2008, 02:10 PM
I have a simple problem and I dont know how to fix it and its doing my head inb:mad:

I have a site I am working on. Try picture it... It has a header than spans the top width and a nav bar that is just below that also spans the whole width.

Then there are 3 columns. Left, Middle and right.

My TINY problem is this... In Internet Explorer, below the #mainHead, there is a black bottom border, BUT, there is also a small GREY "gap" before you get the NavBar. In Mozzila FireFox, there is just a double up if the black borders. A top and Bottom.

Below is the CSS and after that is my HTML...

/* BODY */

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
}

a:link{
color: #FF6600;
text-decoration: none;
}

a:visited{
color: #FF6600;
text-decoration: none;
}


a:hover{
color: #000000;
text-decoration: underline;
}



/* MAIN HEADER */

#mainHead {
border-bottom: 1px solid #000000;
width: 100%;
background-image: url(images/header_pics/header_logo_back.gif);
background-repeat: repeat-x;
}



/* MAIN NAVIGATION */

#mainNav {
border-bottom: 1px solid #000000;
color: #000000;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 10px;
background-color: #666666;
height: 25px;
}

#mainNav a {

font-size: 12px;
padding: 0 4px 0 0;
}


#mainNav a:hover {
color: #FFFFFF;
}



<body>

<div id="mainHead">

<!-- HEADER GRAPHIC -->

<img src="../../images/header_pics/header_logo.gif" />


</div>



<!-- MAIN NAV BAR -->

<div id="mainNav">

<a href="#">Home</a>&nbsp;|&nbsp;
<a href="#">About Me</a>&nbsp;|&nbsp;
<a href="#">Training</a>&nbsp;|&nbsp;
<a href="#">Nutrition</a>&nbsp;|&nbsp;
<a href="#">Tips</a>&nbsp;|&nbsp;
<a href="#">Blog</a>&nbsp;|&nbsp;
<a href="#">Contact Me</a>
</div>

I know its just that simple and there something I am not seeing... Pls elp!!!
Hooded_Villian
08-13-2008, 02:17 PM
*UPDATE: The problem of the extra border line is solved... but why is there still a GAP btwn the navbar and the Header Graphic? It only happens in I.E.
Declan1991
08-13-2008, 03:24 PM
Set the bottom margin on the header, and set the top margin of the mainNav.
Hooded_Villian
08-13-2008, 04:43 PM
I did that... Set em both to 0 but makes nooo difference.
ray326
08-14-2008, 12:16 AM
div#mainNav img { display:block }
Hooded_Villian
08-14-2008, 01:49 AM
Nope... Still no difference.

*update* I am not too keen on posting the unfinished sites url online, but if it would help, then contact me directly and I could send it to you so you could VIEW SOURCE and see if there is something else I am doing wrong. To be fair, its not a major issue, but I would like to know why it doesn't work cross browser. Looks fine in FirFox but not in I.E.
Hooded_Villian
08-16-2008, 02:15 PM
Does no one know how to rectify this cross browser problem?