What wrong with this code

filip.beunens

12-08-2007, 05:04 PM

In IE7 & Mozilla FF is everything fine but in IE6 my layout is not right, seems IE6 takes a larger left-margin almost the double and so my #menuspace & #iconspace divs are placed under de #logo div

My HTML

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nieuwe pagina 1</title>
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<body>
<div id="container">

<div id="header">

<div id="logo">
</div>
<div id="menuspace">
</div>
<div id="iconspace">
</div>
</div>
<div id="midframe">
</div>
</div>

</body>

</html>

My CSS

* {
margin: 0px;
padding: 0px;
}

body {
background-image: url(../images/body_back.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FFFFFF;
text-align: center;
}

#container {
height: 600px;
width: 900px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
position: relative;
background-color: #FFFFFF;
}

#header {
height: 154px;
width: 900px;
background-color: #111111;
}

#logo {
height: 123px;
width: 123px;
background-image: url('../images/logo.jpg');
float: left;
margin-left: 17px;
margin-right: 15px;

}

#menuspace {
float: right;
height: 50px;
width: 745px;
background-color: #222222;
}

#iconspace {
float: right;
height: 103px;
width: 743px;
border-top-width: 1px;
border-top-color: #FFFFFF;
border-top-style: solid;
border-right-width: 1px;
border-right-color: #FFFFFF;
border-right-style: solid;
border-left-width: 1px;
border-left-color: #FFFFFF;
border-left-style: solid;
background-color: #333333;

}

#midframe {
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
height: 416px;
width: 898px;
background-color: #555555;
text-align:left;
}

#midframe p{
padding-left:15px;
}

Apostropartheid

12-08-2007, 05:36 PM

You are suffering from the double margin bug.

In IE6, floated elements' margin are doubled in the direction of a float. e.g., if I gave header the properties float: left; and margin: 1em 0 0 10%;, in IE6 its left margin'll be 20%.

To get around this, use a conditional comment. For your instance, they'd work like this:


Also, you are not using a DTD. No doubt someone'll come along to scream at you, soon enough. I must admit, though, that the code will pass validation if you did specify one. If you wish to use quirks mode, as you are now, put <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional"> (not recommended.) If you go the proper, good coding route, use either <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
...
or
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
...
(if you use the latter, find out about the differences between XHTML and HTML.)

filip.beunens

12-08-2007, 05:54 PM

Apostropartheid

12-08-2007, 06:01 PM

Thanks for the quick answer... Cyanlight and thanks for the tip but on my live code I use DTD strict XHTML. :)

I use a single style sheet for screen and another for print but I think I can't use the conditional comment is de style sheet so do I have to to duplicate the style sheet en load the one or the other with the comment ? (I don't really like to do that)

Or is there another way, to have the same conditional syntax ?

That truly makes no sense.

If you're talking about the different medias, the @media rule in your style block will help you.

...
<style type="text/css">
@media screen {
p {
color: blue;
}
}
@media print {
p {
color: green;
}
}
@media handheld {
p {
color: red;
}
}
</style>
...
<p>If you're using a computer screen, this will be the colour blue. Printed, this will be green. On a handheld device, this will be red.</p>
...

Remember the order of cascade (http://www.blooberry.com/indexdot/css/topics/cascade.htm).

rmedek

12-08-2007, 08:26 PM

I use a single style sheet for screen and another for print but I think I can't use the conditional comment is de style sheet so do I have to to duplicate the style sheet en load the one or the other with the comment ?

The styles you load in the order you call them. So if you call your normal screen.css first, you can then—via a conditional comment—call up an IE-only CSS file that only has IE-specific rules that overrides the normal CSS. Make sense?