У меня проблемы с выяснением, почему IE выравнивает мой div боковой панели по центру страницы. Это происходит только на странице индекса, она находится в правильном положении для всех остальных разделов.
Вот моя часть тела / боковой панели моего CSS:
body {
background-image: url('../images/easy-tile.gif');
text-align: center;
font-family: Helvetica,sans-serif;
background-color: #F2F9D7;
margin: 0px;
padding: 0px;
line-height: 90%;
font-family: "Gill Sans", Tahoma, Verdana, Arial, sans-serif;
}
div.sidebar {
border-color: #1c664f;
line-height: 1em;
border-style: solid;
border-width: 2px;
background-size: 100%;
background-repeat: no-repeat;
moz-border-radius: 15px;
border-radius: 15px;
margin-left: 14px;
position: absolute;
text-align: center;
margin-top: 20px;
padding: 15px 15px 15px 15px;
background-color: #679847;
width: 175px;
color: #FFFFFF;
}
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/index_style.css" />
<title>Title</title>
<SCRIPT LANGUAGE=JavaScript1.1>
<!--
var MM_contentVersion = 6;
var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
if ( plugin ) {
var words = navigator.plugins["Shockwave Flash"].description.split(" ");
for (var i = 0; i < words.length; ++i)
{
if (isNaN(parseInt(words[i])))
continue;
var MM_PluginVersion = words[i];
}
var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
}
else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
&& (navigator.appVersion.indexOf("Win") != -1)) {
document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
document.write('on error resume next \n');
document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
document.write('</SCR' + 'IPT\> \n');
}
if ( MM_FlashCanPlay ) {
window.location.replace("indexflash.html");
} else{
window.location.replace("indexnoflash.html");
}
//-->
</SCRIPT>
</head>
<body>
<div class="wrapper">
<div class="header">
</div>
<div class="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="guestbook.html">Guestbook</a></li>
<li><a href="http://search.barnesandnoble.com/4 target="_blank">Buy the Book</a></li>
<li><a href="contact.html">Contact</a></li></ul>
</div>
<div class="sidebar">
<a href="987294" target="_blank"> <img src="images/cover.jpg" id="cover"/>
</a><br /><a href="http://search.barnesandnoble.com/" target="_blank">BUY THE BOOK!</a>
<p>"Quote" <br /><br />— Senator Bob Dole</p>
<a href="http://www.com" target="_blank"><img src="images/2.jpg" id="linda"/></a><br />
<p><a href="http://www.facebook.com/pages/" target="_blank"><img src="images/facebook.png" id="icons"/></a>
<a href="http://twitter.com/#!" target="_blank"><img src="images/twitter.png" id="icons"/></a>
<a href="http://39.net/feed/" target="_blank"><img src="images/rss.png" id="icons"/></a></p>
</div>
<div class="flash">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,79,0" WIDTH="640" HEIGHT="480" id="SWFMovie"> <PARAM NAME=movie VALUE="movie_opt.swf"> <PARAM NAME=wmode VALUE=transparent> <PARAM NAME=quality VALUE=GOOD>
<embed src="movie_opt.swf" quality="high" WIDTH="640" HEIGHT="480"></object>
</div>
<div class="main">
<p>blah</p>
</div>
</div>
<span id = "copyright">
<p>© 2011. All rights reserved.</p>
</span>
</body>
</html>
Все это время я тестировал сайт с помощью Firefox / Chrome. Теперь я понимаю, почему люди так ненавидят обработку CSS в IE.
Кто-нибудь знает, почему это может происходить?
Спасибо.