PDA

View Full Version : CSS IE Height issue


tux
01-09-2008, 08:07 PM
Hi All,

Just started to try my hand at CSS and am rebuilding a website as a kinda tutorial to help me learn. Used W3Schools tuts which I found really good.

I have started to rebuild the structure of the site and have come accross an issue with IE. So far all is well in FF and Opera but in IE the height of one of my divs will not display.

Could anyone put me right as to why my div.left_dtl will not display in IE.

It seems to have colapsed as it will stretch if I add content to it.

Here is my CSS code.....

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

img.logo
{
position:absolute;
top:0px;
right:0px;
}

img.fade
{
position:absolute;
top:0px;
left:430px;
}

div.topblue
{
position:absolute;
top:0px;
left:0px;
height:110px;
width:450px;
z-index:2;
background: #0095D7;
visibility: visible;
}
div.left_dtl
{
position:fixed;
top:0px;
left:0px;
height:100%;
width:147px;
z-index:1;
background-image:
url('Images/left_dtl.gif');
background-repeat: repeat-y;
visibility: visible;
}
img.left_cnr
{
position:absolute;
top:0px;
left:0px;
z-index:3;
}

..... any other advice would be great too. Thanks.

Paul

domedia
01-09-2008, 09:32 PM
Need the HTML code as well Paul :)

tux
01-09-2008, 10:41 PM
Heres the HTML Domedia, thanks.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="layout.css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>

<body>
<div class="topblue" id="topblue" ></div>
<div class="left_dtl" id="left_dtl" >
</div>
<p><img class="logo" id="logo" src="Images/logo.gif" width="400" height="110"></p>
<p><img class="fade" id="fade" src="Images/fade.gif" width="181" height="110"></p>
<p><img class="left_cnr" id="left_cnr" src="Images/left_cnr.gif" width="103" height="110"></p>
</body>
</html>

Cary
01-10-2008, 12:54 AM
Fixed positioning doesn't work in IE 6.

tux
01-10-2008, 06:52 AM
Thanks for that Cary, have changed the fixed element to absolute but the div will still not extend down the page in IE unless I fill it with content. Is there some other issue or will I have to add a transparent gif with height set at 100% to force it.

div.left_dtl
{
position:absolute;
top:0px;
left:0px;
height:100%;
width:147px;
z-index:1;
background-image:
url('Images/left_dtl.gif');
background-repeat: repeat-y;
visibility: visible;
}

domedia
01-10-2008, 01:51 PM
Thanks for that Cary, have changed the fixed element to absolute but the div will still not extend down the page in IE unless I fill it with content. How should the browser know to make the page longer if there is no content there?

tux
01-10-2008, 05:27 PM
The div is only being used for decor, has a repeating bgd image and will have an image at the bottom of the browser window. Both opera and firefox display the div to the bottom of the screen but IE doesnt. I just wondered why and if there is something wrong with my CSS or is it just something we have to put up with in IE.

domedia
01-10-2008, 08:15 PM
bottom padding on your body tag should work.
Any way you can upload this to the web. It's soo much easier to look at with a live example :)

tux
01-10-2008, 10:21 PM
This is the test page http://www.photographybydantucker.com/index_test.php


I'm trying rebuild this site http://www.photographybydantucker.com with CSS.

Thanks

domedia
01-11-2008, 02:02 PM
Looks the same in IE and FF here. When making a website the CSS way, you want to make sure you label images either as content or backgrounds.
This image should be a background, right now it hides the logo on smaller resolutions.
http://www.photographybydantucker.com/Images/fade.gif

tux
01-11-2008, 03:22 PM
Thanks for that Dom, what version of IE are you using. On my version the left div extends to the bottom of the screen but in IE it only comes down to just below the top blue div.

I'll change the fade image to BG as you suggest. Its all a learning curve. I'm learning PHP at the mo as well.

Another point, when I get to it there will be another logo in the bottom left of the screen. How could it be fixed so that it remains in view when a viewer scrolls.

Thanks again, Dom

domedia
01-11-2008, 06:06 PM
I got all versions (I think). If you have a rendering problem in a specific browser, you have to let me know which one :)

Look position: fixed in CSS for you logo to stay put.

Cary
01-12-2008, 07:36 AM
The div is only being used for decor, has a repeating bgd image and will have an image at the bottom of the browser window. Both opera and firefox display the div to the bottom of the screen but IE doesnt. I just wondered why and if there is something wrong with my CSS or is it just something we have to put up with in IE.

You can do this just by using a background image on the body.

Remove this div since you don't need it:

<div class="left_dtl" id="left_dtl" ></div>

This whole section of the CSS won't be needed either:

div.left_dtl
{
position:absolute;
top:0px;
left:0px;
height:100%;
width:147px;
z-index:1;
background-image:
url('Images/left_dtl.gif');
background-repeat: repeat-y;
visibility: visible;
}

Just change the body styling. You have this:

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

You should change it to this:

body {
margin:0; /* same margins on all four sides */
background: url("Images/left_dtl.gif") repeat-y 0 0;
}