View Full Version : Opaque DIVs plus IE not working

05-13-2009, 03:25 PM
Okay.. I've been working on this for a while, being at least 5 hours (I'm not new to CSS nor HTML but I've never made a full page from CSS without tables so excuse my ignorance)

I am trying to make something to look like this: http://www.kiwilynn.com/index.png

However I have no idea what I'm doing to be honest and am kind of taking this slowly... but in any case... this is what I'm getting:


It refuses to show up in IE what so ever, well..the background shows but not a thing else.. and I have no idea why.. Plus basically what I'm trying to do is make it so that the (colored/blue-etc) divs on top are centered and contained within the transparent divs seperately.. I hope I've explained this right and I'm at least on the right track...:confused:

I know there are blue boxes on the page too :P I was using it to know where everything is being placed..

05-13-2009, 03:54 PM
There’s no need to use absolute positioning at all on this page. You would have three sections (divs): header, content, footer. These get a width and margin: auto; to center them. Inside the container you’d have two subsections which can be floated left and/or right to make them appear next to each other. Have a look at http://bonrouge.com/2c-hf-fixed.php for some inspiration.

Also never ever use empty useless elements just to add some backgroud or whatever. Only use as much HTML as necessary to structure your content. CSS can do the rest with the HTML you’ve got in most cases (there are exceptions but generally this rule applies). The important keyword is semantics (http://boagworld.com/technology/semantic_code_what_why_how/). Empty elements have no purpose, and thus, aren’t semantic.

05-13-2009, 04:08 PM
empty elements for background? I had to use the setup that I did because the background for the header/body/footer needs to be opaque to some degree..and if I add anything inside those divs it will also be opaque..I've looked for other ways around it but I dunno..

also when I remove position: absolute; it puts the content boxes below the current divs I have for the slightly transparent bg..

Also it still isn't showing any of this in IE