Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS, image size 100% and Internet Explorer

Posted on 2012-04-05
2
Medium Priority
?
197 Views
Last Modified: 2012-04-28
I have images that are 100% width and height using CSS. This works beautiful in FireFox, Chrome and most browsers, but not Internet Explorer (9).  The problem in IE is that the 100% width seems to be 100% width of the screen and not the browser window.  So if I have the browser window in IE at maybe 50% of the screen, the image is stretched way beyond the browser window.

Below it is the logo that I want to stretch 100% in height and width.

<body bgcolor="#635a49" onload="MM_preloadImages('../im/home_d.gif','../im/innovation_d.gif','../im/products_d.gif','../im/news_d.gif','../im/warranty_d.gif','../im/dealerlocator_d.gif','../im/contact_d.gif')">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
  <tr>
    <td bgcolor="#212121"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center" bgcolor="#000000"><div id="logodiv"><img src="../im/factory-logo2.jpg"   class="logostr"/></div></td>
      </tr>
      <tr>


 This is the CSS
                  
                   .logodiv {
            height:100%;
            width:100%}
       .logostr {
            height:100%;
            width:100%}
0
Comment
Question by:christer200
  • 2
2 Comments
 
LVL 7

Accepted Solution

by:
Dewmec earned 1500 total points
ID: 37822330
Hi christer200,

I am hoping that I have an easy fix for you at first glance. You don't have the ending tags for the lines on both of your width properties, which may be causing the issue in IE and not the other browsers. What I mean by ending tag is shown below:

width:100%;}

Open in new window


with the " ; " added, instead of

width:100%}

Open in new window


as you currently have it. I hope this helps.
0
 
LVL 7

Expert Comment

by:Dewmec
ID: 37822342
P.S. Also, make sure you have an ending tag for table ... </table>. I'm sure you already do and it was just not part of the code you posted. Adding those couple of things to the code allows it to work properly for me at any size on the screen in the IE9 browser.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question