CSS: Centering a floated block level element in IE6 (It almost works)
- by Louis W
I have a block level element which I am centering on the page. I have gotten it to work for all other browsers except IE6 where it ALMOST works.
http://tinyurl.com/28sh9eq
If I view the page in IE6 the red box is slightly off center of the pink one in IE. If I then resize the browser window it snaps into place where I want it. Uhhhhh.... yea.... what gives? How come resizing the window makes it work? I have also tried setting an explicit width on the wrapper with no avail.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<style type="text/css">
BODY {
text-align: center;
font-family: Arial;
}
.row_wrap {
height: 100px;
margin-bottom: 30px;
background-color: pink;
}
.row {
float: right;
position: relative;
left: -50%;
text-align: left;
clear: both;
}
.button1 {
color: #FFF;
height: 36px;
text-decoration: none;
position: relative;
padding: 0 30px;
background: url('button.gif') no-repeat 0 0;
display: block;
float: left;
left: 50%;
}
.button1 .end {
width: 20px;
height: 37px;
position: absolute;
right: -2px;
top: 0;
background: url('button.gif') no-repeat right 0;
}
.button1 .text {
font-size: 16px;
font-weight: bold;
white-space: nowrap;
height: 36px;
padding-top: 7px;
display: block;
float: left;
}
.button1 .text .arrow {
vertical-align: 1px;
}
</style>
</head>
<body>
<h2>RTL: Button 1</h2>
<div class="row_wrap">
<div class="row" dir="rtl">
<a href="#" class="button1">
<span class="end"></span>
<span class="text"><span class="arrow">»</span> Hello 1.</span>
</a>
</div>
</div>
<h2>RTL: Button 1-2</h2>
<div class="row_wrap" style="width: 400px;">
<div class="row" dir="rtl">
<a href="#" class="button1">
<span class="end"></span>
<span class="text"><span class="arrow">»</span> Hello 1.</span>
</a>
</div>
</div>
<br/><br/>
<h2>Normal: Button 1</h2>
<div class="row_wrap">
<div class="row">
<a href="#" class="button1">
<span class="end"></span>
<span class="text"><span class="arrow">»</span> Hello.</span>
</a>
</div>
</div>
</body>
Thanks for your help.
