Solved

CSS, image size 100% and Internet Explorer

Posted on 2012-04-05
2
167 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 500 total points
Comment Utility
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
Comment Utility
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

762 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now