Как сделать рамку одинаковой и в ИЕ и в Мозилле?

Eirene · December 4, 2007

В ИЕ все отображается как надо. Но в Мозилле - нет. Как сделать их одинаковыми? Замучалась уже

Код страницы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Златопек</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="styles.css" rel="stylesheet" type="text/css"></head>
<body>
<div class="main">
 <div id="back"><<<a href="http://www.fbf.ru/"> на главную</a></div>
 <div id="logo" align="center"><img src="img/logo.gif"></div>
 <div id="logo" align="center"><img src="img/slogan.gif"></div>
 <table align="center">
 <tr>
 <td><img src="img/1.jpg"></td>
 <td><img src="img/2.jpg"></td>
 <td><img src="img/3.jpg"></td>
 <td><img src="img/4.jpg"></td>
 </tr>
 <tr>
 <td><img src="img/5.jpg"></td>
 <td><img src="img/6.jpg"></td>
 <td><img src="img/7.jpg"></td>
 <td><img src="img/8.jpg"></td>
 </tr>
 <tr>
 <td><img src="img/9.jpg"></td>
 <td><img src="img/10.jpg"></td>
 <td><img src="img/11.jpg"></td>
 <td><img src="img/12.jpg"></td>
 </tr>
 </table>
 <div class="entrance"><a href="entrance.html">ВХОД</a></div>
</div>
</body>
</html>



[b]Стили:[/b]

body {
 color: #AFAEAE;
 margin: 0;
 padding: 0;
}

img {
border: 0px;
}

.main{
height: 100%;
border: 10px #D0D0D0;
border-style: solid;
position: fixed; 
bottom: 0px; 
top: 0px;
}

#logo {
 padding: 20px;
}

#back{
margin-top: 45px;
margin-left: 45px;
position: absolute;
font: 13px;
color: #AFAEAE;
font-weight: bold;
}

a{
color: #AFAEAE;
font-weight: bold;
}

.entrance{
text-align: center;
font-family: Tahoma;
font-size: 19px;
padding: 20 0 20 0;
text-align: center;
}

Scrum · December 4, 2007

странный цвет #DODODO :/

Eirene · December 4, 2007

странный цвет #DODODO :/

Там нули конечно же, исправила

guvatara · December 4, 2007

quot;-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

quot;-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

какой доктайп вы хотите использовать?

извините а это что?

<div id="back"><<<a href="http://www.fbf.ru/"> на главную</a></div>

Eirene · December 4, 2007

quot;-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
quot;-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
какой доктайп вы хотите использовать?

Этот

guvatara · December 4, 2007

вы бы его до конца бы скопировали

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

они пишется так.

проверил толщина одинаковая в мазиле и IE

Eirene · December 4, 2007

Благодарю, но мне нужна была не толщина, а внешний вид - а именно в ИЕ отображалась рамка без полосы прокрутки, а в Мозилле - БЕЗ полосы и БЕЗ нижней рамки(серой полоски).

guvatara · December 4, 2007

IE 6?

какая версия мазиллы?

как должна выглядеть рамка? (хотя бы скриншот с наброском)

ширина области с рамкой конечна или на весь экран?

зачем вот это?

.main{
height: 100%;
border: 10px #D0D0D0;
border-style: solid;
[b]position: fixed;
bottom: 0px;
top: 0px;[/b]
}

Eirene · December 4, 2007

Мозилла 2.0.0.11

ИЕ 6

Ширина области с рамкой во весь экран. По размерам пикселей на 30.

К сожалению, не разобралась как скриншот прикрепить. Могу выслать куда-нибудь.

Eirene · December 4, 2007

зачем вот это?

.main{
height: 100%;
border: 10px #D0D0D0;
border-style: solid;
[b]position: fixed;
bottom: 0px;
top: 0px;[/b]
}

Именно этой штуковиной и была сделана рамка, но некорректно отображалась в Мозилле.

guvatara · December 4, 2007

да нет не нужно.

думаю проблема вот в этом

.main{
...
position: fixed;
bottom: 0px;
top: 0px;
}

уберите это и станет лучше.

Scrum · December 4, 2007

К сожалению, не разобралась как скриншот прикрепить. Могу выслать куда-нибудь.

На мыло, и мне тож любопытно посмотреть.

guvatara · December 4, 2007

position: fixed; зато IE 6 не понимает этого.

Eirene · December 4, 2007

уберите это и станет лучше.

Убрала, но стало хуже. Т.к. этим я div притягивала к самому низу, не зависимо от того сколько контента в нем бы находилось. Этот же div (у него класс main) и должен обрамляться рамкой.

Eirene · December 4, 2007

Отправила. Возможно там css немного подпортила, но в целом все как было

guvatara · December 4, 2007

body {
 color: #AFAEAE;
 margin: 0;
 padding: 0;
 height:100%;
}

html {
height:100%;
}

img {
border: 0px;
}

.main{
height: 100%;
position:relative;
border: 10px #D0D0D0;
border-style: solid;
}

#logo {
 padding: 20px;
}

#back{
margin-top: 45px;
margin-left: 45px;
position: absolute;
font: 13px;
color: #AFAEAE;
font-weight: bold;
}

a{
color: #AFAEAE;
font-weight: bold;
}

.entrance{
text-align: center;
font-family: Tahoma;
font-size: 19px;
padding: 20 0 20 0;
text-align: center;
}

притянется к низу. сейчас решу проблему полосой прокрутки.

Eirene · December 4, 2007

position: fixed; зато IE 6 не понимает этого.

Тем не менее ИЕ отображал как надо, а Мозилла - нет...

Eirene · December 4, 2007

guvatara, благодарю!

Подожду пока

guvatara · December 4, 2007

решил пойти простейшим путем

создается малкнький файл brd.gif высотой 10px с элиментом границы и загоняется фоном с повтором по верху и понизу, он будет эммитировать верхнюю и нижню границу

body {
 color: #AFAEAE;
 margin: 0;
 padding: 0;
 height:100%;
 background-image:url(brd.gif);
 background-position:top;
 background-repeat:repeat-x;
}

html {
height:100%;
}

img {
border: 0px;
}

.main{
height: 100%;
position:relative;
border:0px;
border-left:10px;
border-right:10px;
border-color: #D0D0D0;
border-style: solid;
overflow:hidden;
display:block;
background-image:url(brd.gif);
background-position:bottom;
background-repeat:repeat-x;
}

#logo {
 padding: 20px;
}

#back{
margin-top: 45px;
margin-left: 45px;
position: absolute;
font: 13px;
color: #AFAEAE;
font-weight: bold;
}

a{
color: #AFAEAE;
font-weight: bold;
}

.entrance{
text-align: center;
font-family: Tahoma;
font-size: 19px;
padding: 20 0 20 0;
text-align: center;
}

думаю это наиболее простой выход из этой ситуации чтоб не использовать всякие хаки.

вот файл http://guvatara.ru/e107_images/newspost_images/brd.gif

Eirene · December 4, 2007

думаю это наиболее простой выход из этой ситуации чтоб не использовать всякие хаки.

Большое Вам СПАСИБО!!!

ЗЫ: Для добавления рамки сверху и снизу без гифа высоту подкорректировала.

.main{

height: 97%;

.....

}

Работает!!!

ЗЫ2: Смотреть в Опере не буду - на сегодня хватит мозгонасилия

guvatara · December 4, 2007

просто при уменьшении окна может появляться полоса прокрутки. Так что мой вариант работает стабильнее для всех броузеров.

Eirene · December 4, 2007

просто при уменьшении окна может появляться полоса прокрутки. Так что мой вариант работает стабильнее для всех броузеров.

Значит воспользуюсь полностью вашим вариантом

guvatara · December 5, 2007

‹ используйте вот это вместо < для текста и удобнее и правильнее.

PS после ‹ нужно добавить ; я так не написал т.к. форум сразу их преобразовывает в ‹

Eirene · December 7, 2007

guvatara, а как поступить в этой ситуации:

когда документ становится достаточно большим и появляется полоса прокрутки, в Мозилле нижняя рамка при прокрутке остается где-то на середине документа, в ИЕ - в конце документа как и должна.

И еще один вопрос - чего это таблица так себя ведет некрасиво (в Firefox разумеется)?

http://www.fbf.ru/zlatopek/entrance.html

Sign In

Как сделать рамку одинаковой и в ИЕ и в Мозилле?

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information