View Full Version : Scrambled in IE6.....help!

07-06-2007, 05:16 PM

I'm trying to put together my portfolio page using CSS for layout. Check the link in firefox first, this is exactly how it should look!


Then in IE, and it's completely mashed! :-(

I've only seen it in IE6 though, (I'm a mac user and have to go round the corner to the cyber cafe to check my layouts on windows, they don't have V7!!) So firstly, could anyone out there let me know how it looks on V7?

I know the png transparency isn't supported in versions below 7 so that looks ugly, but I've just found a fix for that here - http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/ That's not my worry, it's the breaking apart of the images, and the completely missing image on the top left!

Could someone kindly check my CSS out and advise me?

Thanks in advance


07-06-2007, 06:44 PM
I've got one tip that might help you fix this alltogether, but requires a little recoding. Use a background image on your body tag for the whole background, all of it. Don't slice your background into <img> tags on your website.

The whole page only has one area of text, so you don't really need more than one container for your text, and the rest of the background, even the background for the text, which is transparent, can be part of the same background.

So something like this:

<div id="text">
your text here

With basic css to show where Im going with this:
body {background: url(thewholebackground.jpg) no-repeat;}
#text {position: absolute. top: 100px; left: 300px; width: 150px; height: 400px;}

Then you can add styles and more to get it perfect for you. And you don't need to worry about the transparency because you already made that box as part of your background image

07-06-2007, 08:03 PM
Thanks for the reply domedia

I did consider that, definitely a lot less work! But would it not take longer to download?

Also the idea of having a box around the text with png as background was to be able to make it flexible, so I could add more content and the box would extend...

I think I will go for that for the time being though, will save a lot of frustration by the looks of it ;-)

07-06-2007, 08:21 PM
The download will be the same, all you do is cutting it up in smaller pieces (which actually means *more* requests to your server) 8)

You can keep the transparency divs if you want to. That should not interfere with having just one background for the rest of your site.
As a rule of thumb; if the image is purely decorative, use it as a background, but if it is part of the content, like a photo going along with an article, use the img tag

07-07-2007, 01:39 PM
Thanks again domedia ;-)

Well that was an easy workaround, it even looks right in IE on the mac! :-0

One thing now though that's bugging me is that now it's not possible to scroll down. So if your resolution is lower than the size of the page you cannot scroll down and view the bottom part of the background....is this normal?

07-07-2007, 05:33 PM
Scroll down to what? 8) If there's content, there's usually a scroll.

07-09-2007, 05:16 AM
So if your resolution is lower than the size of the page you cannot scroll down and view the bottom part of the background....is this normal?

this is normal, unless you set a height or minimal-height on the parent div

07-09-2007, 11:43 AM
Cheers ;-)

I put an empty div with a set height there in the meantime...

Now I'm having probs with the listed navigation bit :-( (this is all making me realise the headache it must be to build a proper html/CSS site and cross test it!) If you check it in FF, again fine. But in IE7 the links and the according description are on the same line, and they are also left padded a bit too which looks really odd. So does IE interpret the <li> tag differently to every other browser?! Cos it appears to look fine on firefox (PC and Mac), safari, opera, and even IE on the mac (which is considered redundant by most) .... hmmmmmm

thanks again for yr help so far guys

07-09-2007, 02:59 PM
Your code is not valid. You cannot have an <li> without declaring a list first (UL).
This is often a good first step to take, before looking to find other fixes to problems. Sometimes invalid HTML is the source.