Div по середине страницы

@Toxa33rus · Регистрация: 16.04.2009

Author24 — интернет-сервис помощи студентам

Есть вот такой html:

HTML5

<html>
 
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
 
<body>
 
<table border="1" width="100%">
    <tr>
        <td>&nbsp;</td>
        <td width="1000">&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
 
<div style="position: absolute; width: 100%; left: 0px; right: 10; top:50px; " id="test">
    <div align="center">
        <table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
            <tr>
                <td>
                <p align="center">
                &nbsp;</td>
                <td width="1000">
                <p align="center"></td>
                <td>
                &nbsp;</td>
            </tr>
        </table>
    </div>
</div>
 
 
</body>
 
</html>

Если открыть его в ИЕ то Div смещен вправо на 10 рх, а если в Маззиле то все ровно. Если в коде Div написать left: 10px, то все наоборот становится.
Как добиться одинакового отображения?

Humanoid · 02.08.2009, 12:38

На сколько я понимаю, нельзя сразу указывать и left и right... надо выбрать что-то одно. Можно вместо right указать margin-right... в данном случае это должно иметь тот же результат.

@Monte-Cristo · 02.08.2009, 12:49

Разработать код, который одинаково будет отображаться во всех браузерах - это извечная проблема веб-программистов. Из-за того что у браузеров различные движки, обработка кода осуществляетс по-разному, и добиться 100% совместимости нельзя. Пиши лучше отдельно под FF и отдельно под IE.

Например этот код корректно отображают FF, Opera, Safari, Chrome но не корректно IE.

Листинг

HTML5

<html>
 
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
 
<body>
 
<table border="1" width="100%">
        <tr>
                <td>&nbsp;</td>
                <td width="1000">&nbsp;</td>
                <td>&nbsp;</td>
        </tr>
</table>
 
<div style="position: absolute; left: 10px; right: 10px; top:50px; " id="test">
        <div align="center">
                <table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
                        <tr>
                                <td>
                                <p align="center">
                                &nbsp;</td>
                                <td width="1000">
                                <p align="center"></td>
                                <td>
                                &nbsp;</td>
                        </tr>
                </table>
        </div>
</div>
 
 
</body>
 
</html>

@BlackApricot · 02.08.2009, 15:37

Всё дело в боди, его в отступах. Обнуляем слева и справа и всё начинает работать. И ширина 100% здесь не правильна, уходит за край, мы же абсолют ставим.

Toxa33rus вот здесь рх нужно right: 10;

Вот тут всё работает.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head>
<title>Учимся выравнивать.</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<meta name="generator" content="CSE HTML Validator Халявной Версии">
<link rel="stylesheet" type="text/css" href="*.css">
<style type="text/css"></style>
</head>

<body>

<table border="1" width="100%">
<tr>
<td> </td>
<td width="1000"> </td>
<td> </td>
</tr>
</table>

<div style="position:absolute; width:95%; right:10px; top:50px;" id="test">
<div align="center">
<table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td><p align="center"> </td>
<td width="1000"><p align="center"> </td>
<td> </td>
</tr>
</table>
</div>
</div>

</body>

</html>

@Toxa33rus · 02.08.2009, 16:07 **[ТС]**

Как же быть-то мне? Я бы таблицами все сделал давно, да прсто мне надо слой с флэшкой наложить на страницу. А страница фиксированной ширины. Может через абсолютные координаты как можно?

Добавлено через 3 минуты 12 секунд
BlackApricot, спасибо! Завелось и поехало как надо!

@BlackApricot · 02.08.2009, 16:54

Toxa33rus, ты о чём плачешь, убиваешься? О 100%х ширины?

Humanoid Почетный модератор 11531 / 4325 / 449 Регистрация: 12.06.2008 Сообщений: 12,428
	02.08.2009, 12:38	2
	На сколько я понимаю, нельзя сразу указывать и left и right... надо выбрать что-то одно. Можно вместо right указать margin-right... в данном случае это должно иметь тот же результат. 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	02.08.2009, 15:37	4
	Всё дело в боди, его в отступах. Обнуляем слева и справа и всё начинает работать. И ширина 100% здесь не правильна, уходит за край, мы же абсолют ставим. Toxa33rus вот здесь рх нужно right: 10; Вот тут всё работает. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Учимся выравнивать.</title> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <meta name="generator" content="CSE HTML Validator Халявной Версии"> <link rel="stylesheet" type="text/css" href="*.css"> <style type="text/css"><!-- body { margin:15px 0px; } --></style> </head> <body> <table border="1" width="100%"> <tr> <td> </td> <td width="1000"> </td> <td> </td> </tr> </table> <div style="position:absolute; width:95%; right:10px; top:50px;" id="test"> <div align="center"> <table border="1" cellspacing="0" cellpadding="0" width="100%" height="100%"> <tr> <td><p align="center"> </td> <td width="1000"><p align="center"> </td> <td> </td> </tr> </table> </div> </div> </body> </html> 0

@Toxa33rus 3896 / 899 / 122 Регистрация: 16.04.2009 Сообщений: 1,825
	02.08.2009, 16:07 [ТС]	5
	Как же быть-то мне? Я бы таблицами все сделал давно, да прсто мне надо слой с флэшкой наложить на страницу. А страница фиксированной ширины. Может через абсолютные координаты как можно? Добавлено через 3 минуты 12 секунд BlackApricot, спасибо! Завелось и поехало как надо! 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	02.08.2009, 16:54	6
	Toxa33rus, ты о чём плачешь, убиваешься? О 100%х ширины? 0