19 replies [Last post]
Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Hello all,

I want to specify dimensions for all images in a given web page, which I can do with CSS markup such as "height: 100px; width: 100px;"

In IE, this does what I want - if the image is not available, then an empty rectangular box appears instead, with those dimensions. This ensures the overall layout of the page is maintained.

However Firefox does not do this - if the image is not available then nothing comes up at all.

Can anyone advise on how I might get Firefox to behave like IE in this instance?

Cheers,
Ornette

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

You put it in the html.

You put it in the html. E.G.

This is a rare instance where putting presentational information in the html is necessary for good performance. Of course, if the image is not actual content it shouldn't be in the html in the first place, in which case you could do it all from CSS instead.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Thanks Ed, but no, not even

Thanks Ed,

but no, not even using the 'html' attribues will Firefox do this.

Its very annoying - is this supposed to be correct standards behaviour? Will I really be required to wrap every image in a div?

Sad

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Ornette wrote:Thanks

Ornette wrote:
Thanks Ed,

but no, not even using the 'html' attribues will Firefox do this.

Its very annoying - is this supposed to be correct standards behaviour? Will I really be required to wrap every image in a div?

Well, you have us working in the dark here. A link to the actual page would certainly help, but before you do that are you sure you have valid html and CSS? Both are necessary and invalid code often causes problems like this. One thing you can be pretty sure of, and that is if IE shows it one way and Firefox another way, 99% of the time it is IE that will be lying to you, never mind that you think IE has it the way it "should" look.

If you haven't read the sticky messages at the top of the forums now is the time to do so.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

As an inline-replaced

As an inline-replaced element, the alternative to the image is the alt text, if available. Or, nothing, if nothing is specified. The alt text is just that, plain text. Firefox even allows you to style the alt text.

If you want the space preserved, you must make it a block element, i.e. float it. The border is up to you, and will appear with or without the image, if declared.

