PDA

View Full Version : Problem with CSS layout in IE6



kuvik
Apr 21st, 2007, 03:50 PM
My HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>R2b</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body id="body">
<div id="main">
<div id="data_upbox">
<div id="upbox_left">
<div id="upbox_up"></div>
<div id="upbox_down"></div>
</div>
</div>
</div>
</body>

</html>

My CSS code:

html {
height: 100%;
}

#body{
background-image: url(../img/body/bground_1920.gif);
margin: 0;
padding: 0;
text-align: center;
height: 100%;
}

#main {
background-color: White;
width: 1006px;
height: 100%;
margin: 0 auto;
text-align: left;

}

#data_upbox{
background-color: #87CEEB;
width: 996px;
height: 69px;
}

#upbox_left{
width: 610px;
height: 69px;
background-color: #F5DEB3;
float: left;
}

#upbox_up{
height: 59px;
width: 610px;
background-color: #B8860B;

}

#upbox_down{
height: 10px;
width: 610px;
background-color: #FFDAB9;

}

Now my problem: Internet Explorer 6 shows #upbox_down with height 20px and i don't know how to solve it...

Excavator
Apr 21st, 2007, 05:13 PM
Hello kuvik,
I'm probably no help at all since I don't have anything running with IE6 right now. You could try this (note use of code tags so this shows up in a scroll box):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>R2b</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<style type="text/css">
html {
height: 100%;
}
#body{
background-image: url(../img/body/bground_1920.gif);
text-align: center;
height: 100%;
}
* {
margin: 0;
padding: 0;
border: none;
}
#main {
background-color: White;
width: 1006px;
height: 100%;
margin: 0 auto;
text-align: left;
}
#data_upbox {
background-color: #87CEEB;
width: 996px;
height: 69px;
}
#upbox_left {
width: 610px;
height: 69px;
background-color: #F5DEB3;
float: left;
}
#upbox_up {
height: 59px;
width: 610px;
background-color: #B8860B;
}
#upbox_down {
height: 10px;
width: 610px;
background-color: #FFDAB9;
}
</style>
</head>
<body id="body">
<div id="main">
<div id="data_upbox">
<div id="upbox_left">
<div id="upbox_up"></div>
<div id="upbox_down"></div>
</div>
</div>
</div>
</body>
</html>

Code tags are available in the post/reply window by clicking on the #

kuvik
Apr 21st, 2007, 07:44 PM
I shrink my problem later to:

in CSS, "page_title_separator" has 1px height, but IE6 renders it with 19px...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE6Work</title>
<style type="text/css">
.page_title_separator{
width: 996px;
height: 1px;
background-color: Gray;
}
</style>
</head>
<body>
<div class="page_title_separator"></div>
</body>
</html>

koyama
Apr 21st, 2007, 08:20 PM
in CSS, "page_title_separator" has 1px height, but IE6 renders it with 19px...
IE sometimes has difficulties making elements lower in height than the font-size. This is still a problem in IE7.

To prevent that, add overflow: hidden. (credits to felgall for telling me that).

kuvik
Apr 27th, 2007, 04:43 PM
I added * {overflow: hidden} (because that bug shows in a lot of divs), but it caused that i cannot scroll page.:mad:

koyama
Apr 27th, 2007, 05:28 PM
I didn't mean that you should apply overflow: hidden to all elements. Only to .page_title_separator.

Now that I look at your code, it seems as if you are using this to make horizontal rules. I think that there are better approaches. Instead try using borders on the existing elements.