www.webdeveloper.com
Results 1 to 11 of 11

Thread: Need help - site looks bad in IE 6

  1. #1
    Join Date
    Dec 2002
    Location
    Göteborg, Sweden
    Posts
    93

    Need help - site looks bad in IE 6

    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.

  2. #2
    Join Date
    Nov 2002
    Posts
    984
    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.

  3. #3
    Join Date
    Nov 2002
    Location
    England
    Posts
    275
    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.

  4. #4
    Join Date
    Nov 2002
    Location
    Hove, UK
    Posts
    160
    Have you changed this now as it looks the same in IE6 and Mozilla.

  5. #5
    Join Date
    Dec 2002
    Location
    Göteborg, Sweden
    Posts
    93
    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?

  6. #6
    Join Date
    Dec 2002
    Location
    Göteborg, Sweden
    Posts
    93
    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.
    Attached Images Attached Images

  7. #7
    Join Date
    Nov 2002
    Posts
    984
    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.

  8. #8
    Join Date
    Dec 2002
    Location
    Göteborg, Sweden
    Posts
    93
    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?

  9. #9
    Join Date
    Nov 2002
    Location
    XYZZY - UK
    Posts
    1,760
    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
    Last edited by Robert Wellock; 12-04-2002 at 07:48 AM.

  10. #10
    Join Date
    Nov 2002
    Posts
    984
    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

  11. #11
    Join Date
    Dec 2002
    Location
    Göteborg, Sweden
    Posts
    93
    I think I got it to work now, so...thanks a lot!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles