PDA

View Full Version : Help with the simplest code ever!


Moh
19-05-2009, 07:37 PM
CSS


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:


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

Firefox / Chrome:
http://habbcrazy.net/jack/firefox_yey.gif
IE:
http://habbcrazy.net/jack/ie_boo.gif

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?


<!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:


<!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.

Want to hide these adverts? Register an account for free!