StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The problem is that the two <code>div</code>s aren't mutually exclusive - IE's seeing both of your .content and .content_IE divs, and the positioning that you're trying to set is being governed by the interior .content div (because both have <code>position: relative</code> applied to them). Try removing the .content div from your code and look at it in IE, you'll likely see the same issues you're having in the other browsers. (For more information, <a href="http://tutshelf.com/the-art-of-css-positioning/" rel="nofollow noreferrer">this article</a> covers positioning pretty well)</p> <p>(this is perhaps a bit verbose, but it provides some reasonable strategies for preventing this sort of issue in the future):</p> <p>There are a few things going on here: IE-specific handling, and z-index issues.</p> <p>First, a few style/strategy recommendations:</p> <ol> <li>Don't use inline styles (the height you're setting on the .content and .content_IE classes), this makes even less sense since you're setting other style properties (like width) through the CSS. The only reason I can see for doing this (and even then I'd still recommend against it) is if you're doing something with Javascript.</li> <li><p>For the IE-specific declarations, a better approach is to set up your styles so that you can take care of the Cascade - set the base styles (height, width, etc) on the .content class, and then apply a few IE specific rules (like the different height). It would look something like this:</p> <pre><code><style> .content { background: #fff; height: 550px; width: 990px; position: relative; float: left; top: 50px; } </style>  </code></pre></li> </ol> <p>That way you should experience a) less potential weirdness, and b) an easier time maintaining your code. If your stylesheets are large enough, break up the rules in to two (like "main.css" and "ie7.css", and link to the IE one from inside of the conditional comment.</p> <p>Now, as far as the z-index issue goes - I would recommend applying the z-index on the image that you're trying to place 'on top' of the content, and use a positive value. This should prevent some of what I believe you're seeing happen in IE (IE tends to have issues with negative values in general, so try to avoid them if you can).</p> <p>If that fixes the problem, keep working with your code so that you don't need the conditional CSS, too.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload