www.webdeveloper.com
Results 1 to 8 of 8

Thread: IE problem with percentages

  1. #1
    Join Date
    Nov 2002
    Posts
    2,632

    IE problem with percentages

    http://www.matts-website.net/index2.html
    http://www.matts-website.net/styles.css

    The lighter brown background area on the right is wider than what it is on the left. It looks correct in Netscape.

  2. #2
    Join Date
    Nov 2002
    Posts
    631
    Are you sure you included the % sign after the percent? If you didn't, it comes out in pixels.

  3. #3
    Join Date
    Nov 2002
    Posts
    2,632
    Here's the CSS code.

    .main {
    width:60%;
    margin-left:20%;
    border:2px solid #32180F;
    border-top:0px;
    border-bottom:0px;
    padding:4px;
    background-color:#FFFFFF;
    }
    .mainBG {
    width:100%;
    position:absolute;
    top:98px;
    border-bottom:2px solid #32180F;
    background-color:#79442E
    }

    You can see the mainBG class takes up 100% width. The main class covers 60% width and starts with a left margin of 20%, and thus it would leave a 20% margin on the right.

  4. #4
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    Hi,

    Were you using explorer? The brown line looks even both sides when viewed with Netscape 6.2.

    I also notice that if you take out the first line (the xml declaration) then it displays correctly in explorer. Sorry but I don't know what the solution is but I hope someone more knowledgable than me will point you in the right direction.

    Paul

  5. #5
    Join Date
    Nov 2002
    Posts
    2,632
    I checked it in both Internet Explorer 5.5 and Netscape 6.2. It looks correct in Netscape, but not Internet Explorer. I took out "<?xml version="1.0"?>" and it's still off in Internet Explorer. The left side isn't even the length of a credit card, where the right side is more than the length of a credit card.

  6. #6
    Join Date
    Nov 2002
    Location
    Hampshire, England
    Posts
    42
    I think it's something to do with how explorer is adding up the percentages. Try changing the width to 90% in your main class. It then seems to display ok in explorer but obviously incorrect for netscape.
    Sorry not much help

  7. #7
    Join Date
    Nov 2002
    Posts
    984
    Originally posted by spufi
    I checked it in both Internet Explorer 5.5 and Netscape 6.2. It looks correct in Netscape, but not Internet Explorer. I took out "<?xml version="1.0"?>" and it's still off in Internet Explorer. The left side isn't even the length of a credit card, where the right side is more than the length of a credit card.
    IE 5.5 and earlier has a compleatly broken Boxmodel.
    IE 6 fixes that though, but it has another bug that breaks it if you use the XML declaration. Just leave it out (since it's optional) and it will work in IE 6.

    To fix it in IE 5.5 and earlier take advantage of IE CSS parsing bugs. That way you can use the correct values for nonbuggy browsers while you feed buggy browsers with values that makes it work better.

    Eg
    main {
    width:80%; /* IE up to 5.5 uses this */
    margin-left:20%;
    voice-family:"\"}\""; voice-family:inherit;
    width:60%; /* Less buggy browsers uses this */
    }
    // Stefan Huszics

  8. #8
    Join Date
    Nov 2002
    Posts
    2,632
    Yeah, I went to Rick's website and I saw on his forum where he talked about a problem with the xml part, so I was planning on taking it out. I'll play around with the code you provided to see if I can get it to work now.

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