как пофиксить баг в ИЕ6?

sc@r@bey · January 2, 2009

сверстал страницу в слоях, но между контентом и боковыми колонками появляется небольшой пробел в ИЕ6, как пофиксить сей баг?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link href="css/template_css.css" rel="stylesheet" type="text/css" />

<title>Test</title>
</head>
<body>
    <div id="container">
	<div id="container-inner">
        <div id="header">
            HEADER
        </div>
        <div id="navigation">
	        NAVIGATION
        </div>

        <div id="sidebar-right">
			SIDEBAR A
        </div>

        <div id="sidebar-left">
			SIDEBAR B
        </div>
    	<div id="content">
		<div id="content-inner">
            CONTENT
    	</div>
		</div>
        <div id="footer">
            FOOTER
        </div>       
    </div>
	</div>
</body>
</html>

body {
	padding: 0px;
	margin: 0px;
	background-color: #f3f0fb;
}

#container {
	margin: 0px auto;
	padding: 0px;
	width: 1004px;
	background: url(../images/bg-r.gif) repeat-y right;
	border-left: 3px solid #b86ec9;
	border-right: 3px solid #b86ec9;
}

#container-inner {
	background: url(../images/bg-l.gif) repeat-y left;
}

#header {
	padding : 0px;
	margin: 0px;
	width: 100%;
	background-image: url(../images/head.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	height: 232px;
	overflow: hidden;
}

#navigation {
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-image: url(../images/menu.jpg);
	background-repeat: repeat-x;
	background-position: top left;
	height: 50px;
	overflow: hidden;
}

#sidebar-right {
	float: right;
	width: 180px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	background-image: url(../images/p-r.gif);
	background-repeat: no-repeat;
	background-position: top;
}

#sidebar-left {
	float: left;
	width: 180px;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

#content {
	margin: 0px;
	padding: 0px;
	height: 1%;
	overflow: hidden;
	background-image: url(../images/c-r.gif);
	background-repeat: no-repeat;
	background-position: top;
	}

#content-inner {
	width: 100%;
	overflow: hidden;
}

#footer {
	clear: both;
	margin: 0px;
	padding: 0px;
	width: 100%;
	overflow: hidden;
	background-image: url(../images/menu.jpg);
	background-repeat: repeat-x;
	background-position: top left;
	height: 50px;
}

pyJee · January 2, 2009

Если я правильно понял, то появляется пробел в 3px в IE между элементами позиционированными с помощью float?

http://www.positioniseverything.net/explor...hreepxtest.html

sc@r@bey · January 2, 2009

Если я правильно понял, то появляется пробел в 3px в IE между элементами позиционированными с помощью float?
http://www.positioniseverything.net/explor...hreepxtest.html

совершенно верно, только я не совсем понимаю как это прикрутить к своему коду

Edited January 2, 2009 by sc@r@bey

pyJee · January 2, 2009

Попробуй добавить к #sidebar-left

_margin-right: -3px;

а к #sidebar-right

_margin-left: -3px;

sc@r@bey · January 2, 2009

разобрался добавил помогло http://www.positioniseverything.net/piefecta-rigid.html

/*** This is a fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html .#sidebar-right  {margin-left: -3px;}
/* */
/*** This is a fix for IE5/Win at the largest text size setting. ***/
/* \*/
* html .#sidebar-left  {margin-right: -3px;}
/* */

теперь хочется сделать вертикальное выравнивание пл центру во всех браузерах в #navigation и #footer vertical-align не работает причем во всех браузерах,

а в Opera и Firefox не работает горизонтальное выравнивание по центру в #sidebar-left и #sidebar-right

подскажите?

pyJee · January 2, 2009

Про вертикально выравнивание:

http://cssing.org.ua/2005/07/14/vertical-align-middle/

http://cssing.org.ua/2007/04/26/another-css-valign-method/

Насчет горизонтального выравнивания - все работает:

text-align: center;

Sign In

как пофиксить баг в ИЕ6?

Question

sc@r@bey

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

pyJee

Link to comment

Share on other sites

sc@r@bey

Link to comment

Share on other sites

pyJee

Link to comment

Share on other sites

sc@r@bey

Link to comment

Share on other sites

pyJee

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information