img {
  border: 1px solid #eee;
  float: left;
  height: 100px;
  width: 100px;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Thanks for the replies. I

Thanks for the replies.

I just had a little fiddle whilst making this reply, and I have suddenly discovered that Firefox will display an empty rectanglar box for a missing image!! (given that 'height' and 'width' dimensions have been specified of course)

It turns out it was this doctype in my web page that was making missing images collapse to nothing when viewing in Firefox:

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Having a correct doctype

Having a correct doctype declaration is one of our requirements for helping you in these forums. If you insist on not using them you should go for advice to a site where they will not call you out and will let you continue with out-of-date practices. A correct doctype, and prefereably a STRICT one, is not an option, it is a requirement. As is valid and preferably semantic html.

Read this article, as it is a "sticky" in this forum and you are expected to have read and understood it as a part of the deal in getting help here.

And, no, browsers are not rendering your code "correctly" without a doctype. Without a doctype there is no "correct", there are no standards and browsers can do what they want. The fact that it may look the way you want it to is beside the point.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

"...but I could be wrong"I

Quote:
"...but I could be wrong"

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Ornette wrote:Quote:"...but

Ornette wrote:
Quote:
"...but I could be wrong"

I am saying that the removal of the doctype I have been using resolves the issue with Firefox not displaying a outline for explicitly dimensioned images when the image is not available!!!

So, yes, the doctype I have been using is precisely the cause of this unwanted effect.

Are you serious? You need a doctype. Maybe it fixes the FF error, but it also throws IE into Quirks Mode, so your next topic will be "I removed the DTD, why doesn't it work in IE?"

Removing the DTD is not an option. Put it back in and find the correct solution to the problem Wink

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Ornette wrote:I am saying

Ornette wrote:
I am saying that the removal of the doctype I have been using resolves the issue with Firefox not displaying a outline for explicitly dimensioned images when the image is not available!!!

So, yes, the doctype I have been using is precisely the cause of this unwanted effect.

You are making a huge logical error that will only end up causing you hours and days of pain and trouble.
Removing the doctype actually causes browsers to go into "quirks" rendering mode where there are basically no standards at all, and therefore nothing to which you can expect browsers to conform.

The fact that you think doing that solved your problems is bad logic: "Post hoc, ergo propter hoc" is a logical fallacy so old that it has both a pretentious latin name and a Wikipedia entry.

I did something,
Then the problem went away
Therefore what I did solved the problem.

Common example:

My elbow hurt
I drank the urine of a virgin cow
Now my elbow doesn't hurt
Therefore, the urine of a virgin cow cured my elbow pain.

Very sloppy thinking. Well, you are welcome to your dream world if you like it, but if you do it's not very compatible with getting any useful help from this site.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Man, you are very

Man, you are very ignorant.

I have clearly seen that the particular doctype I have been using for my webpage - "XHTML strict" I believe - has caused an effect on the rendering of elements within the page that I do not desire.

Why is that so hard for you to accept?

If that is not the answer then why don't you provide a more logical one of your own???

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Ornette wrote:Man, you are

Ornette wrote:
Man, you are very ignorant.

I shall reply to that by referring you to an earlier post about the DTD:

http://www.csscreator.com/node/22010

in which I wrote

thepineapplehead wrote:
codemonk3y wrote:
doctype wasn't the issue, as usual

Start respecting the forum rules and advice of people who give up their time for free or you'll soon find your questions ignored.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Ornette wrote:Man, you are

Ornette wrote:
Man, you are very ignorant.

I am indeed ignorant of many things. I don't understand even more things. I don't, for instance, why someone coming to a site asking for help feels the need to reject advice and substitute his own beliefs. At least, if you are going to be doing that I don't understand why you are wasting your time asking for advice. And our time too.

Quote:
I have clearly seen that the particular doctype I have been using for my webpage - "XHTML strict" I believe - has caused an effect on the rendering of elements within the page that I do not desire.

I can clearly see with my own eyes that the world, by and large, is flat. I know I asked you science fellows how to get from here to Russia but then you start giving me guff about great circles that I can plainly see are wrong. Now give me some good advice!

Quote:
Why is that so hard for you to accept?

I think we both know which one of us is the one not doing the accepting around here... As I said, feel free to do as you like. When you get in trouble with that mistaken approach and come back asking for more help we might enjoy playing "I told you so" with you, but if so that would not reflect well upon us...

Quote:
If that is not the answer then why don't you provide a more logical one of your own???

Uh, you refuse to give us what we, up front and explicitly, told you we need if we are going to help you, and then you complain that we aren't helping you!

Well, the doctor can prescribe you some pills, but he can't make you take them. If you choose not to take them it's a bit nervy, though, to then complain that the doctor's prescription isn't working!

All we ask for is valid html and valid html means a correct doctype. If you can't give us that fine, but why would you then get mad if we don't help you?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Oh for FFS why can noone

Oh for FFS

why can noone accept that I have discovered that in this instance, removing the doctype has addressed the problem?

Its like, as soon as I say that everyone shutsdown and starts going on about the importance of a valid doctype. Am I denying that though? I mean, honestly:

My page is already validated with a correct doctype and so on. It currently exists and is hosted on an internet site. I have recently come back to it to update it and iron out any niggles with it I am not happy about.

One of them is that I have discovered that in Mozilla Firefox,

i) given that I have applied specific dimensions to each image,
ii) and that the images are not available,

the browser does not, as I would normally expect, uphold an empty 'outlined' frame designating the space that the image would have assumed, but instead collapses that space to nothing.

This to me is not acceptable, if for instance a dial-up user is viewing my web page, then it is very possible that the images may not get loaded. In which instance I would still want the overall integrity of the page to be upheld, and for each missing image a empty, 'outlined' frame appears in its place.

I have posted about this, and have tried as suggested:

a) using the 'width' and 'height' properties within the actual HTML to address the issue, with no success.

b) contemplated 'floating' the images as also suggested, until realising that this would only mess up everything else.

Other than going with my own original 'lamented' option - enclosing every image within a 'div' and applying the dimentions to that instead, (something that would involve lots of unsightly extra markup and which would be an unappealing option), I have had no solution offered or any possible explanation or reason as why Firefox would not behave in the manner I (quite reasonably too, might I add) would expect it to.

