Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 05-27-2007, 02:08 AM   PM User | #1
kosstr12
Regular Coder

 
kosstr12's Avatar
 
Join Date: Apr 2007
Location: Woodstock, Georgia
Posts: 428
Thanks: 7
Thanked 5 Times in 5 Posts
kosstr12 is on a distinguished road
Question Image height and width

Personally i dont think that you need to use height and width attributes on images. I mean, i think they are ok if you are trying to make an image smaller. But, if you try to make the image bigger it blurs, and doesn't look well.
What do you think about the attributes?


Thanks,
kosstr12
kosstr12 is offline   Reply With Quote
Old 05-27-2007, 02:20 AM   PM User | #2
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
Some browsers actually load the page faster if it knows the image width and height. I recommend that you set them. When not set some browsers will actually render the page incorrectly but will render correctly on next page load because it has the images cached and knows their height and width.
__________________
||||If you are getting paid to do a job, don't ask for help on it!||||
_Aerospace_Eng_ is offline   Reply With Quote
Old 05-27-2007, 02:21 AM   PM User | #3
whizard
Senior Coder

 
whizard's Avatar
 
Join Date: Jan 2005
Location: Philadelphia, PA, USA
Posts: 1,457
Thanks: 10
Thanked 37 Times in 37 Posts
whizard will become famous soon enoughwhizard will become famous soon enough
They're good to use, because they let the browser know how big the image is so it can leave enough space while the image is still loading. If you don't use them, the page seems to load, and then you start to read, only to have the page shift all around in a very bothersome manner.

Be nice to your users
Dan
__________________
If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.
Step 1: Learn. Step 2: Search. Step 3: Post here.
whizard is offline   Reply With Quote
Old 05-27-2007, 05:14 PM   PM User | #4
rmedek
Senior Coder

 
Join Date: Nov 2003
Location: Minneapolis, MN
Posts: 2,879
Thanks: 2
Thanked 65 Times in 56 Posts
rmedek is on a distinguished road
Quote:
Originally Posted by _Aerospace_Eng_ View Post
When not set some browsers will actually render the page incorrectly but will render correctly on next page load because it has the images cached and knows their height and width.
I ran into that issue and it drove me insane for over a year before I figured it out.

