Forum Moderators: open
IE7, specifically, generates an unwanted space between the header image and the red title bar. In addition, it seems to be adding extra padding above the title text in the red bar (should be 10px top and bottom).
Thank you in advance for any assistance with this!
[edited by: tedster at 11:21 pm (utc) on Sep. 18, 2009]
You're probably going to need to post some of the relevant source code for us to really help. Be sure to let us know what your DTD is.
There are some helpful suggestions in this thread: LINKS and posting CODE [webmasterworld.com]
CSS Code:
#header-container {background:url(/img/shell-corner-top-left-1.gif) no-repeat top left; width:755px;}
#header-logo {float:left; margin:15px 0 0 89px; width:296px;}
#header-photo {float:right; width:280px;}
.header-title-bar {background-color:#a12830; clear:both; color:#fff; font-size:140%; font-weight:bold; letter-spacing:0.1em; padding:10px 0 10px 0; text-align:center;}
.bar-beige {clear:both; height:4px; background-color:#b5a771;}
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><div id="header-container">
<a href="index.php"><img id="header-logo" src="/img/logo-large.gif" alt="Example" /></a>
<div id="header-photo">
<img style="z-index:1; position:absolute; margin-left:265px;" src="/img/shell-corner-top-right-1.png" alt="Layout Graphic" />
<img src="/img/headers/photo.jpg" alt="Example" />
</div>
<div class="header-title-bar">EXAMPLE</div>
<div class="bar-beige"> </div>
</div> <!-- header-container -->
I apologize if I'm breaking more posting rules... It's Friday evening and been a long day of troubleshooting IE. Thanks for your help!
[edited by: incrediBILL at 3:35 am (utc) on Sep. 19, 2009]
[edit reason] removed specifics, see TOS #13 [webmasterworld.com...] [/edit]
CSS Code:
#header-container {background:url(/img/shell-corner-top-left-1.gif) no-repeat top left; width:755px;}
#header-logo {float:left; margin:15px 0 0 89px; width:296px;}
#header-photo {float:right; width:280px;}
.header-title-bar {background-color:#a12830; clear:both; color:#fff; font-size:140%; font-weight:bold; letter-spacing:0.1em; padding:10px 0 10px 0; text-align:center;}
.bar-beige {clear:both; height:4px; background-color:#b5a771;}
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="header-container">
<a href="index.php"><img id="header-logo" src="/img/logo-large.gif" alt="Example" height="70px" width="296px" /></a>
<div id="header-photo">
<img style="z-index:1; position:absolute; margin-left:265px;" src="/img/shell-corner-top-right-1.png" alt="Layout Graphic" height="15px" width="15px" />
<img src="/img/headers/photo.jpg" alt="Example" height="100px" width="280px" />
</div>
<div class="header-title-bar">EXAMPLE</div>
<div class="bar-beige"> </div>
</div> <!-- header-container -->
Here's one clue I just stumbled over but haven't had time to pursue. If you switch to a strict DTD, then all browsers seem to show the extra space.
If you switch to a strict DTD, then all browsers seem to show the extra space.
#header-photo img {
display:block;
}
The beige div: why not replace that superfluous div with a bottom border on the title ?
Similarly: the absolute positioned element has no position information, I'd give it that and give the parent that to which you want to refer to position with position:relative.
Actually looking at it, why not collapse all those header images except the logo into one background image ?
And why use float and margins to position anything in the header (since it's not intended to affect any inline content anyway) when you could just using absolute positioning to put it there and be done with it.
I just gave it a quick spin to show what I meant above:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
background-color: silver;
}
body {
width:755px;
margin: 0 auto;
background-color: white;
}
#banner {
background:url(4.jpg) no-repeat top left;
height: 100px;
position:relative;
}
#banner a img {
position: absolute;
top: 15px;
left: 89px;
width:296px;
height:70px;
border: none;
}
#header-photo {
position: absolute;
top:0;
right:0;
width:280px;
height: 100px;
}
h1 {
background-color:#a12830;
color:#fff;
font-size:1.4em;
font-weight:bold;
letter-spacing:0.1em;
padding:10px 0 10px 0;
text-align:center;
border-bottom: 4px solid #b5a771;
}
#banner div {
position:absolute;
top:0;
right:0;
height:15px;
width:15px;
background-image: url('2.jpg');
z-index:1;
}
</style>
</head>
<body>
<div id="banner">
<a href="/"><img src="1.jpg" alt="Example" /></a>
<div></div>
<img src="3.jpg" id="header-photo" alt="Example" />
</div>
<h1>EXAMPLE</h1>
<p>body goes here</p>
</body>
</html>
not yet opened in IE, works in FF, safari and opera
the image is still inline: that's the space needed for the descenders.
Thanks, Swa. And boy do I feel stupid right now. That was the first thing I thought of. I tried the fix, but for some reason it didn't work for me. It must have been an operator error of some kind (the operator named Ted, that is!)
