Need help - site looks bad in IE 6

**J.Karlsson** · 12-02-2002 11:25 AM

I got my site to look the way I want in IE 5.0 and Mozilla. However, now I also have access to IE 6 and when I viewed the site in that browser, it didn't look good.

My site is here: http://jkarlsson.netfirms.com/test/index.html
...and the CSS file is here: http://jkarlsson.netfirms.com/test/mall.css

Does anyone have any idea how to make it look good in IE 6?

P.S.
The page has been validated with the W3C validator, and all errors found are there because of my webhost putting their banner on top of the page.

**Stefan** · 12-02-2002 11:43 AM

Don't have access to IE 6 right at this moment, but I assume part of your problems might be this in your page

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

While this is entirely correct, there is an IE 6 bug that makes it parse a STRICT doctype in "quirks"-mode if you place the <?xml?> declaration on the page.

Since the xml declaration is entirely optional you might as well leave it out to work around this IE/win 6 bug.
As long as you have the XML NameSpace in there as well as a meta tag for the charencoding you will be fine anyway

(examples for refereance)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

Any remaining problems after this change is probably solvable by taking advantage of the IE CSS parsingbugs taht you are already using to some extent.

**Rick Bull** · 12-02-2002 01:29 PM

Thanks for that tip Stefan. Actually I took out my XML declaration and the application/xml+xhtml content-type as I was getting XML output instead of HTML, which I thought maybe due to that, but your tip is handy.

**Klyve1** · 12-02-2002 02:34 PM

Have you changed this now as it looks the same in IE6 and Mozilla.

**J.Karlsson** · 12-03-2002 03:35 AM

Originally posted by Klyve1
Have you changed this now as it looks the same in IE6 and Mozilla.

Are you talking to me? If so, no, I haven't changed anything yet and it does not look the same in IE 6 and Mozilla.

Stefan: You actually helped me with this (about taking advantage of IE CSS parsingbugs) in the old forum. I don't quite remember how it worked, so could you please tell me which value is read by which browser?

**J.Karlsson** · 12-03-2002 03:45 AM

Stefan: You said that you don't have access to IE 6 at the moment, so I thought I'd post a screenshot showing what the page looks like in IE 6.

**Stefan** · 12-03-2002 05:41 AM

Originally posted by J.Karlsson
Stefan: You actually helped me with this (about taking advantage of IE CSS parsingbugs) in the old forum. I don't quite remember how it worked, so could you please tell me which value is read by which browser? [/B]

First you should remove that <xml> declaration as I said.

Then, in your CSS file you have stuff like

width:725px;
voice-family:"\"}\""; voice-family:inherit;
width:748px; padding-bottom:4px; }
html>div .sidhuvud { width:748px; }

The first width value is used by IE/win 5.x
The second width value is used by IE/win 6.x
The third width value is used by eg Mozilla

Thus if it looking as it should in IE 5 and Mozilla but not IE 6 (after removing the <xml>), change the values in the second place width appears.

**J.Karlsson** · 12-03-2002 11:28 AM

I've been playing around with this for a while now, and I noticed the following:

When removing the <xml> tag, in IE6, the big white div and the yellow bar below it (.innehall and .sidfot) jumped down below the left-hand menu. With the <xml> tag, it looked better -- not perfect, but at least the stuff was close to where I want it!

Another thing was...here's a piece of code by the way (it's the code for the top yellow bar):

.sidhuvud2
{
width:713px;
voice-family:"\"}\""; voice-family:inherit;
width:702px;
}
html>div .sidhuvud2 { width:713px; }

When I changed the second width value (702px), the yellow bar got shorter both in IE6 and Mozilla (in IE6 I got the width I wanted, but in Mozilla it was too short).

I have uploaded the files to my site, and they are at...

http://jkarlsson.netfirms.com/test/index.html -- with <xml> tag
http://jkarlsson.netfirms.com/test/index-noxmltag.html -- without <xml> tag
http://jkarlsson.netfirms.com/test/mall.css -- CSS file

Firstly, let's focus on getting the correct width of the yellow top bar -- I'll come back later with the other problems...
So...any comments?

**Robert Wellock** · 12-04-2002 06:45 AM

Were getting pure XML output Rick? If that were the case it would be down to your Apache server module set-up.

If you mean it was severed as XHTML via the browser's non-validating XML-Parser and looked similar to HTML then that's expected

**Stefan** · 12-04-2002 07:52 AM

Originally posted by J.Karlsson
.sidhuvud2
{
width:713px;
voice-family:"\"}\""; voice-family:inherit;
width:702px;
}
html>div .sidhuvud2 { width:713px; }

When I changed the second width value (702px), the yellow bar got shorter both in IE6 and Mozilla (in IE6 I got the width I wanted, but in Mozilla it was too short).

Crap sorry, I didn't notice you hade made a change in the CSS that breaks it (I just made a cut an paste).

html>div
should be
html>body
ALWAYS

ie in your case
html>body .sidhuvud2
or
html>body div.sidhuvud2

**J.Karlsson** · 12-04-2002 12:02 PM

I think I got it to work now, so...thanks a lot!

Thread: Need help - site looks bad in IE 6

Thread Tools

Display

Need help - site looks bad in IE 6

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions