/    Sign up×
Community /Pin to ProfileBookmark

Opera image size in percent bug??

I have come across a problem with a couple of my sites. The problem is only in opera. If I have a image with the width and height as percentage’s it shrinks it down so you cant see it and only does this if the img is in a div. If I take it out of a div its fine. I have made up a little demo. Link is [URL=”http://www.eftel.com.au/~julien/test/fish.htm”]http://www.eftel.com.au/~julien/test/fish.htm[/URL]

The code is

[code=html]<html>
<style type=”text/css”>
#fish {
padding-left:10px;
padding-right:10px;
padding-bottom:2em;
padding-top:80px;
width: 72%;
margin-top:0;
margin-right:20px;
margin-left:22%;}
</style>
<body>
<div id=”fish”>
<img src=”fish.jpg”/>
<br />
plain
<br />
<img src=”fish.jpg” width=”50%” height=”50%” />
<br />
percent 50
<br />
<img src=”fish.jpg” width=”343″ height=”301″ />
<br />
343 x 301
<br />
</div>
</body>
</html>[/code]

If I have the img with no size or size in pixels its fine. Or if i just state width in % and height in px its fine.
Is this a known opera bug or am I doing something wrong. The img displays right in ff and ie.
Any help would be appreciated
Julien

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@SiddanApr 09.2008 — Hi

For me the 50% image does not display in IE 6.5 nor 7.

Obviously IE does not understand a percentage value from a container which has no fix width.

If you remove the width from the Fish Div id then it seems to be fine. Allthough I do not know how this will affect your layout.
Copy linkTweet thisAlerts:
@HydroApr 09.2008 — Percentages are a bad idea, its generally better for your layouts if you use pixels instead.
Copy linkTweet thisAlerts:
@SiddanApr 09.2008 — Percentages are a bad idea, its generally better for your layouts if you use pixels instead.[/QUOTE]

That is not true. Variable layouts and fonts are usually the best way.

It is only in some occasions fix widths etc in layouts are better.

But I sure would be interested in knowing what use he will have for his 50% image
Copy linkTweet thisAlerts:
@HydroApr 09.2008 — the #fish class should be a defined size (width: 400px; height:300px) for the elements inside to repsond properly to being a percentage of the parent element, otherwise it will ignore the percentage it has been given and sit at its default value.
Copy linkTweet thisAlerts:
@SiddanApr 09.2008 — That however is correct.

Still funny though that Firefox displays it correctly, where it usually is strict about these type of things
Copy linkTweet thisAlerts:
@HydroApr 09.2008 — Its usually IE which is more anal with code in my experience
Copy linkTweet thisAlerts:
@juboyauthorApr 09.2008 — Thanks guys

I had a feeling I'd have to use defined sizes, although I try to make my pages use all the screen with what ever screen size easily.

It is a weird one because ie6 and ie7 works fine for me on two different machines.

The 50% bit is just a demo to explain my problem. Oh the width: 72% is from one site which uses the rest for nav bar ect If I use say 800px on 800 x 600 you would have to scroll to see it all if I use smaller, on larger screens you get a blank bit...anyway something to chew on.

I'll have to work with the parent element having defined size or something.

Thanks again
×

Success!

Help @juboy 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...