Besides, anything to help prevent the page from half rendering, then moving into position (like a page does when it's using a table layout) is okay with me.
__________________
drums | web
rmedek is offline   Reply With Quote
Old 05-27-2007, 06:06 PM   PM User | #5
koyama
Senior Coder

 
koyama's Avatar
 
Join Date: Dec 2006
Location: Copenhagen, Denmark
Posts: 1,246
Thanks: 1
Thanked 5 Times in 5 Posts
koyama will become famous soon enough
The main arguments above for including a width and height attribute seems to be to avoid disturbed rendering. That makes good sense to me. Still, it seems that the question is still open whether one should specify width and height as HTML attributes or CSS properties. I'm quite sure that both methods would prevent the rendering issue.

I imagine that one may argue that HTML width and height attributes should refer to the images intrinsic dimensions while CSS width and height properties should refer to the dimensions that should be used for presentation. In fact, these may differ. Following that idea, the HTML width and height attributes would ensure smooth rendering of the non-styled page as when styles are disabled while CSS width and height properties would ensure smooth rendering of the styled page.

Quote:
Originally Posted by rmedek View Post
I ran into that issue and it drove me insane for over a year before I figured it out.
Anyone knows of a source describing this bug? Which browsers does it happen in? It would be interesting to see a demo where the bug shows up every time. Even if it is a caching issue, it should be possible for demonstration purpose to prevent image caching e.g. be appending a random string to the image url.
koyama is offline   Reply With Quote
Old 05-27-2007, 06:28 PM   PM User | #6
_Aerospace_Eng_
Supreme Master coder!


 
_Aerospace_Eng_'s Avatar
 
Join Date: Dec 2004
Location: In a place far, far away...
Posts: 19,293
Thanks: 2
Thanked 1,044 Times in 1,020 Posts
_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light_Aerospace_Eng_ is a glorious beacon of light
Firefox seemed to do this. It may have been earlier versions though. Hmm I did a search in google and it seems it happens in other browsers as well mainly the standard compliant ones. This is what I searched for "firefox renders page incorrectly on first load"
__________________
||||If you are getting paid to do a job, don't ask for help on it!||||
_Aerospace_Eng_ is offline   Reply With Quote
Old 05-27-2007, 08:50 PM   PM User | #7
rmedek
Senior Coder

 
Join Date: Nov 2003
Location: Minneapolis, MN
Posts: 2,879
Thanks: 2
Thanked 65 Times in 56 Posts
rmedek is on a distinguished road
Quote:
Originally Posted by koyama View Post
it seems that the question is still open whether one should specify width and height as HTML attributes or CSS properties. I'm quite sure that both methods would prevent the rendering issue.
When I was more pedantic about keeping everything in the stylesheet I attempted to keep the width and height attributes as CSS styles. After a while, though, I realized that an inline image _was_ content (albeit a picture rather than text) and so it makes perfect sense to keep the attributes in the HTML. But either way helps the rendering.


Quote:
Anyone knows of a source describing this bug? Which browsers does it happen in? It would be interesting to see a demo where the bug shows up every time.
The site where I had the issue was http://cathyrivers.com, one of the first sites I've ever built. I was using png images for the headlines (News, Music, etc.) that were placed in div containers and without height and width attributes. The rendering drove me batty for a long time, it consistently loaded incorrectly in any Mozilla-based browser, until refresh. I ended up adding a height to the container div and that solved the problem.
__________________
drums | web
rmedek is offline   Reply With Quote
Old 05-28-2007, 03:03 AM   PM User | #8
koyama
Senior Coder

 
koyama's Avatar
 
Join Date: Dec 2006
Location: Copenhagen, Denmark
Posts: 1,246
Thanks: 1
Thanked 5 Times in 5 Posts
koyama will become famous soon enough
Quote:
Originally Posted by _Aerospace_Eng_ View Post
Firefox seemed to do this. It may have been earlier versions though. Hmm I did a search in google and it seems it happens in other browsers as well mainly the standard compliant ones. This is what I searched for "firefox renders page incorrectly on first load"
Thank you for your input. I did some searches on Google as you suggested, but seemed to get mixed results with no answers.

I am sure that there is an issue with Firefox 2.0.0.3 with occasionally incorrect rendering since I have seen it myself. Recently, there was a discussion here at CF with a similar issue. Remember? http://codingforums.com/showthread.php?t=114316

I managed to do some further testing and excluded some possibilities. I will shortly update the thread will a live example and provide some screenshots.
Quote:
Originally Posted by rmedek View Post
After a while, though, I realized that an inline image _was_ content (albeit a picture rather than text) and so it makes perfect sense to keep the attributes in the HTML.
This sounds reasonable. The intrinsic width and height of the image are 'real' properties of the image. As such they belong in the HTML document.
Quote:
Originally Posted by rmedek View Post
The site where I had the issue was http://cathyrivers.com, one of the first sites I've ever built.
Thanks for showing me that page. I do not doubt that you had such an issue. However, I downloaded the page and tried to reconstruct the buggy page by removing the height for #container. Unfortunately I didn't have success with that.

Maybe I am missing something, but I was just wondering why I didn't see width and height attributes for the images on that page? I thought that you had found that they were necessary for the page should render correctly?
koyama is offline   Reply With Quote
Old 05-28-2007, 03:11 AM   PM User | #9
rmedek
Senior Coder

 
Join Date: Nov 2003
Location: Minneapolis, MN
Posts: 2,879
Thanks: 2
Thanked 65 Times in 56 Posts
rmedek is on a distinguished road
Quote:
Originally Posted by koyama View Post
Maybe I am missing something, but I was just wondering why I didn't see width and height attributes for the images on that page? I thought that you had found that they were necessary for the page should render correctly?
I should stress the “one of the first sites I've ever built” part.
__________________
drums | web
rmedek is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:18 PM.


Advertisement
Log in to turn off these ads.