CODEWITHSUNDEEP
htmlcsslayout
The Surrican
The Surrican

Reputation: 29874

What did I do wrong in this CSS Layout?

I did this layout here: http://www.2xfun.com/

It uses some css3 effects and stuff which are not supported in every browser, but if they dont work its fine.

The thing is that i really tried to keep the essentials working in old browsers.

I didnt use any negativ margins, which i know of make problems in IE 6 etc

But if i look at it in IE 6 the layout gets messy. The elements are completely garbled.

Where did I fail so terribly? I don't need an analysis of all my errors because i know its by far not perfect. But what positioning css directives are so wrong that they cause IE6 to mess everything up?

So my question is:

addendum:

this is how the page looks like in ie6 screen1

and after Šime Vidas's javascript fix screen2

and this is how it should look like and looks like in modern browsers chrome

Upvotes: 2

Views: 148

Answers (3)

thirtydot
thirtydot

Reputation: 228232

Here we go..

Add a rule to this effect to your normal stylesheet - @neXib was correct:

.headcontainer, .headbar {
    left:0
}

Without that, your site has problems even in IE7.

The above snippet, combined with adding this voodoo magic dust I created fixes the pressing IE6 issues:

<!--[if IE 6]>
<style type="text/css">
.headbar-spacer {
    width: 169px
}
.content div.right {
    padding-right: 0
}
.content h2 {
    margin: -30px 0 0 106px;
    width: 535px;
    padding: 0 0 12px 0
}
</style>
<![endif]-->

I commented out this:

<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4c90156b67654829"></script>

It seemed to somehow make IE6 jump the white video container to the top of the window. So wrap that in a conditional comment if need be.

Your site looks like this with the above changes in IE6 (ignoring the low color depth of this image): win Much better!

Improvements you could make:

  • Try out DD_belatedPNG to fix your .png transparency issues.
  • Make an image version of the CSS gradient you have on .headbar. At the moment, IE8 does not have a gradient. IE has support for it's own special kind of gradient, you might consider providing those rules (-ms-filter/filter + gradient?).
  • Redundant point: fix Notice: Undefined index: jsfix in /home/2xfun/html/application/views/vanilla.php on line 13. Obviously you just put that in for testing. I recommend suppressing the PHP error by prefixing the line with @.
  • Kick IE6 in the face. Twice.

Upvotes: 0

Šime Vidas
Šime Vidas

Reputation: 186013

Put this on the page: 

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

How does the page look in IE6 now?

Project homepage: http://code.google.com/p/ie7-js/

Getting started: http://www.charlescooke.me.uk/web/lab_notes/ie7_script.html

Upvotes: 0

plebksig
plebksig

Reputation: 535

Everything that has position: absolute, put both top and left positions, not just top. Everything that has float AND margin, set to display: inline. That will at least fix many problems. I'd also recommend a reset styling, like Meyer's. Your code looks a bit underdefined for IE6, it's a picky one.

Upvotes: 3

Related Questions