Welcome to WebmasterWorld Guest from 54.224.50.28

Forum Moderators: not2easy

Message Too Old, No Replies

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)

New User

10+ Year Member

joined:May 19, 2007
posts:40
votes: 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

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

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts: 2229
votes: 38


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)

New User

10+ Year Member

joined:May 19, 2007
posts:40
votes: 0


No, this wasn't the solution.

Thank you, though.
Katrin

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

Senior Member from CA 

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

joined:Aug 31, 2003
posts:9074
votes: 6


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)

New User

10+ Year Member

joined:May 19, 2007
posts:40
votes: 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

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members