Welcome to WebmasterWorld Guest from 54.163.168.15

Forum Moderators: not2easy

Design renders right in FF, yet not in IE

and I can't find the solution to work around this issue

   
10:54 pm on May 19, 2007 (gmt 0)

5+ Year Member



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Hello!

I am pretty new to using only CSS for the design.
Everything worked in FF and IE - until I added an image (banner6orange.jpg), I wanted to use for a secondary nav. bar (above the main navigation bar).
It works fine with FF, yet IE adds space below the no-repeat background image bannertest.jpg (and the "secondary nav.bar" image)(If I remove the no repeat property, my banner would repeat in that space in IE). And I am not able to fix this with approaching my design via a different doc structure or css properties.
Please advice.

My CSS

* {
margin: 0;
padding: 0;
}
body {font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
background-color:#ffffcc;
text-align: center;
min-width: 760px;
}
ul{margin:0;
padding:0;
list-style:none;
width:720px;
float:left;
background-color:#cc0000;}
ul li{
float:left;}
ul a {display:block;
float:left;
padding:0 2em;
line-height:2.1em;
text-decoration:none;
color:#ffffff;}
ul a:hover {color:#fff;}
li {font-size: 1.4em;}
#wrapper {background-color: #ffcc99;
width: 720px;
margin: 0 auto;
text-align: left; }
#branding {height: 50px;
background: #ccc url(images/bannertest.jpg);
background-repeat: no-repeat;
padding: 20px;}
.orangebox {position:relative;
left:420px;
top:-20px;
}
#content {
width: 420px;
float: left;
}
#rightcontent {
background-color:#ffffcc;
width: 280px;
float: right;

}
#footer {
background-color:#fff;
padding: 1px 20px;
clear: both;
}

#rightcontent{
padding-top: 20px;
padding-bottom: 20px;
}

#rightcontent * {
padding-left: 20px;
padding-right: 20px;
}

#content * {
padding-right: 20px;
padding-left: 20px;
}


xhtml code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AP</title>
<link href="APstyletest.css" rel="stylesheet" type="text/css" />
<style type="text/css" media="all">@import "APstyletest.css";</style>
</head>
<body>
<div id="wrapper">
<div id="branding"><img src="images/banner6orange.jpg" class="orangebox"/></div>
<ul>
<li><a href="#">#*$!#*$!#*$!x</a></li>
<li><a href="#">#*$!#*$!#*$!</a></li>
</ul>
<div id="content">
<h1>Lorem ipsum dolor</h1>

</div>
<div id="rightcontent"></div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Thank you,
Katrin

12:05 am on May 20, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Try removing the "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" from the DOCTYPE declaration. This has caused me problems in the past.
1:17 am on May 20, 2007 (gmt 0)

5+ Year Member



No, this wasn't the solution.

Thank you, though.
Katrin

1:31 am on May 20, 2007 (gmt 0)

WebmasterWorld Senior Member encyclo is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Welcome to WebmasterWorld KatrinR. :) What are the dimensions of the banner6orange.jpg graphic, and does it help if you specify the width and height of the image?

The problem you are seeing is related to the way IE is (mis)handling the

height:50px;
rule on the
#branding
div. You could try adding
overflow:hidden;
to
#branding
to fix the issue.
4:52 am on May 20, 2007 (gmt 0)

5+ Year Member



Yes, it worked!
Adding width and height didn't work, yet the overflow:hidden; made it.
I will certainly find out more about this 'bug'.

Thank you so much!
Katrin

 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month