Msg#: 4424166 posted 4:26 pm on Mar 2, 2012 (gmt 0)
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...
Msg#: 4424166 posted 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.
Msg#: 4424166 posted 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.
Msg#: 4424166 posted 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!
Msg#: 4424166 posted 3:51 pm on Mar 18, 2012 (gmt 0)
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 :)