Styling problems in IE

**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

HTML Code:

<?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>

Code:

/* 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

Code:

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

Code:

...
<script type="text/javascript">
<!--
function Init(){
 var obj=document.getElementById('inner_wrap');
 obj.style.height=Math.max(obj.offsetHeight,450)+'px';
}

if (window.addEventListener){
 window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
 window.attachEvent('onload',Init);
}


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

Code:

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

Thread: Styling problems in IE

Thread Tools

Search Thread

Styling problems in IE

Bookmarks

Bookmarks

Posting Permissions