Visual problem in IE

A

Aron

New Member
Hello,

I'm new here, but I hope you will be kind enough to help me deal with a problem. I'm working on a site that dosen't show right in IE 8, but it does in google chrome and firefox.

Here is an image that shows the difference:

error1z.png


Here is the html:

<!doctype html public "-//w3c//dtd html 3.2 final//en">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<link href="style.css" media="screen" rel="stylesheet"/>
</head>

<body>
<div id='wrapper'>
<!-- banner -->
<div id='banner'>
<div id='logo'><img src="images/logo.png"/></div>
<div id='coffee'><img src="images/coffee.png"/></div>
<div style="clear:both"></div>

<!-- menu -->
<div id='menu'>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>
</div>
Click to expand...

And here is the CCS:
@charset "UTF-8";
/* CSS Document */

body{
background:url(images/BG.png) top left repeat;
margin:0px;
padding:0px;
font:Verdana, Arial, Helvetica, sans-serif;
text-align:center
}

#wrapper{
width:865px;
background:#FFFFFF;
margin:0px auto;
padding:0px;
font-size:14px;
text-align:left
}

#banner{
background:#c6e549 url(images/header_bg.jpg) top left no-repeat;
width:865px;
height:186px;
}

#logo{
float:left;
clear:none;
margin-left:25px;
margin-top:0px;
}

#coffee{
float:right;
clear:none;
margin-right:3px;
}

#menu{
width:700px;
height:38px;
margin-top:-59px;
margin-left:6px;
}

#menu ul{
list-style:none;
margin:0px;
padding:0px;
}

#menu ul li{
margin-left:1px;
float:left;
display: inline;
}

#menu ul li a{
display:block;
text-decoration:none;
background:url(images/menu.png) top left no-repeat;
width:120px;
height:38px;
font-size:13px;
color:#eae1df;
text-align:center;
cursor:pointer;
padding-top:6px;
}

#menu ul li a:hover{
background:url(images/menu-selected.png) top left no-repeat;
width:120px;
height:38px;
color:#C6E549;
}

#left-content{
float:left;
clear:none;
width:700px;
margin-left:15px;

}
Click to expand...

Could anyone help me, so that menu bar is also correct in IE?

Thanks in advance
 
RyanFromNBI

RyanFromNBI

New Member
Are we to understand that light green bar should not be extending below the dogs feet?

Can you post the entire page and images somewhere that is accessible? Without being able to see the whole thing in context I won't be able to help.
 
J

JMeZigns

New Member
I'm not a css wiz (yet) but I'll take a stab here

Solution 1)

Try taking the "dog" div out of the banner div and use css to position it. My assumption here is that by placing the dog image inside the containing "banner" div you are forcing the div to expand. Placing the "dog" div outside of the "banner" will shrink the "banner" div to its intended height.

Solution 2)

eliminate the background color #c6e549 from "banner" css. Then edit the header_bg.jpg. to reflect the background color you eliminated and size the new image accordingly.

I hope that helps
 
You must log in or register to reply here.
Top