Forum Moderators: not2easy
Here's the relevant working code (text styles omitted):
#Header {
margin:20px 0px 10px 0px;
padding:17px 50px 20px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
height:42px; /* 25px + 17px + 0px = 42px */
border-style:none;
border-width:0px 0px; /* top and bottom borders: 0px; left and right borders: 0px */
background-color:#b9d4ef;
text-align:right;
/* Thanks to Tantek Celik */
voice-family: "\"}\"";
voice-family:inherit;
height:25px; /* the correct height */
}
/* the "be nice to Opera 5" rule */
body>#Header {height:25px;}
#Content {
margin:20px 50px 50px 215px;
padding:10px;
border-style:solid;
border-color:#7b7f6a;
border-width:2px;
background-color:#e4e9d4;
}
#Menu {
position:absolute;
top:150px;
left:20px;
width:172px;
padding:10px;
background-color:#b9d4ef;
border:2px solid #65747f;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}And here's the div I'm adding in just before the #Menu:
#Logo {
position:absolute;
top:30px;
left:50px;
width:100px;
height:110px;
background-color:transparent;
border:none;
}The trouble is, after adding the new code, the header bar is pushed to the very top of the page in IE. In Firefox it displays properly with a 20px line of background showing. It's nothing in the HTML, merely adding <div id="Logo"></div> will make it go haywire. Ignoring the fact that the header text is displaying a little differently in FF compared to IE, this is my major problem with implementing this layout.
Any suggestions for workarounds to get this image placed or explanations of why IE is acting strangely would be most appreciated. :) I feel like I'm doing something wrong but just not seeing it.
Another possibility is eliminate all the positioning and use floats instead.
Also, as a general rule, I find absolute positioning can often causes more problems than it solves. It's usually desirable (if not by the designer, then by the user) to allow containers to expand vertically and push what is bellow them down. I have a small screen, so I often want to increase the text size to make it easily ledgable. It's incredible how often I end up with text overlapping other text. There are other reason besides positioning which can cause this to happen, but it's one of them.
It's usually desirable (if not by the designer, then by the user) to allow containers to expand vertically and push what is bellow them down. I have a small screen, so I often want to increase the text size to make it easily ledgable. It's incredible how often I end up with text overlapping other text.
Also, adding position:relative; to the header id seems to have no effect. Thanks for the suggestion, though.
OK, I've figured out how to fix this problem, but I don't like the fix. Seems if you put the <div id="Logo"></div> below the <div id="Header"></div>, IE no longer forget about the top margin on the header element.
Of course, this breaks the logical flow of the HTML itself. The logical layout would be
1. Logo
2. Headline
3. Content
4. Navigation
Now, Logo gets moved from #1 to at least below #2 (I've just stuck my div ID in at the bottom).
Also, I was really hoping to make the logo graphic visible to those without CSS2. Because of it's crazy placement in the HTML though, I've had to hide the logo by leaving the logo id empty and adding in the graphic as a background-image.
So, now I see why navigation works just fine (because that's called in below the Content). But call anything in above the Headline and you're sunk. Is there anything to be done about this?
I'm using a transparent PNG logo that, of course, needs repair for IE 6, but the standard Javascript doesn't do the trick because it's being called in the CSS.
Another option is to use a GIF instead, since IE will natively understand its transparencies. Also, most logos don't have sufficient color depth to preclude using GIFs.
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
}
#Header {
margin:20px 0px 10px 0px;
border-style:none;
background-color:#b9d4ef; /*this can't be 24px, since the padding itself is 37px */
/*so i took out height all together and let the h1 font size plus padding determine height */
/*depends on how you need this area to function but remember to add up font height plus top and bottom padding */
}
#Header h1 {
padding:17px 50px 20px 20px;
text-align:right;
font-size:20px;
}
