Начал верстать простенький шаблон div'ами (раньше не доводилось). Вроде сверстал, начал на валидаторе проверять под html 1.0 strict. проверил, исправил все ошибки. и после этого блоки и съехали, причем только в firefox, правый блок с числами съехал вниз (см. скрины ниже). В опере по-прежнему все как было. И в обоих браузерах съехала влево таблица с числами.
Firefox:
Opera:
кусок кода этого блока:
<!-- Правый блок --> <div id="rightcol"> <div class="blocktitle"> <span>Заголовок</span> </div> <!-- Блок с фоткой --> <div id="photo"> <div class="etoblock">Это <span>Вася</span>. И т.д. и т.п. <img src="/1.jpg" alt="Фотка" /></div> <div id="ratephoto">Тут голосовалка</div> <p><span>Страна:</span> Россия</p> <p><span>Город:</span> Москва</p> <p><span>Описание:</span> Мы не крутые читатели рэпа, мы простые парни с северного района, мы добиваемся славы</p> </div> <!-- Сообщение приветствия --> <div id="message"> <div id="messagetitle">Здравствуйте!</div> <div class="mesalign">Тут сообщение приветствия</div> </div> <!-- Блок с выбором возраста, комменты --> <div id="guess"> <p class="trytitle">Ну же. Попробуй!</p> <form action="/index.php" method="post" id="guessform"> <?php for ($i=12; $i<100; $i++){ echo "<input type=\"submit\" name=\"$i\" value=\"$i\" class=\"guessbutton1\" onMouseOver=\"this.className='guessbutton2'\" onMouseOut=\"this.className='guessbutton1'\" />"; } ?> </form> <div id="guesscomments"> <p><span>Комментарии:</span></p> <p><i>Петя:</i> я аж прям обоссался.</p> <p><i>Сережа:</i> я вообще охуел от такой фотки. чуть прям на проблевался. пук нафиг блин. сайт отстой, админы гандоны</p> </div> </div> </div> <!-- Конец правого блока -->
You can post now and register later.
If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Портфолио https://www.behance.net/d4d4186e
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Актуальные контакты:
Telegram: @Nikker_web
E-Mail: tarasevich.email@gmail.com
Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ
Портфолио https://www.behance.net/d4d4186e
Question
Stahanovec
Начал верстать простенький шаблон div'ами (раньше не доводилось). Вроде сверстал, начал на валидаторе проверять под html 1.0 strict. проверил, исправил все ошибки. и после этого блоки и съехали, причем только в firefox, правый блок с числами съехал вниз (см. скрины ниже). В опере по-прежнему все как было. И в обоих браузерах съехала влево таблица с числами.
Firefox:
Opera:
кусок кода этого блока:
и кусок css для этого блока:
#rightcol {float: right;
border: 1px solid #000;
width: 79%;
margin-top: 1%;
}
#photo {
float: left;
position: relative;
width: 48%;
margin: 2% 1% 2% 1%;
font-size: 0.8em;
}
#photo img {
margin: 3%;
}
#ratephoto {
width: 30%;
margin: 0% 0% 2% 35%;
border: 1px solid #000;
}
#photo span {
font-weight: bold;
}
#photo p{
margin: 1% 0 0 5%;
}
#photo .etoblock {
text-align: center;
font-size: 1.3em;
font-weight: bold;
}
#photo .etoblock span {
color: #3c66d1;
}
#message {
float: right;
position: relative;
margin: 2% 8% 1% 1%;
width: 35%;
border: 1px solid #000;
font-size: 0.8em;
}
#message #messagetitle{
height: 20px;
background-color: #3c66d1;
border-bottom: 1px solid #000;
font-family: Impact;
color: #fff;
padding-left: 10px;
}
#message .mesalign {
margin: 1% 2%;
text-align: justify;
}
#guess {
float:right;
position: relative;
width: 48%;
margin: 2% 1% 2% 1%;
font-size: 0.8em;
border: 1px solid #000;
}
#guess .trytitle {
text-align: center;
font-size: 1.3em;
font-weight: bold;
margin: 0;
padding: 0;
}
#guessform {
position: relative;
width: 78%;
margin: 3%;
}
#guessform .guessbutton1{
background-color: #3c66d1;
border: 1px solid #000;
padding: 6px 8px;
}
#guessform .guessbutton2 {
background-color: #fff;
border: 1px solid #000;
padding: 6px 8px;
}
/* Подключение стиля только для Mozilla */
@-moz-document url-prefix() {
#guessform {
position: relative;
width: 80%;
margin: 3%;
}
#guessform .guessbutton1 {
background-color: #3c66d1;
border: 1px solid #000;
padding: 5px;
}
#guessform .guessbutton2 {
background-color: #fff;
border: 1px solid #000;
padding: 5px;
}
}
#guess #guesscomments {
text-align: left;
}
#guess #guesscomments p {
margin: 1% 0 0 5%;
}
#guess #guesscomments span {
font-weight: bold;
}
очень надеюсь на помощь, а то голова пухнет, проверял по сто раз уже. незакрытых тегов нет. спасибо заранее
Edited by StahanovecLink to comment
Share on other sites
5 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.