horizontal div of 1 pixel looks different in browsers

[edelwater]

when i do :

div.header
{
	left: 6px;
	width: 975px;
	position: absolute;
	top: 97px;
	height: 1px;
	background-color: #006699;
}

It looks OK in firefox but in IE I see 1) a big bar instead of a line and 2) it is 1 pixel "down" so i see a white line between the content above. Is there any way around this?





--

http://leau.net

 

[edelwater]

I changed it but it still shows a 1 pixel difference at the top for IE:

div.header
{
	height:1px;
	line-height:1px;
	font-size:0px;
	border:0;	
	left: 6px;
	width: 975px;
	position: absolute;
	top: 97px;
	background-color: #006699;
}

--

http://leau.net

 

[traingamer]

Check your margins and padding.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[edelwater]

I added margins and padding and still the same:

div.header
{
	border-right: 0px;
	padding-right: 0px;
	border-top: 0px;
	padding-left: 0px;
	font-size: 0px;
	left: 6px;
	padding-bottom: 0px;
	margin: 0px;
	border-left: 0px;
	width: 975px;
	line-height: 0px;
	padding-top: 0px;
	border-bottom: 0px;
	position: absolute;
	top: 97px;
	height: 1px;
	background-color: #006699;
}

--

http://leau.net

 

[Vragabond]

Retract and think. Why so much coding for a colored line? Is there a better way to do this?

 

[edelwater]

I dont know if there is a better way, an pixel image would probably also suffer from the 1 pixel movement on screen. (see leau.net for the 1 pixel difference between the menu and the lined under it on IE and Firefox).

However, when i would take a step back, go do a complete liquid redesign it would probably dissapear, i could e.g. hide a top div with a div that overlaps it so that it seems there is a line on screen like e.g. on

http://pro.html.it/esempio/nifty/nifty8js.html

.

But ... i would still like to know if there was a reason i have this 1 pixel difference in this scenario.




--

http://leau.net

 

[traingamer]

A full & valid doctype may or may not make a difference in IE.

 

[Vragabond]

Personally, I would draw a line using border-bottom of the container holding the tabs.

 

[BillyRayPreachersSon]

As traingamer says, your DOCTYPE is not valid. You should fix this before attempting to fix any layout issues.

Having an incorrect DOCTYPE is much the same as having no DOCTYPE at all, so if you don't fix it, you may as well remove it.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]