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;
}