By accident I discovered, by creating a simple webpage to illustrate the problem I am having, that without the presence of the "XHTML Strict" doctype that I was using in the original document, this unexpected and unwanted behaviour did not occur any more!

Why, why why why do you feel the need to argue against this simple, observed fact???

Am I denying the importance of having a valid and appropiate doctype in a webpage? Well?

The fact is that this particualr doctype is in this instance not appropiate for my needs. Instead of being all bolshie and pompous, why dont you direct your efforts into perhaps suggesting why this particular doctype would cause this unwanted behaviour, and even going as far as to perhaps suggesting something that would resolve this current issue I am facing????????

Ornette
Offline
Enthusiast
Last seen: 8 years 8 weeks ago
Timezone: GMT+1
Joined: 2006-02-06
Posts: 68
Points: 0

Ed Seedhouse wrote: I

Ed Seedhouse wrote:
I don't, for instance, why someone coming to a site asking for help feels the need to reject advice and substitute his own beliefs.

When, exactly, did I ever do that?

Ed Seedhouse wrote:
Uh, you refuse to give us what we, up front and explicitly, told you we need if we are going to help you, and then you complain that we aren't helping you!

What, exactly, did you "up front and explicitly" ask for did I not give you?

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Ornette wrote:Ed Seedhouse

Ornette wrote:
Ed Seedhouse wrote:
I don't, for instance, why someone coming to a site asking for help feels the need to reject advice and substitute his own beliefs.

When, exactly, did I ever do that?
This whole thread.

Quote:

Ed Seedhouse wrote:
Uh, you refuse to give us what we, up front and explicitly, told you we need if we are going to help you, and then you complain that we aren't helping you!

What, exactly, did you "up front and explicitly" ask for did I not give you?

The entire code of your problem site, or a link to it. We ask for these in the "sticky" messages at the top of each forum message list, and we expect that folks will have read these before they post questions.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 45 weeks 6 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Ornette wrote:why can noone

Ornette wrote:
why can noone accept that I have discovered that in this instance, removing the doctype has addressed the problem?

Because these folks have, between them. many many years of experience coding web pages. Because this is a site dedicated to helping people with CSS problems and that experience shows quite clearly that without a valid doctype and valid html no browser can be expected to follow any standard simply because, without these things, there is no standard to follow.

You choose to put your bad logic ahead of our advice. Fine, it's your life, and if you want to continue having more problems that's your privilege.

Frankly I think at this point the moderators should lock the topic because we're talking past each other and nothing is being said or heard and it's all become pointless. I, at least, hereby pledge not to post anything more on this thread. Bye.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Just before I lock (I won't

Just before I lock (I won't but lets pretend Wink ) this thread as it's going nowhere;

In quirks mode the proscribed nature of the img element was display:block, this was changed with full standards mode to be display:inline, so removing the DTD as put your page into quirks mode thus FF will render the image set dimensions with no actual image supplying the dimensions, why IE still displays the image dimensions without an image present is a mystery known only to itself probably.

Gary supplied you with the answer earlier, set the img to display:block then it will honour the dimensions albeit without a border but that you can set yourself.

it's not that acurate to refer to this as a 'problem' it's not as such, but it will be a problem if you think that to solve this rather minor point it's worth shoving the whole page into quirks mode.

Hugo.

Lets now mark this thread as having run it's course please Smile

I invoke 'Hitler' and 'Nazis'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 15 hours 36 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Aw, bracklefratz! Thread

Aw, bracklefratz!

Thread closed.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 year 8 weeks ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9668
Points: 801

Hugo wrote: In quirks mode

Hugo wrote:

In quirks mode the proscribed nature of the img element was display:block, this was changed with full standards mode to be display:inline, so removing the DTD as put your page into quirks mode thus FF will render the image set dimensions with no actual image supplying the dimensions, why IE still displays the image dimensions without an image present is a mystery known only to itself probably.

Hugo wins the internet.

Thread over.

Verschwindende wrote:
  • CSS doesn't make pies