I have the following CSS. This works fine but not in IE and Opera.
#content
{
position: absolute;
left: 0;
right: 0;
min-width: 750px;
max-width: 1100px;
min-height: 700px;
margin-left: auto;
margin-right: auto;
background-color: #FFF;
top: 150px;
}
You do realize you have two min-widths in there, don't you? And without a page to look at, it's hard to diagnose the problem. Like exactly what isn't working?
Thanks Dandello. I have corrected the error you pointed out and it works fine in IE but it doesn't work in Opera. What I'm trying to do is to center the DIV with id = 'container'.
HTML
<!DOCTYPE html>
<head>
<title>HOME PAGE</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<div id="head"></div>
<div id="container"></div>
</body>
</html>and my CSS
html, body
{
margin: 0;
padding: 0;
}
body
{
position: relative;
min-height: 900px;
background-color: #C6C6AE;
margin-left: auto;
margin-right: auto;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana;
}
#head
{
height: 250px;
}
#container
{
position: absolute;
top: 20px;
left: 0;
right: 0;
min-width: 775px;
max-width: 1100px;
min-height: 1000px;
border: 1px solid #FFF;
margin-left: auto;
margin-right: auto;
}Generally, the body doesn't need a position attribute since it automatically takes up all (or at least most) of the browser window. (But that's just an observation.)
What I think is happening is while the other browsers are using the two margins the center the div (and ignoring the left:0 and right:0 since the margin attributes are being applied later), Opera is anchoring it due to the position:absolute; left:0. As far as it's concerned, the margins are contradictory to the position attribute and position wins.
My bet is if you comment out the left:0 and right:0, it will behave.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.