homepage Welcome to WebmasterWorld Guest from 54.196.197.153
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved