Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5/6. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: CSS: margin-top crossbrowsering
 
 автор: Fratyr   (24.04.2008 в 22:35)   письмо автору
 
 

Здравствуйте товарищи. У меня тут проблемка наросла и просто нигде нет ответа. :(

Всего-то хочу чтобы biglist div отступал на 27 пикселей с верху и с лева от дива maincont (это его родитель), в ИЕ7 настроил все путем - в ФФ2/Флок он у меня отступает ВМЕСТЕ с maincont (т.е маргин задан ребенку, а сползает вниз и ребенок и родитель), делаю абсолютную позицию ребенку и родителю относительную - в ФФ нормально, в ИЕ улетает вправо ребенок.

Вот код ЦСС, ХТМЛ


<div id="container">
    <div id="toplogo">
        <img src="imgweb/toplogo.png" alt="Logo" width="1000" height="160" border="0"></img>
    </div>
    <div id="maincont">
        <div id="biglist">
        Text here
        </div>
    </div>
</div>



html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

body {
    background-color: #343434;
    /* background-color: #eff0f0; */
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    color: #FFFFFF;
}

#container {
width: 100%;
height: 97%;
background-color: #f6ebba;
background-image: url("../imgweb/hole.png");
}

#toplogo {
width: 1000px;
margin: auto;
height: 160px;
border-right: 1px solid #c1905f;
border-left: 1px solid #c1905f;
}

#maincont {
width: 1000px;
height: 80%;
margin: auto;
text-align: center;
border-right: 1px solid #c1905f;
border-left: 1px solid #c1905f;
border-bottom: 1px solid #c1905f;
background-image: url("../imgweb/bgsite.png");
background-repeat: no-repeat;
background-color: #f6ebba;

}

#biglist {
width: 505px;
height: 355px;
background-image: url("../imgweb/biglist.png");
background-repeat: no-repeat;
display: block;
margin: 27px 27px;
}

   
 
 автор: PAT   (25.04.2008 в 01:14)   письмо автору
 
   для: Fratyr   (24.04.2008 в 22:35)
 

Конструкция
<div id="toplogo">
        <img src="imgweb/toplogo.png" alt="Logo" width="1000" height="160" border="0"></img>
    </div>
дважды неправильна.

Во-первых, специальный <div id="toplogo">, в котором ничего, кроме тега <img>, занимающего всю площадь этого DIVа, не нужен. Все правила CSS для DIVа, можно дать самому IMG с тем же успехом.

Во-вторых, когда в какой-то ячейке/контейнере прописываете тег <IMG>, его надо обязательно "обеспробелить", то есть записывать в виде <div...><img...></div> безо всяких пробелов между > и <.

Ну и вообще правила CSS у вас прописаны невнятно - совершенно ненужные повторы (например, для маргинов тела документа), установка значения auto, которое и само установится... да и некорректно. Когда задаете вопрос - уберите всю ненужную информацию, кроме решающей. Примерно так:
<html>
<head>
<style>
html, body {width: 100%;   height:  100%; margin: 0; padding: 0}
#container {               height:   97%;                        background: red}
#toplogo   {width: 1000px; height: 160px;                        background: gray}
#maincont  {width: 1000px; height:   80%; text-align: center;    background: aqua}
#biglist   {width:  505px; height: 355px; margin: 27px;          background: yellow} 
</style>
</head>
<body>
<div id="container"
   ><div id="toplogo"
   ><img src="imgweb/toplogo.png" alt="Logo" width="1000" height="160" border="0"
   ></div
   ><div id="maincont"
      ><div id="biglist">Text here</div
   ></div
></div
></body>
</html>

   
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования