Jump to content

horizontal gray line below header in IE only

jim9

By jim9
in CSS

Recommended Posts

jim9 Newbie

jim9

Posted
Posted

Hi every one,While I was writing code for a sample page, I have noticed a horizontal line appears below the page header only when I check the page with IE6. It does not appear in the other browsers.screenshotrno.pngscreenshot1ao.pngCSS

/************************************************************//*						 generic						  *//************************************************************/Body{margin:0;padding:0;text-align:center;font-size:14px;font-family:Arial, Helvetica, sans-serif;color:#222222;background-color:#999999;}#wrapper{width:970px;margin-left:auto;margin-right:auto;margin-top:8px;margin-bottom:5px;padding:0;border:5px solid #ccc;text-align:left;}.clear{clear:both;}/************************************************************//*						 header						   *//************************************************************/#header, #header a, #header img{margin:0;padding:0;border:0 solid red;width:970px;height:135px;}/************************************************************//*						 top menu						 *//************************************************************/#top_menu{ width:970px;height:35px;margin:0;padding:0;border:0px solid red; background-color:#444;line-height:35px;text-align:center;}#nav{height:35px;margin:0 0 0 30px;padding:0;border:0px solid red;list-style:none;}#nav li{position:relative;width:150px; background-color:#444;margin:0;padding:0;border:0px solid red;float:left; z-index:10;}#nav a:link, #nav a:visited, #nav a:active{display:block;background-color:#444;margin:0;padding:0 10px;border-right:1px solid #222;border-bottom:1px solid #222;border-top:1px solid #666;border-left:1px solid #666;color:#fff;text-decoration:none;width:128px;line-height:33px;font-weight:700;}#nav a:hover{background-color:#000;}#nav ul{position:absolute;left:0;margin:0;padding:0;border:0px solid red;list-style:none;}#nav ul li{position:relative;width:150px; background-color:#444;margin:0;padding:0;border:0px solid red;float:left;z-index:10;}#nav ul a:link, #nav ul a:visited, #nav ul a:active{display:block;background-color:#444; margin:0;padding:0 10px;border-right:1px solid #222; border-bottom:1px solid #222;border-top:1px solid #666; border-left:1px solid #666;color:#fff;text-decoration:none; width:128px;line-height:33px; font-weight:700;}#nav ul a:hover{background-color:#000;}

**************************************HTML

<!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>Home - Bustan</title>	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />	<meta name="Keywords" content="" />	<meta name="Description" content="" />	<link rel="icon" href="" type="image/png" />	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />	<link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="wrapper"><!-- start of wrapper -->	<div id="header"><!-- start of header -->		<a href="index.html"><img src="img/header.gif" alt="Bustan" /></a>		</div><!-- end of header -->	<div id="top_menu"><!-- start of top menu -->		<ul id="nav">			<li><a href="">Item</a></li>			<li><a href="">Item</a>				<ul>					<li><a href="">Sub Item1</a></li>					<li><a href="">Sub Item2</a></li>					<li><a href="">Sub Item3</a></li>					<li><a href="">Sub Item4</a></li>				</ul>					</li>			<li><a href="">Item</a></li>			<li><a href="">Item</a></li>		</ul>	</div><!-- end of top menu --></div><!-- end of wrapper --></body></html>

Do you know how can I remove it so that it does not appear in any browser? Thanks in advance.

Link to comment
Share on other sites
lastlifelost Member

lastlifelost

Posted
Posted

One possible issue could be transparency. IE6, and sometimes IE7, had trouble rendering transparent pixels in PNGs and GIFs, rendering them instead as 50% grey. Is it possible that the GIF graphic has a single line of transparent pixels at the bottom?You could also try dropping your header's height by 1 or 2px. This may trim off the offending area.

Link to comment
Share on other sites
jim9 Newbie

jim9

Posted
  • Author
Posted

There is no transparent pixels at the bottom of the image. Furthermore I have just changed the header CSS. I have added a red color to the header background. Now the line is red. website address: bustan .co .uk

/************************************************************//*						 header						   *//************************************************************/#header{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border:0px solid red;width:970px; height:135px;background-color:#ff0000;}#header a{margin:0;padding:0;border:0px solid red;width:970px;height:135px;}#header img{margin:0;padding:0;border:0px solid red;width:970px;height:135px;}

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

it is because you have white spaces between each element that is causing this space <div id="header"><!-- start of header --> <a href="index.html"><img src="bgimagetest.png" alt="Bustan" /></a> </div><!-- end of header -->either:<div id="header"><!-- start of header --><a href="index.html"><img src="bgimagetest.png" alt="Bustan" /></a></div><!-- end of header -->or#header a{float:left;}or#header{font-size:0;line-height:0;}will fix it

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...