| Design renders right in FF, yet not in IE
and I can't find the solution to work around this issue |
KatrinR
msg:3344256 | 10:54 pm on May 19, 2007 (gmt 0) |
<!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
|
Marshall
msg:3344280 | 12:05 am on May 20, 2007 (gmt 0) |
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.
|
KatrinR
msg:3344300 | 1:17 am on May 20, 2007 (gmt 0) |
No, this wasn't the solution. Thank you, though.
Katrin
|
encyclo
msg:3344307 | 1:31 am on May 20, 2007 (gmt 0) |
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.
|
KatrinR
msg:3344411 | 4:52 am on May 20, 2007 (gmt 0) |
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
|
|
|
