Why doesn't this site look right in IE6?

Associate
Joined
19 Oct 2002
Posts
1,925
Location
Welling/London
Hiya people,

After getting back into web dev recently and discovering the unlimited uses for CSS I have started working on a site for a friend however when I browsed to the site from work (forced to use IE6 for some reason!!?) I found that it's a mess.

www.ttop.nu/fbh

The image in the left div should overlap the right hand div, I think the CSS is correct etc but I am new to this. Could somebody check it out and tell me if its my coding or crappy IE6 please?

NS
 
shouldn't ANYONE with xp and an internet connection have ie 7 already?

Yes. But sadly too many people are still using it regardless. Fingers crossed the dawn of IE8 might help dwindle the numbers further.
 
W2K and lower have no IE7 upgrade path so it's mainly them that are still using it along with big companies that take forever to upgrade to anything else. We're still on IE6 and IE8 is now out!
 
Public sector are awfull for not upgrading from IE6, takes a stupid amout of time to program websites to get round all the bugs in it :(.

Find it funny that no one's updating to IE8 because it brakes all the sites that where programed around IE6/7 bugs lol. Thats gonna take years to sort out, stupid MS not sticking with standards!!!
 
it's taken me 6 months of bitching to get our PC's upgraded to IE7, and only about 10% have been done so far! :(

As for the site, either learn to hack for IE6 or put a comment on there stating that they will need to upgrade to IE7 to view the site properly.

It's a shame you couldn't write a bit of code that examined the browser and if it picks up on IE6 sends you to the IE7 download page :D

Also, on a side note, the flowers are displaying properly. They look all ragged around the edges :(
 
it's taken me 6 months of bitching to get our PC's upgraded to IE7, and only about 10% have been done so far! :(

As for the site, either learn to hack for IE6 or put a comment on there stating that they will need to upgrade to IE7 to view the site properly.

It's a shame you couldn't write a bit of code that examined the browser and if it picks up on IE6 sends you to the IE7 download page :D

Also, on a side note, the flowers are displaying properly. They look all ragged around the edges :(

If only :( lol
 
You cant stop coding for IE6, and wont be able to avoid the browser for some time. You wouldn't believe some of the big nationwide companys that still use IE6 in their offices and send us screenshots. I'm pretty sure IE6 will be around for a good few years more and its not avoidable unfortunately!
 
Your 'right' div has a z-index of 3. This makes it appear above the left div, which has a z-index of 2. (The highest index appears at the top.) I'd guess that's why IE is cutting off the image.

The way I would code that design would be to have a container div that spans the width of the page. I'd give that div a black background, and also set the flowers image as a background image that doesn't repeat, so it only appears on the left of the div:

Code:
#container {background-color: black; background-image: url('flowers.jpg') no-repeat;}

Inside that div you could have another div for the text, and give it a left margin equal to the width of the picture to prevent it from overlapping. That would get rid of the floats and probably solve your IE6 problems.

Also, the site says 'Hollie' but the title bar says 'Holly' :)
 
Last edited:
Hiya people,

Love the suggestions about redirecting to an IE7 download page! If only it was that easy! It's annoying as I work in IT and still cant persuade our AD man that IE7+ should be installed, its like talking to an old person who is stuck in their ways! :( Apparently he is worried that we would have too many calls from users with problems...

Aaaanyway, back to the website! The image is carp quality and is just something I have borrowed from a google image search for basic content, hence the bad quality.

Mattus - Thank you for the suggestion, will try that out when I get the chance! And good spot on the title bar! :eek:


NS
 
Hi,
Unfortunately, there is no one to blame as there is no authoritative body governing web standards that any browser software must adhere to. The W3C organisation do a good job of providing standards, but alas, they have no authority and even there work is subjective.

So what to do? Well stop blaming Micrsoft, Mozilla, Apple et al as IE6 (or any other browser maker) are not really responsible for 'broken' pages, but you can do something about it.

Here it is. Write your CSS style sheets for Firefox, make sure the website looks correct in Firefox and be happy. Now, test in IE (or use the 'IE Tab' extension for Firefox) and add exceptions in your CSS for IE, when needed.

How? Your CSS classes and inherited classes can have exceptions added that will only be picked up by IE based browsers. Firefox et al will ignore them. Maxthon for example will accept them as it is based on IE.

Show me the money! OK, ok, here is the code:

div#orderBox { /* For all browsers */ width: 200px; }
*html div#orderBox { /* IE, Maxthon */ width: 190px; }

The first line is picked up by all browsers, while the second specifies parameters for browsers based on Internet Explorer.

This is the professional solution, and acceptance of the fact that web standards are not authoritative; that all users do not upgrade software, nor should they be forced to do so, and that IE6 is very alive and used by many [people] outside of the public sector.

Cheers and good luck!

Majestic~

PS that flower would look less 'ragged' if you used a PNG with transparency.. but getting that to work in IE6 is a whole new problem. :)
 
Back
Top Bottom