The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Image not resizing in IE, Can't get things to work correctly
Reedly
post Mar 4 2009, 01:29 PM
Post #1





Group: Members
Posts: 5
Joined: 4-March 09
Member No.: 7,962



Hello all - first post here at WDG.

I'm having trouble with an image resizing in IE(7). I have created the following website: My Webpage. If you open the site in Google Chrome, or Firefox, the main image in the middle (Portfolio) section resizes to a percentage of the table, depending on the browser size. Better explained -- If you resize your browser by dragging the edges, the image would resize accordingly.

I've done this by mixing html code with CSS, (which I'm incredibly new at.) It appears I've done something wrong, as IE won't resize the image correctly.

Below is the horrible 'mixed' up code that should create the image resizing. Could someone please help me with the correct way to code this for IE, FF, and Chrome


CODE
<div style="width: 95%;" align="center"><font class="white"><font size="3"><b>Clockwork Pictures:</b></font></font></div>
                                  
                                   <div style="width: 99%;">          
                                          <p>
                                          <img name="mainimage" src="clockwork_sample1.jpg" style="width: 95%; border:7px solid #222222;" title="Clockwork Pictures sample image" alt="Clockwork Pictures sample image"></p>
                                   </div>                                  

                                   <div style="width: 95%" align="left">
                                          <p>
                                          <font class="white">Additional page views:  
<a href="java script:changeImage('clockwork_sample1.jpg')" class="grey"><font size="3">1</font></a> 
<a href="java script:changeImage('clockwork_sample2.jpg')" class="grey"><font size="3">2</font></a> 
<a href="java script:changeImage('clockwork_sample3.jpg')" class="grey"><font size="3">3</font></a><br>
                                          View Website: <a href="http://www.clockworkpictures.net" class="blue" target="_blank">www.ClockworkPictures.net</a></font></p>
                                   </div>
                                  
                                   <div style="width: 95%" align="justify">
                                          <p><font class="grey">Vestibulum pede ante, tincidunt ac, imperdiet dignissim, mattis vel, dui. Cras nunc. Fusce eu turpis. Aenean tincidunt lorem ac dolor. Quisque ut magna ac arcu aliquet malesuada. Quisque sagittis elit vitae est consectetur fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</font></p>
                                   </div>


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reedly
post Mar 4 2009, 02:10 PM
Post #2





Group: Members
Posts: 5
Joined: 4-March 09
Member No.: 7,962



I just realized that if I plug the above code into it's own html page, it works correctly in Internet Explorer. But when it's within the actual site code, it doesn't work correctly, only in IE.

Strange. Is it something to do with the <div> inside the table?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 4 2009, 02:41 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I'd say it has to do with the code you don't show us together with the code you do show us. URL to the whole thingamajig?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reedly
post Mar 4 2009, 02:54 PM
Post #4





Group: Members
Posts: 5
Joined: 4-March 09
Member No.: 7,962



Pandy, thanks for the reply. I also agree that it must be something in the table layout...but I can't figure it out yet. Oh, and I posted a link to the full site in my first post.

Thanks for taking a look at it!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 4 2009, 04:31 PM
Post #5


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sorry, I tend to miss the URLs lately. blush.gif

It's because the whole thing is wrapped in a table. I'm not sure how this works, but I think IE refuses to make the table smaller than the image's real width, so both the table and the image stop shrinking there. You can see this if you wrap a simple one cell table around the sample code, the one that works on its own.

In a way I find this to be the more logic approach. The table's width depends on the width of its content and the width of the content depends on the width of the table - that sounds like it shouldn't work.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Reedly
post Mar 4 2009, 04:34 PM
Post #6





Group: Members
Posts: 5
Joined: 4-March 09
Member No.: 7,962



Hmmm...I guess that means I need to drop the tables completely somehow and go CSS, but that's beyond me at this point. I wonder why it works in FF and Google?

Can you, or anyone else think of any possible IE workaround for making an image resize to a percentage within a table?

Thanks Pandy for the update!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th March 2024 - 05:54 AM