Home/ Questions/Q 810911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T00:57:35+00:00

I have a block level element which I am centering on the page. I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    A div with specific width and margin-left: auto; margin-right: auto should be centered also on ie6.

    • 0