3

Я прочитал кучу предыдущих сообщений, посвященных проблеме заполнения, которую я испытываю между IE8 и более ранними версиями (IE7,6). Я уже попробовал сбросить свой CSS, как упоминалось ранее, но не повезло. Любая помощь будет принята с благодарностью. Заранее спасибо!Проблемы с заполнением IE8 v IE7

Проблема лучше всего иллюстрируется скриншотами (см. Ниже), но в css, который я прикреплял, я уверен, что проблема находится где-то в дополнении в header_left и header_center, что неправильно отражено в IE6/7. Мое Totally ширина сайта всегда складывается в 980px, так что моя математика хорошо ...

IE6 или 7 (проблемы) alt text

IE8 (нет проблем) alt text

Вот мой HTML код:

<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> 

Вот мой 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; 
} 

ответ

4

Действительно ли это ваш полный HTML? Если это так, вы находитесь в режиме quirks без doctype. Также имейте в виду, что IE6 не работает как IE7, который не работает как IE8, который не будет работать как IE9. (Удачи нам всем!)

+0

Объявление DOCTYPE стало победителем! Спасибо. Я новичок в HTML/CSS. – user387049

-1

Я бы поставил overflow-x:hidden; на элемент, который врезается в боковой панели справа, например, ваш контент DIV или независимо от того, чтобы убедиться, что он не превышает whatevermany пикселей вы назначили его, поскольку IE6/IE7 позволяют элементу превышать ширину.

jsfiddle поможет визуально увидеть проблему, если это не так.

0

Прежде всего, без doctype вы работаете в режиме quirks.

Во-вторых, я не слишком уверен в вашей проблеме ... это прокладка выше и ниже HR, которая разбивает правый серый бар? Если это так, это может быть исправлено с быстрым сбросом HR.

hr { padding:0px; margin:0px; }