homepage Welcome to WebmasterWorld Guest from 107.20.7.65
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Accredited PayPal World Seller

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library : Charter : Moderator: open

CSS Forum

    
image filling page instead of div in IE9
KeesH




msg:4424168		 4:26 pm on Mar 2, 2012 (gmt 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;
}

 

not2easy




msg:4424180		 4:38 pm on Mar 2, 2012 (gmt 0)

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.
Marshall




msg:4424182		 4:41 pm on Mar 2, 2012 (gmt 0)

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
KeesH




msg:4424685		 10:14 am on Mar 4, 2012 (gmt 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
alt131




msg:4430580		 3:51 pm on Mar 18, 2012 (gmt 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 :)
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved