Menu
a newbie here.
I'm trying to learn responsive design and in doing so had just come across max-width prob with ie9 while it works as I expected in Chrome. It simply just wont adjust the max width of an image I'm trying to scale when I adjust the browser window. Let me just show you the html code and the css.
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is a test</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/resetmin.css" />
<link rel="stylesheet" type="text/css" href="css/test3.css" />
</head>
<body>
<div style="background-color:black; height:35px;"></div>
<div id="container">
<div class="content">
<div class="header">
<h1>This is my header</h1>
</div>
<div class="pic">
<img src="image001.jpg" alt="Just a picture 815px width and 500px height"></img>
</div>
<div class="imageControl">
</div>
<div class="clear"></div>
</div>
<div class="content">
<div class="header">
<h1>This is my header</h1>
</div>
<div class="pic">
<img src="image002.jpg" alt="Just a picture 500px width and 815px height"></img>
</div>
<div class="imageControl">
</div>
<div class="clear"></div>
</div>
<div class="sideBar"></div>
<div class="padding"></div>
</div>
<div style="background-color: #555; width: 960px; height: 485px; margin: 0 auto; clear: both;"></div>
</body>
</html>
CSS code: test3.css
body {
color: #333;
font: 100%/1.5 Cambria, Georgia, serif;
background: #ece6d6 url(_assets/bg-light.png) repeat;
/* margin: 0 auto; */
}
img {
display: block;
max-width: 100%;
}
#container {
width: 960px;
margin: 0 auto;
background-color: #aaa;
}
.header {
height: 40px;
border-top: 1px solid #000;
}
.content {
background-color: grey;
float: left;
margin: 15px 15px 0px 15px;
}
.pic {
width: auto;
padding: 15px;
background-color: #777;
float: left;
/* position: relative;
top: 15px;
left: 15px; */
}
.imageControl {
width: 85px;
height: 350px;
background-color: #ccc;
float: right;
/* position: relative;
top: 15px;
left: 15px; */
}
.clear {
clear: both;
}
.padding {
padding-bottom: 15px;
clear: both;
}
.sideBar {
width: 300px;
height: 250px;
margin: 15px 15px 0px 0px;
float: right;
background-color: #333;
}
h1 {
font: bold 1.6em Cambria, Georgia, serif;
}
@media screen and (max-width: 980px) {
#container {
width: 95%;
}
.sidebar {
width: 30%;
}
.sidebar .widget {
padding: 8% 7%;
margin-bottom: 10px;
}
}
Please take a look and review it. It is still a work in progress, so please don't mind the messy responsive design when u adjust the browser (my problem rite now is the image, as it won't scale down in ie9).
Thanks. And if there is still something unclear, pls ask and I will try to respond to it.
725
asked Jun 23 '26 09:06
Found it. After a lot of tinkering, this is my solution as for now. This it what i add/edit in my html and css codes.
Edited HTML code:
<div class="pic">
<img class="imageObject" src="image001.jpg" alt="Just a picture 815px width and 500px height"></img>
</div>
Added CSS code:
img.imageObject {
margin:0 auto;
width:100%;
max-width:50.3975em;
}
As for why, I'm still looking for the explanation why. But rite now this will do the trick for me.
153
answered Jun 25 '26 22:06
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With