Styling problems in IE [Archive] - Dynamic Drive Forums

corbo950

01-02-2011, 08:51 AM

So, I am redesigning a site and at the moment I'm redoing the styles. I have the site looking basically how I want it to in every browser except for .... one guess..... IE of course! I have two big issues.

The first being that in every web browser the "inner_wrap" div covers the background image all the way to the top and bottom where as in IE the edges of the BG image can be seen.

The second is that my "content_holder" div which holds the pages content has a "min-height" property which doesn't seem to being processed by IE

Any help would be greatly appreciated. If you want me to post any of the rest of the code just let me know but I think what is below is everything that might be relevant

http://www.ourosstudio.com/ourostest/

P.S. I know the images need to be optimized and the business logic is bad they are both on my list just trying to get the styling perfect before I move on to that

<?php

if(isset($_GET["page"]))
{
$page = $_GET["page"];
}
else
{
$page = "about";
}

$page_url = "pages/" . $page . "/" . $page . ".php";

?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ouros Art</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="CSS/theme.css" rel="stylesheet" type="text/css">
<link href="CSS/menu.css" rel="stylesheet" type="text/css">
<link href="CSS/pages.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="outer_wrap">
<div id="inner_wrap">
<div>
<img src="img/BANNER.gif" width="800" height="230" alt="Error: Image could not be loaded">
</div>
<table>
<tr>
<td id="menu_holder">
<ul id="menu">
<li>
<a href="index.php?page=about" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/AboutIcon.gif"
onMouseOver="this.src='menu/img/About.gif'"
onMouseOut="this.src='menu/img/AboutIcon.gif'"
alt="About">
</a>
</li>
<li>
<a href="index.php?page=journal" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/JournalIcon.gif"
onMouseOver="this.src='menu/img/Journal.gif'"
onMouseOut="this.src='menu/img/JournalIcon.gif'"
alt="Journal">
</a>
</li>
<li>
<a href="index.php?page=fine_art" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/FineArtIcon.gif"
onMouseOver="this.src='menu/img/FineArt.gif'"
onMouseOut="this.src='menu/img/FineArtIcon.gif'"
alt="Fine Art">
</a>
</li>
<li>
<a href="index.php?page=illustration" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/IllustrationIcon.gif"
onMouseOver="this.src='menu/img/Illustration.gif'"
onMouseOut="this.src='menu/img/IllustrationIcon.gif'"
alt="Illustration">
</a>
</li>
<li>
<a href="index.php?page=writing" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/WritingIcon.gif"
onMouseOver="this.src='menu/img/Writing.gif'"
onMouseOut="this.src='menu/img/WritingIcon.gif'"
alt="Writing">
</a>
</li>
<li>
<a href="index.php?page=contact" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/ContactIcon.gif"
onMouseOver="this.src='menu/img/Contact.gif'"
onMouseOut="this.src='menu/img/ContactIcon.gif'"
alt="Contact">
</a>
</li>
<li>
<a href="index.php?page=purchase" target="_top" class="menu_anchor">
<img class="menu_img"
src="img/menu/PurchaseIcon.gif"
onMouseOver="this.src='menu/img/Purchase.gif'"
onMouseOut="this.src='menu/img/PurchaseIcon.gif'"
alt="Purchase">
</a>
</li>
</ul>
</td>
</tr>
</table>
<div id="content_holder">
<?php
include($page_url);
?>
</div>
</div>
</div>
<table id="footer">
<tr>
<td id="copyright">Copyright 2010 D.C Wilson</td>
<td id="credit">Hosted by: <a href="http://www.openswimsoftware.com" target="new">OpenSwimSoftware</a></td>
</tr>
</table>
</body>
</html>

/* CSS Document */
body{
background: #000000;
border-top:10px solid #000000;
border-bottom:10px solid #000000;
}

#outer_wrap{
width:100%;
background-image:url("../img/Background.gif");
background-repeat:no-repeat;
text-align:center;
}

#inner_wrap{
width:850px;
text-align:center;
margin:10px auto;
background-color:#000000;
}

#header_img_holder{
text-align:center;
}

#menu_holder{
width:100%;
text-align:center;
padding-top:15px;
}

#content_holder{
background-color:#1A1A1A;
padding-top:10px;
margin: 15px;
min-height:450px;
}

#footer{
padding-top:10px;
width:100%;
}

#copyright{
color:#8B8B8B;
text-align:left;
padding-left:60px;
}

#credit{
color:#8B8B8B;
text-align:right;
padding-right:60px;
}

vwphillips

01-02-2011, 12:46 PM

body{
background: #000000;
border-top:10px solid #000000;
border-bottom:10px solid #000000;
margin:0px;
}

helps the left magin

corbo950

01-02-2011, 05:26 PM

Thanks but that margin is supposed to be there. The way it looks in Safari 5 is exactly how it is supposed to look. My problem is at the top and bottom.

vwphillips

01-03-2011, 01:19 PM

...
<script type="text/javascript">

</script>

</head>

<body>
<div id="outer_wrap" style="position:relative;top:-10px;">
...

corbo950

01-03-2011, 04:56 PM

Thanks.... no dice on the background image.... I'm going to try the JS in a bit.... are you sure thats what I need to do? I'm not trying to criticize... just was sure I must have had something wrong in my CSS... Or does IE just still not read min-height correctly?

corbo950

01-03-2011, 06:00 PM

I got the background image fixed

VijayKanta

01-04-2011, 05:44 AM

To fix minimum height of DIV in IE6 and sometimes IE7 use the following property.

#div {
overflow: hidden;
height: 10px; /* or something appropriate */
}

corbo950

01-05-2011, 07:19 PM

The min-height problem is all the way to IE9... I submitted a bug report of 9 and it sounds like IE doesn't properly parse the new "DocType" for HTML5 and so it is trying to display the page in legacy format(like IE6 would).... I am just about to try switching the doc type back to XHTML and see if that works.....I will post more as I hear more from Microsoft.... Thanks for all your help so far!