Forum Moderators: not2easy
Here's the issue:
I've got a content div that is 300px wide. Inside this is an h1 that is centered. Underneath this is another bit of text also centered.
Below the text is a form that contains two things. An text input box and a submit button below that.
I have everything setup to be centered and everything is working except that the input text box and the submit button are shifted to the right about 10-15 pixels in any version of ie6.
In ie7 and FF everything's perfect.
ANY help would be appreciated as this is really starting to irritate me.
The relevant code is below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML:
<div class="search_zip">
<h1>Text</h1>
<form method="POST" name="somename" action="page.php">
<input type="hidden" name="type" value="value" id="type"/>
<label>Some Centered Text</label><br />
<input type="text" name="name" id="search_zip" />
<input type="submit" value="" class="button_zip" />
</form>
</div>
Relevant CSS:
#header .search_zip{width:300px;position:absolute;top:85px;left:250px;text-align:center;}
.search_zip input{width:140px;background:#fafafa;height:30px;font-size:19px;font-weight:bold;margin-top:7px;text-align: center;color:#00529c;}
.search_zip label{text-align:center;font-size:19px;}
.search_zip .button_zip{border:0px;width:177px;height:56px;margin-top:10px;background: url('/images/go.jpg') transparent no-repeat top left;}
Any help would be appreciated.
It is centered for me in IE6. The border that I added shows that FF is handling 'padding' in #header a bit differently than Opera or IE.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
#header .search_zip {
width: 300px; position: absolute; top: 85px; left: 250px; text-align: center; border: .2em solid #000;
}
.search_zip input {
width: 140px; background: #fafafa; height: 30px; font-size: 19px; font-weight: bold; margin-top: 7px; color: #00529c; text-align: center;
}
.search_zip label {
font-size: 19px;
}
.search_zip .button_zip {
border: 0; width: 177px; height: 56px; margin-top: 10px; background: url(aaa.jpg) transparent no-repeat top left; cursor: crosshair;
}
</style>
</head>
<body>
<div id="header">
<div class="search_zip">
<h1>
Centered H1
</h1>
<div>
<form method="POST" name="somename" action="page.php">
<input type="hidden" name="type" value="value" id="type"/>
<label>Some Centered Text</label><br />
<input type="text" name="name" id="search_zip" value="Text box." />
<input type="submit" value="" class="button_zip" />
</form>
</div>
</div>
</div>
<!--
I've got a content div that is 300px wide. Inside this is an h1 that is centered. Underneath this is another bit of text also centered.Below the text is a form that contains two things. An text input box and a submit button below that.
I have everything setup to be centered and everything is working except that the input text box and the submit button are
shifted to the right about 10-15 pixels in any version of ie6.
In ie7 and FF everything's perfect.
-->
</body>
</html>
I've been using one of the browser cam sites to check various versions and in xp and 2000, ie6 has them shifted.
If only there was a way to get the developer toolbar to work on ie6 when ie7 is already installed.
