footer залезает на 2 верхних обтекающих друг друга блока

WhiteRaven · 16.04.2010, 18:39

Ничего не могу с этим поделать...
В Опере и ИЕ все работает нормально, а вот в Файрфоксе криво(
Подскажите, как решить проблему?

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <head><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>Интернет магазин</title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="wrapper">
        <div id="ltgray">
            <div id="t"><div id="r"><div id="l"><div id="b"><div id="tr"><div id="tl"><div id="br"><div id="bl">
            <h1>Оформить заказ</h1>
            <p>Товаров: </p>
            <p>На сумму: </p>

            </div></div></div></div></div></div></div></div>
        </div>
        
        <div id="header">
            <div id="h-right"><div id="h-left">

                <p id="menu">
                    <a href="index.html">Главная</a> |
                    <a href="index.html">Новости</a> |
                    <a href="index.html">Форум</a> |
                    <a href="index.html">Товары</a> |
                    <a href="index.html">Обратная связь</a>
                </p>

            </div></div>
        </div>


         <div id="left">
            <div id="sidebox"><div id="b"><div id="l"><div id="r">
                <div id="head-c"><div id="head-r"><div id="head-l"><h1>Товары</h1></div></div></div>
                <div id="body-r"><div id="body-l">
                    text
                </div></div>
            </div></div></div></div>

        </div>
        <div id="right">

            <div id="sidebox"><div id="b"><div id="l"><div id="r">
                <div id="head-c"><div id="head-r"><div id="head-l"><h1>Спецпредложения</h1></div></div></div>
                <div id="body-r"><div id="body-l">
                
                    <div id="product-name"><h2>Название продукта</h2></div>
                    
                </div></div>
            </div></div></div></div>

        </div>

      <div id="clear">

      </div>
      <div id="footer">
            <div id="top-r">
            <div id="top-l">
            <div id="bot-r">
            <div id="bot-l">
                <p id="menu">
                    <a href="index.html">Главная</a> |
                    <a href="index.html">Новости</a> |
                    <a href="index.html">Форум</a> |
                    <a href="index.html">Товары</a> |
                    <a href="index.html">Обратная связь</a>
                </p>
                <p id="copyright">2010 Copyright "OOO Gigal-Info"</p>
            </div></div></div></div>
        </div>

    </div>

    </body>
</html>

Код:

body, html {
    text-align: center;
    margin:0;
    padding:0;
}

body {
    min-width: 1000px;
    background-color: rgb(251,250,255);
}

img {
    border: 0px;
}

#wrapper {
    width: 1000px;
    margin: 0 auto;
}

#left {
    width: 220px;
    float: left;

}

#right {
    width: 770px;
    float: right;
}

#clear {
    clear: both;
}

/* header */
#header {
    margin-top: 10px;
    margin-bottom: 10px;
    background: url(img/header-b.bmp);
    height: 60px;
}

#header #h-left {
    background: url(img/header-l.bmp) no-repeat left;
    height: 60px;
}

#header #h-right {
    background: url(img/header-r.bmp) no-repeat right;
    height: 60px;
}

/* конец header */


/* footer */

#footer {

    clear:both;
    margin-top: 10px;
    padding: 0px;
    background: rgb(215,215,215);
    
    text-align: left;
}

#footer #top-r {
    background: url(img/footer-tr.bmp) no-repeat top right;
}

#footer #top-l {
    background: url(img/footer-tl.bmp) no-repeat top left;
}

#footer #bot-r {
    background: url(img/footer-br.bmp) no-repeat bottom right;
}

#footer #bot-l {
    background: url(img/footer-bl.bmp) no-repeat bottom left;
    padding: 10px;
    padding-left: 50px;
}
/* конец footer */


/*sidebox*/

#sidebox {
    clear: both;
    height: 45px;
	margin: 0 auto;
    padding: 0px;
/*	width: 500px;*/
	font-size: 100%;
	background-color: white;
}

#sidebox #b {background: url(img/sbdot.bmp) 0 100% repeat-x}
#sidebox #l {background: url(img/sbdot.bmp) 0 0 repeat-y}
#sidebox #r {background: url(img/sbdot.bmp) 100% 0 repeat-y}

#sidebox #head-r {
    height: 45px;
	background: url(img/sbhead-r.bmp) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: right;
	font-family: Arial;
}

