Forum Moderators: not2easy
body {
margin: 0;
padding: 0;
background: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
background: #E1CC95;
height: 768px;
width: 1000px;
margin: 20px auto;
position: relative;
}
#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 134px;
width: 1000px;
}
#feature {
height: 376px;
width: 764px;
background: url(images/slices/rack-feature.jpg) no-repeat;
}
#buttons3 {
height: 376px;
width: 236px;
background: url(images/slices/3buttons.jpg);
position: relative;
}
#bullet-1 {
height: 35px;
position: absolute;
top: 97px;
color: #F6CE6E;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 33px;
width: 161px;
}
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 100px;
margin-left: 61px;
font: bold 11px Verdana, Arial, Helvetica, sans-serif;
background: #0000CC;
text-align: left;
}
.fltrt {
float: right;
}
.fltlft {
float: left;
}
.clrflt {
clear: both;
}
Here's the HTML:
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div class="fltlft" id="buttons3">
<div id="bullet-1">Shop For Racks</div>
</div>
<div class="fltrt" id="feature">
<div id="rck_feature">
<ul>
<li>Content for this area</li>
<li>Take advantage of the protection that your sax cases are designed to ensure for your fine instruments.</li>
<li>Minimize required storage space.</li>
<li>Easily store and access each of your saxes without accidentally toppling other cases.</li>
<li>Eliminate scuffed walls and crowded closets.</li>
<li>Easily adjustable for different size and shaped baritone, tenor, alto, and soprano sax cases</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It does make sense to think of it that way.
is this the kind of workaround you were referring to?
<!--[if IE]>
<style>
#rck_feature {
position: absolute;
left:250px;
}
</style>
<![endif]-->
Your conditional comment should be more specific. The way you wrote it, it selects *all* versions of IE, and I'm still hoping all these bugs won't make it to IE8.
I'd suggest something like:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if IE lt 8]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
Conditional comments are a good way to deal with inconsistencies, but have you considered saving some code and the need to track extras by just setting
text-align:leftWorks for me on the provided code for on ie6&7, ff2&3, Op9, winSafari3.
To follow the reasoning:
# Put a contrasting background-color on div#feature and comment out the margin-top/left on div#rck_feature. In ie div#rck_feature is drawn "centered" within div#feature.
# Set text-align:left on div#feature (the parent of the problem element) and in all browsers div#rck_feature aligns top/left of its parent.
# Re-apply the margins to div#rck_feature and it is drawn as I think you want in all browsers.
@swa66
One of those IE6 things. [Which IMHO belong in a conditional comment as it's an IE fix]
Recalling text-align is supposed to be inherited, so ie is behaving correctly.But the need to have "text-align:center" is most often (dunno for this specific case due) due to its lack to properly do auto margins on the wrapper. Actually the whole wrapper thing is in many cases only needed for IE as it refuses to let you handle body and html to their full potential.
But the need to have "text-align:center" is most often (dunno for this specific case due) due to its lack to properly do auto margins on the wrapper
margin:0 autoI agree html and body do not directly relate to the posters question, so it is very unclear why they have been raised. But for the purpose of sharing as acurate information as possible, I never have difficulties with html or body in ie either.
The poster asked a simple question, the solution is founded in the recommendations, is not a hack, and is one that works cross-browser whether the ua conforms or not. Given ie wasn't even the culprit in this instance, I'm not seeing the point of posts about claimed "ie deficiencies".
Thanks for the fix which does work. Just changing the text alignment alone in the two divs did the job. I'm not sure while the other two suggestions were necessary. Glad I stimulated some other conversation in addition. It only added to my knowledge.
