BlogHarbor Home Page
FAQFAQ  SearchSearch  MemberlistMemberlist  UsergroupsUsergroups  UsergroupsRSS   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
Images on sidebars
 
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks
View previous topic :: View next topic  
Author Message
pembeci



Joined: 24 Sep 2004
Posts: 24

PostPosted: Tue Oct 05, 2004 3:06 pm    Post subject: Images on sidebars Reply with quote

I am trying to display an image in one of my columns with:

Code:
<div class="component">
<div class="componentHead">Image</div>
<img src=".." style="width: 100%">
</div> <!-- component -->


So the image should be resized according to the parent object's (in this case the component) size if it is bigger than the column. This works fine with Firefox but in IE 5.5 the image is displayed in full size and the column gets fat. I checked the web but as far as I can google, I didn't find anything on why the % will not work like that in IE too.

Any suggestions?

(I guess I can define the column and image size in pixels to handle this but I like the current column width which is percentage of the window.)
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Wed Oct 06, 2004 11:49 pm    Post subject: Re: Images on sidebars Reply with quote

There are a lot of bugs in Internet Explorer's implementation of CSS. Here are some links I found on the subject of IE bugs:

If you find the solution to your problem, please post it. I'd be very interested in hearing the workaround to this one...
Back to top
View user's profile Send private message Send e-mail Visit poster's website
pembeci



Joined: 24 Sep 2004
Posts: 24

PostPosted: Fri Oct 08, 2004 5:19 pm    Post subject: Reply with quote

Thanks John. These would be helpful. I was searching using phrases like "cross-browser", "CSS compliant", it never occured to me searching with "bug". Actually, it should be considered a bug since Microsoft claims on their own page on 'width':
Quote:
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/width_2.asp
percentage : Integer, followed by a %. The value is a percentage of the width of the parent object, whether or not it is specified explicitly. Negative values are not allowed.

They say it is CSS1 stardards compliant but it isn't so bug is the right term.

Unfortunately, I couldn't find a workaround on this one. When you fix the left column size in pixels, the images are resized accordingly but I.E. still saves some space according to the actual image size and as a result the center part and right column is pushed to the right. I guess it is related to one of the bugs reported in the second link you sent.

In fact, I read somewhere that when resizing is left to browsers they do a poor job and it slows down loading of the page. So now, I am setting the left column width, resizing the images in an image editor beforehand and use them in full size.

Forum readers should be also aware of the fact that I.E 5.x interprets the box model of CSS differently which means the width of the content is interpreted as less than what is specified. There is a famous hack to handle this:
http://tantek.com/CSS/Examples/boxmodelhack.html
(also explains the problem)

but I hope I won't need to use this and can live with the little cross-browser differences in my layout.
Back to top
View user's profile Send private message
john
Site Admin


Joined: 16 Mar 2004
Posts: 3434

PostPosted: Sat Oct 09, 2004 12:14 am    Post subject: Reply with quote

Well said, thanks for the excellent summary of issues surrounding the problems with IE and CSS. When you posed your question, I was pretty sure that the problem was related to one if these IE bugs, but I hate unsolvable web design problems... Mad

It's too bad, I really liked the way your page worked before with the dynamically resizing image!
Back to top
View user's profile Send private message Send e-mail Visit poster's website
Search all BlogHarbor support resources.
View previous topic :: View next topic  
Display posts from previous:   
Post new topic   Reply to topic    BlogHarbor Community Forum Index -> Tips and Tricks All times are GMT - 5 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum