Got a site here that I am trying to keep simple and have everything correct so far for the most part. Except as you can see where it says Header1 I need that to be below the brown div. Having a bit trouble figuring it out.
I don’t see instructions? Just two headers and a lorem ipsum text?
Sorry it says Header1 now. I changed it just now.
I had everything working fine until I decided to check how things looked in IE. Usually IE7 plays pretty well, but in this instance there was a crucial problem. I had an absolutely positioned div (hover menu) and under it I had a transparent PNG that was also absolutely positioned.
“In Internet Explorer positioned elements generate a new stacking context, starting with a z-index value of 0. Therefore z-index doesn’t work correctly”
Actually this may be a clearing/floating issue. I just need the content to start below the brown box. not in it.
I’m not 100% sure what it is you are even trying to do there (without actual content it’s hard to even say if you have semantic markup and proper heading orders or not; as a rule of thumb given where the h1 is in the text I say not) but I am seeing a lot of ‘issues’ with said page’s markup and CSS. I’m just going to go down the list.
-
Since valid CSS can only contain ASCII7, there’s no reason to ever use the @charset declaration unless your editor is messing with you.
-
No default family on your font declarations… and you didn’t put the multi-word font name in quotes meaning browsers are going to look for just “gill” or ignore the entire declaration outright.
-
changing font-size without resetting the default line-height.
-
Verdana is a microsoft core font, if arial is present verdana will never fire… and since verdana and arial are installed TOGETHER in 99.9999% of cases.
-
forcing all fonts to an absurdly undersized fixed metric. PX bad! ESPECIALLY on BODY since that means you can NEVER have dynamic fonts on the content.
-
“clearfloat”, clearfix, clearing DIV’s – welcome to 2001.
-
the “logo” looks like a presentational image, I’d get that out of the markup.
-
you’re declaring enough default margins and paddings a reset would probably be less code – certainly less headaches. (though that’s a YMMV).
-
if you’re going to have a menu, get it into the list BEFORE playing with the layout… though I would have the full markup for the whole page with actual content (or a more reasonable facsimile than lorem ipsum) before even THINKING about layout. That way layout elements won’t screw with your semantics. If nothing else it also means that you won’t end up designing for something that only works on a DIV and breaks when you change it to the proper UL/LI markup.
-
you should probably take an axe to the use of presentational classes like “curve” and “shadow” – it’s pointless markup bloat and defeats one of the points of using CSS in the first place! state the targets in the CSS, not in the markup… much less nonsense like “fltrght” and “fltleft” – at which point you might as well go back to using the ALIGN attribute html 3 style.
-
if you declare just “A” instead of “a:link” – the text decoration will inherit to all five psuedo-states, so you don’t have to waste time with saying text-decoration again unless the value is DIFFERENT. You also are re-declaring the default behavior from every browser with the underline, so that makes no sense.
-
Though the even BIGGER issue is trying to put a 880px wide #homebanner inside a 850px wide .container. There is a way to do that, and it’s called using negative margins. It most certainly should NOT be a floated element… NOR does it need to be APO.
So, had I written that same page, the markup would probably have looked more like this:
<!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"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Equicorp Premium Brands
</title>
</head><body>
<div id="pageWrapper">
<h1>
Equicorp<br />
<small>Premium Brands <span>LLC</span></small>
<b><!-- image replacement --></b>
</h1>
<ul id="mainMenu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Brands</a></li>
<li><a href="#">Contact</a></li>
<li class="last"><a href="#">Links</a></li>
</ul>
<div id="homebanner">
<!-- #homebanner --></div>
<div id="content">
<h2>Header1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<h2>Header2</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<!-- #content --></div>
<!-- #pageWrapper --></div>
</body></html>
Gimme a couple minutes, and I’ll toss together the CSS I’d use with that – and probably do a precomposite of that logo so it doesn’t need the fat bloated “alpha transparency for nothing”.
Here is what I would do: remove class=“fltlft” from #logo, give #logo a relative position and a z-index greater than the z-index of #homebanner.
Give #homebanner a relative position and a negative topmargin to pull it up under the logo.
Try to avoid absolute positioning for layout reasonings as much as possible, it causes all sorts of headaches.
#logo {
padding: 10px;
position: relative;
width: 299px;
z-index: 1;
}
#homebanner {
background-color: #A98170;
height: 150px;
margin: -75px 0 0 -15px;
position: relative;
width: 880px;
}
zueg’s CSS is similar to what I came up with…
Which looks a little something like this:
Equicorp Premium Brands
as with all my examples the directory:
Index of /for_others/zeeb4
is unlocked for easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the handful of CSS3 properties. Tested working IE 5.5, 6, 7, 8 & 9, FF 3.5 and latest, and the latest flavors each of Opera, Saffy and Chrome.
I got rid of the alpha transparent image and pre-composited the overlap, GAMA stripped that .png so it color matches in legacy IE, and addressed most of the ‘issues’ I outlined above. It also now gracefully degrades images off and CSS off. (I even threw in corner rounding on the images off H1 for the heck of it).
The big trick is the negative margin – it shortens how tall the h1 is in “flow” while not changing it’s render size. You can then also leverage that position:relative elements ALWAYS depth sort OVER elements that are not receiving positioning.
Hope this helps, and gives you some ideas on thinking “differently” about putting a layout together. Huejj was quite correct in saying that absolute positioning on that h1 was likely the root of your problems… APO is useful inside a fixed element, but not so much for positioning said element as it breaks flow.
… and breaking flow is to be avoided when/where possible.
Good work as usual but just a minor point in that i’m seeing the usual negative margin problem in IE6 (xp) where the negative portions are missing (I believe they slide under the background). You need to add position:relative in IE6 for negative margins to appear outside their parent.
That means the z-index of the h1 will need to be raised though to accommodate the change though.
h1 {
position:relative;
[B] z-index:2;[/B]
float:left;
display:inline; /* prevent IE margin doubling */
width:300px;
padding:40px 0 16px;
margin:0 0 -53px 10px;
text-transform:uppercase;
font:bold 48px/48px "times new roman",times,serif;
background:#FFF;
}
#homeBanner {
clear:both;
height:150px;
margin:0 -15px;
background:#A98170;
[B] position:relative;[/B]
}
Actually, I didn’t consider the negative portions sticking out essential to IE6 since it’s not like the rest of it’s style is showing up.
I actually had it with the pos:rel and z-index on both the h1 and #homebanner, but ended up removing them as it seemed “pointless”.
No I suppose it doesn’t really matter in that case.
Thank you everyone for your responses/advice. This helped me understand my issue.