#sidebox #head-l {
    height: 45px;
	background: url(img/sbhead-l.bmp) no-repeat top left;
	margin: 0;
	padding: 0;
	padding-left: 20px;
}

#sidebox #head-c {
    height: 45px;
	background: url(img/sbhead-b.bmp) repeat-x;
	margin: 0;
	padding: 0;
}

#sidebox #head-l h1 {
    padding-top: 9px;
    color: white;
    font-weight: bold;
	font-size: 20px;
	text-align: left;
}

#sidebox #body-r {
    clear: both;
	background: url(img/sbbody-r.bmp) no-repeat bottom right;
	margin: 0;
}

#sidebox #body-l {
	background: url(img/sbbody-l.bmp) no-repeat bottom left;
	margin: 0;
	padding-bottom: 5px;
	padding-right: 10px;
	padding-left: 10px;
	text-align: left;
}

/*конец sidebox*/

/* ltgray для корзины */

#ltgray {
    margin-top: 10px;
    width: 300px;
    background-color: white;
    /*padding: 0px;*/
    text-align: left;
    
}

#ltgray #t {
    background: url(img/ltdot.bmp) 0 0 repeat-x;
}

#ltgray #r {
    background: url(img/ltdot.bmp) 100% 0 repeat-y;
}

#ltgray #l {
    background: url(img/ltdot.bmp) 0 0 repeat-y;
}

#ltgray #b {
    background: url(img/ltdot.bmp) 0 100% repeat-x;
}

#ltgray #tr {
    background: url(img/ltgray-tr.bmp) no-repeat top right;
}

#ltgray #tl {
    background: url(img/ltgray-tl.bmp) no-repeat top left;
}
#ltgray #br {
    background: url(img/ltgray-br.bmp) no-repeat bottom right;
}
#ltgray #bl {
    background: url(img/ltgray-bl.bmp) no-repeat bottom left;
    padding: 10px;
    padding-left: 20px;
}

/* конец ltgray */

/* меню и его ссылки */

#header #menu {
    padding-top: 20px;
    color: white;
    font-family: Tahoma;
    font-size: 15px;
}

#header #menu a {
    color: white;
    font-weight: bold;
    text-decoration: underline;
}

#footer #menu {
    color: rgb(89,89,89);
    font-family: Tahoma;
    font-size: 12px;
}

#footer #menu a {
    color: rgb(89,89,89);
    text-decoration: none;
}

#footer #menu a:hover {
    text-decoration: underline;
}

/* конец меню и ссылок */


/* параграфы, заголовки и прочее... */

#copyright{
    font-family: Tahoma;
    font-size: 12px;
    color: rgb(78,154,223);
}

#product-name {
    margin: 5px;
    padding: 0px;
    height: 39px;
    background: rgb(247,247,247) url(img/pr-title-r.bmp) no-repeat right;
}

#product-name h2 {
    padding-left: 20px;
    /*padding-top: 10px;*/
    padding: 0px;
    margin: 0px;
    height: 39px;
    background: url(img/pr-title-l.bmp) no-repeat left;
    color: rgb(247,125,2);
    font-family: Century Gothic;
    font-size: 17px;
}

#ltgray p {
    margin: 0px;
    font-family: Tahoma;
    font-size: 13px;
}

#ltgray h1 {
    margin: 0px;
    font-family: Tahoma;
    font-size: 13px;
    font-weight: bold;
    color: rgb(134,170,0);
}

kost · 23.04.2010, 02:12

Исправьте, для начала вот этот ужас:

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <head><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <title>Интернет магазин</title><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Friendhosting - Ваш друг в Интернете	friendhosting	Платный хостинг	0	20.05.2011 17:48
То ли header, то ли footer - растолкуйте, пожалуйста, в чем глюк?	amanita	HTML, CSS, JavaScript	3	07.08.2009 18:04
Css footer FireFox	pacifist	HTML, CSS, JavaScript	7	14.02.2007 15:59
Знать друг друга в лицо!	Zebo	Фотография	20	24.11.2005 17:54
Книга - друг человека	DrMisha	Растровая графика	12	14.09.2005 10:33

Опции темы
Версия для печати Отправить по электронной почте

16.04.2010, 18:39
Ссылки