Padding issues IE8 v IE7
I've read a bunch of previous posts dealing with the padding problem I'm experiencing between IE8 and earlier versions (IE7,6). I already tried resetting my CSS as mentioned previously, but no luck. Any help would be greatly app开发者_JS百科reciated. Thanks in advance!
The issue is best illustrated with screenshots (see below), but in the css I've attached, I'm fairly certain the problem resides somewhere in the padding in header_left and header_center, which is not properly reflected in IE6/7. My totally widths of the site always add up to 980px, so my math is ok...
IE6 or 7 (Problems)
IE8 (No Problems)
Here is my HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Application Form</title>
<link href="xyx.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#999999">
<div class="wrapper">
<div class="header_separator"></div>
<div class="header_left"></div>
<div class="header_center">
<h2> Lorem ipsum dolor sit amet</h2>
<h2> consectetur adipiscing elit </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet.</p>
</div>
<div class="header_right"></div>
<div class="header_separator">
<hr align="center" color="#00B050" size="5">
</div>
<div class="body_left">
<h3> Lorem ipsum dolor:</h3>
<ul class=noBulletIndent>
<li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a nulla at nunc iaculis pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pellentesque dui quis urna volutpat a posuere nibh imperdiet. Donec eu tellus eu augue pellentesque venenatis ac v</li>
</ul>
</div>
<div class="body_right">
<form action="insert.php" method="post">
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr height=40 valign="top">
<td width="200"><p><strong>Company Name:</strong></p></td>
<td width="430"><input name="companyname" type="text" id="companyname" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Company Website:</strong></p></td>
<td width="430"><input name="website" type="text" id="website" size="40" /></td>
</tr>
<tr height=125 valign="top">
<td width="200"><p><strong>Company Description:</strong></p></td>
<td width="430"><textarea name="description" id="description" rows="6" cols="40"></textarea></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Primary Contact Person:</strong></p></td>
<td width="430"><input name="contactperson" type="text" id="contactperson" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Contact Person Email:</strong></p></td>
<td width="430"><input name="contactemail" type="text" id="contactemail" size="40" /></td>
</tr>
<tr height=40 valign="top">
<td width="200"><p><strong>Contact Person Phone:</strong></p></td>
<td width="430"><input name="contactphone" type="text" id="contactphone" size="40" /></td>
</tr>
<tr>
</table>
<table width="630" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300">
<?php
require_once('recaptchalib.php');
$publickey = "xyz";
echo recaptcha_get_html($publickey);
?>
</td>
<td width="330" align="left" valign="bottom">
<input type="image" name="submit_acre" id="submit_acre" src="images/acre_submit.png" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
Here is my xyz.css:
@charset "utf-8";
/* CSS Document */
.mainbody{
margin-left: auto;
margin-right: auto;
width:980px;
word-spacing: normal;
}
.wrapper {
height: 100%;
width: 980px;
margin-right: auto;
margin-left: auto;
}
.header_separator {
background-color: #FFF;
height: 10px;
width: 980px;
float: left;
vertical-align: middle;
}
.header_left {
background-color:#FFF;
height:122px;
width:110px;
float: left;
vertical-align: middle;
padding-left: 10px;
}
.header_center {
background-color: #FFF;
height: 122px;
width: 630px;
float: left;
font-family: arial;
vertical-align: top;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
.header_right {
background-color: #FFF;
height: 122px;
width: 210px;
float: left;
vertical-align: middle;
}
.body_left{
background-color:#FFF;
height:490px;
width:300px;
float:left;
font-family: arial;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}
.body_right{
background-color:#FFF;
height:490px;
width:650px;
float:left;
padding-top: 10px;
padding-left: 10px;
}
.noBulletIndent {
padding: 0px;
margin-left: 12px;
margin-top: 0px;
}
p {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 14px;
}
h2 {
margin: 0px;
padding: 0px;
font-family: arial;
}
h3 {
margin: 0px;
padding: 0px;
font-family: arial;
font-size: 15px;
}
li {
margin: 0px;
padding: 0px;
font-size: 14px;
margin-left: 4px;
}
Is that really your complete HTML? If so, you are in quirks mode without a doctype. Also keep in mind that IE6 does not work like IE7 which doesn't work like IE8 which won't work like IE9. (Good luck to us all!)
First off without a doctype you are running in quirks mode.
Second, I'm not too sure about what your issue is... is it the padding above and below the HR that is breaking up the right gray bar? If so, that can be fixed with a quick reset of HR.
hr {
padding:0px;
margin:0px;
}
I would put an overflow-x:hidden; on the element that bumps into the sidebar on the right, such as your content div or whatever to ensure it doesn't exceed whatevermany pixels you assigned it, since IE6/IE7 allow an element to exceed the width.
A jsfiddle would help visually seeing the problem as well, if that doesn't do it.
加载中,请稍侯......
精彩评论