/    Sign up×
Community /Pin to ProfileBookmark

IE problem with percentages

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

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

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@Zach_ElfersNov 20.2002 — Are you sure you included the % sign after the percent? If you didn't, it comes out in pixels.?
Copy linkTweet thisAlerts:
@spufiauthorNov 20.2002 — 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.
Copy linkTweet thisAlerts:
@Paul_O_BNov 20.2002 — 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
Copy linkTweet thisAlerts:
@spufiauthorNov 20.2002 — 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.
Copy linkTweet thisAlerts:
@Paul_O_BNov 20.2002 — 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 ?
Copy linkTweet thisAlerts:
@StefanNov 21.2002 — [i]Originally posted by spufi [/i]

[B]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. [/B][/QUOTE]


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 */

}
Copy linkTweet thisAlerts:
@spufiauthorNov 21.2002 — 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.
×

Success!

Help @spufi spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.24,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Marika,
tipped: article
amount: 1000 SATS,

tipper: @hatem774,
tipped: article
amount: 1 SATS,

tipper: @nearjob,
tipped: article
amount: 1000 SATS,
)...