/    Sign up×
Community /Pin to ProfileBookmark

Img dimensions in a percentage?????

Copy linkTweet thisAlerts:
Jul 17.2007

I’m having trouble understanding the difference between IE 6 and FF when it comes to setting dimensions to img’s in a percentage. Below are the images I have on my myspace profile. It’s myspace.com/layoutnerd. As you can see, in FF the percentages are in relation to the full page, but in IE6, they are in relation to the original image dimensions. Is there anyway to make it so both browsers act the same without using exact px’s. I want to use only percentages for reasons I won’t get into. Thanks for any advice.

<img src=”http://i175.photobucket.com/albums/w122/lehula99/IMG_0323.jpg” style=”position:absolute; left:-1 ; top:496;width:30%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/Picture5035.jpg” style=”position:absolute; left:299 ; top:1319;width:70%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/Picture5017.jpg” style=”position:absolute; left:10 ; top:1428;width:30%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/Picture5005.jpg” style=”position:absolute; left:209 ; top:2239;width:50%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/jk045.jpg” style=”position:absolute; left:480 ; top:1850;width:50%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/jk041.jpg” style=”position:absolute; left:42 ; top:1869;width:40%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/579283481_l.jpg” style=”position:absolute; left:326 ; top:486;width:50%”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/photo-ffadult-i-r40-s1-25012468_468.gif.jpg” style=”position:absolute; left:751 ; top:693;width:”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/dancesnoop.gif” style=”position:absolute; left:839 ; top:512;width:”> <img src=”http://i175.photobucket.com/albums/w122/lehula99/Picture010.jpg” style=”position:absolute; left:192 ; top:918;width:60%”>

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@pentaceJul 17.2007 — Not sure what myspace allows anymore but u can give the images a name. And try using style="width:name.offsetWidth"
Copy linkTweet thisAlerts:
@FangJul 17.2007 — It' the position:absolute that is causing the difference in IE6. IE7 reacts the same as Fx.

The image % is calculated from it's containing element, normally (position:static), this is the size of it's parent element. All browsers show the image the same size.

When the image is position:absolute the image size is relative to the body, except for IE6 which still calculates the image relative to it's parent.

The solution is not to use position:absolute
Copy linkTweet thisAlerts:
@lehulaauthorJul 17.2007 — hmm, i would like to keep the images where they are though. I will try something else. Thanks
Copy linkTweet thisAlerts:
@CentauriJul 17.2007 — hmm, i would like to keep the images where they are though. I will try something else.[/QUOTE]

You don't need to use absolute positioning - you should be able to place the images using margins.
×

Success!

Help @lehula 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.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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