Forum Moderators: not2easy
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;
}
<!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
Thank you, though.
Katrin
The problem you are seeing is related to the way IE is (mis)handling the
height:50px;#brandingoverflow:hidden;#branding
Thank you so much!
Katrin
