Display issues in IE 6+ (and a slight weirdness in Safari)

Spiegal · 06-29-2007, 06:40 PM

This is a site on which I am currently working with friends: http://www.mondaynightcrew.com/
This is a quick link to my stylesheet: http://www.mondaynightcrew.com/css/mncstyles.css

It displays almost exactly the way that I want it to display in Firefox, but some typical problems are showing up in Internet Explorer 6 and 7. I'd like to position the right skyscraper ad to the right of the content, overlapping the borders for both the "content" and "contentholder" divs. My FF solution doesn't work for IE. I'm also having positioning issues with the header, which I will unify and change to an image map and hopefully solve that issue. Finally, the "content" borders do not line up correctly with the "contentholder" borders.

Again, all of these issues are moot for FF (and a couple other browsers), but very distracting in IE. My Safari issue crops up under the "Comics" page, as the browser-drawn blue for the "content" div doesn't exactly match the jpg images blue for the comic and comic navigation buttons, despite being the same hex value. Should I recut the images and not flatten them? Does that even matter? Thanks in advance!

koyama · 06-30-2007, 08:35 PM

Quote:

Originally Posted by Spiegal

I'd like to position the right skyscraper ad to the right of the content, overlapping the borders for both the "content" and "contentholder" divs. My FF solution doesn't work for IE.

The problem is IE's broken float model. The situation has really not got better in IE7 compared to IE6.

(1)
Change your markup from this:

Code:

<div id="skyscraper">
	[...]
</div>
<div id="content">
	[...]
</div>

to this:

Code:

<div id="content">
	<div id="skyscraper">
		[...]
	</div>
	[...]
</div>

(2)
Give #skyscraper position: relative to solve for a “clipping bug” in IE where an element with hasLayout clips areas that should be rendered outside the element. For example, this happens when you use negative margins.

To avoid that you get overwhelmed, I think we better wait with all the other issues till you get the above things fixed.

Spiegal · 07-01-2007, 03:52 AM

Thanks, that fixed my positioning issue! I also reworked the banner inside "content", and that seems to work better for spacing. I still have the odd borders in IE, though. Is IE adding something that I just don't see?

koyama · 07-01-2007, 06:00 AM

Quote:

Originally Posted by Spiegal

I still have the odd borders in IE, though. Is IE adding something that I just don't see?

I'm not sure where you see those border issues? Can you please point at them?

Spiegal · 07-02-2007, 05:48 PM

I can't take a picture of it at the moment; however, it displays on IE with SP2 (at least). The odd borders pop at the bottom of both advertisements, adding about 2-3 pixels of unintended space colored dark blue like the <body>. Also, in the same browser, another 3-4 pixels are jammed (same blue color) to the right of the "content" <div>, but to the left of the 3 px black-ish border. This problem does not display in any other browser that I've tested (i.e. Opera, FF, Safari) regardless of OS.

I've created an image map to replace my cut apart header, which I'll be uploading tonight. That should fix my spacing problem up top, but I'm still stumped on this other spacing issue.