Welcome to WebmasterWorld Guest from 54.197.151.150

Forum Moderators: not2easy

Message Too Old, No Replies

image filling page instead of div in IE9

     
4:26 pm on Mar 2, 2012 (gmt 0)

New User

5+ Year Member

joined:Sept 27, 2010
posts: 4
votes: 0


Hi,

I am busy with a liquid layout and everthing works fine in most browsers except the latest IE9.
I made a header part with 6 images nicely after each other and all of them must use 15% of the screen width. On the left and right side I kept some space.
My approach is to use a div with an image in it that must fill the total 15% and nothing more.

Who can tell me how I can fix this issue in IE9. It looks like that the images don't respect the 15% of the above div and all other browsers like Chrome, FF and IE are oke.

Here is the code:
<div id="header-section">
<div id="hdr-col-1">
</div>
<div id="hdr-col-2">
<img id="Image2" alt="image" src="~/images/xx.jpg" style="border:0;width:100%" runat="server" />
</div>
<div id="hdr-col-3">
<img id="Image3" alt="image" src="~/images/yy.jpg" style="border:0;width:100%" runat="server" />
</div>
...etcetera...

The relevant CSS part looks like this:
#header-section {
position:relative;
left:0;
top:0;
}
#hdr-col-1 {
position:absolute;
top:0;
left:0;
width:2%;
}
#hdr-col-2 {
position:relative;
top:0;
left:2.5%;
width:15.5%;
padding:.5%;
background-color:#abb202;
}
#hdr-col-3 {
position:absolute;
top:0;
left:18%;
width:15.5%;
padding:.5%;
background-color:#abb202;
}
4:38 pm on Mar 2, 2012 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:3050
votes: 114


Without seeing any more than you have here I would suggest that you remove inline styling: style="border:0;width:100%" and style your image borders in css. I would also suggest staying away from decimal percentages in your css and let the container set the image width. I could be wrong, but that is all I could suggest from the snippets posted.
4:41 pm on Mar 2, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2187
votes: 23


Is there a reason the images have to be in their own <div>? Why not put them in line <img src=""><img src=""> etc then set the <div> to the width of the combined images width and the height ti the image height with no padding. You can also add white-space: nowrap to the <div> using this method.

Marshall
10:14 am on Mar 4, 2012 (gmt 0)

New User

5+ Year Member

joined:Sept 27, 2010
posts: 4
votes: 0


Gents,
I solved the problem. The issue doesn't really belong here.
I just noticed that the IE9 didn't pickup the CSS file at all.
And because I recently was upgraded to an IIS 7.5 server and I also changed the MIMETYPE settings in my web.config for CSS files. That did the trick:
What went terrible wrong in my web.config is this:
<remove fileExtension=".css" />
<mimeMap fileExtension=".css" mimeType="text/css; charset=UTF-8" />
Just keep it to this:
<remove fileExtension=".css" />
<mimeMap fileExtension=".css" mimeType="text/css" />
So no explicit charset settings here!

Thanks anyhow.

Kees
3:51 pm on Mar 18, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0


Hey KeesH,

I'm coming to this very late - but welcome back to css. Pleased you have this fixed, and thanks for posting the solution. A good reminder to look a little more broadly because style issues aren't always in the css itself :)
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members