Help with the simplest code ever!

~~Moh~~ · 19-05-2009, 07:37 PM

CSS

HTML Code:

div.header_left_green {
	width: 10px;
	height: 29px;
	background-color: blue;
	float: left;
	position: relative;
}

div.header_mid_green {
	height: 21px;
	background-color: red;
	margin-left: 10px;
	margin-right: 10px;
	position: relative;
	padding-top: 8px;
}

div.header_right_green {
	width: 10px;
	height: 29px;
	background-color: pink;
	float: right;
	position: relative;
}

HTML:

HTML Code:

<div class="header_right_green"></div>
<div class="header_left_green"></div>
<div class="header_mid_green"></div>

Firefox / Chrome:

IE:

I don't understand why IE isn't adding the height & top padding together, and why its adding the gaps on the left & right :S

Decoma · 19-05-2009, 08:54 PM

Do you have this at the top of your script?

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

That should fix it.

~~Moh~~ · 19-05-2009, 08:55 PM

hehe, just released I forgot to add this:

HTML Code:

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

~~Blob~~ · 20-05-2009, 06:17 PM

If you take away the width for padding in firefox, make a note of the original size with a . infront of it (so .width: 250px; or something like that) that will tell IE thats the actual size while firefox ignores it.

Thread: Help with the simplest code ever!

Thread Tools

Help with the simplest code ever!

Posting Permissions