Jump to content
  • 0

вопросы по кросбраузерности


Cage
 Share

Question

<div style="float: right; width: 300px; height: 100px; background: #000"></div>
<div style="float: left">
<table width=100% bgcolor=#cccccc><tr><td>1234567890</td></tr></table>
</div>

Хочется сделать код кроссбраузерным, чтобы в FF отображалось то же самое, что и в IE.

Важный момент здесь, что таблица содержит мало текста, поэтому ее приходится растягивать (width=100%).

P.S.

Ну и заодно спрошу, поддерживает ли FF CSS:expression?

У меня складывается ощущение, что не поддерживает...

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0
чтобы в FF отображалось то же самое, что и в IE.

неверно мыслите, с точностью до наоборот :o

У меня складывается ощущение, что не поддерживает...

верно ощущаете :lol: , это хак для IE, остальные пользуются валидным css.

что конкретно вас интересует, вопрос не раскрыт?

Link to comment
Share on other sites

  • 0

То, что я хочу, очень сложно описать словами :o.

Я сам очень не люблю, когда темы на форумах люди называют так, как тему назвал я...

Но это как раз тот случай, когда лучше один раз увидеть. Код я оставил в первом посте.

Интересует меня код, который будет отображаться в IE и FF так же, как исходный код отображается в IE. Это не значит, что IE - это какой-то эталон. Это всего лишь означает, что в IE все выглядит именно так, как это и нужно :lol:.

Link to comment
Share on other sites

  • 0

Выкладываю свои первые наработки. Отображается нормально в Опере и Фоксе, в ИЕ плохо, пока не раскомментировать строчку /*float: left;*/

Может еще что-то придумаю...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

table {
/*float: left;*/
width: 100%;
background: yellow;
}
</style>
</head>
<body>
<div style="float: right; width: 300px; height: 100px; background: #000;">test</div>
<div style="margin-right: 300px; background: red;">
<table><tr><td>1234567890</td></tr></table>
</div>
</body>
</html>

Link to comment
Share on other sites

  • 0
а если убрать float: left

Такие простые решения не подойдут. Собственно говоря, "float: left" не просто так изначально появился в коде :lol:.

Выкладываю свои первые наработки. Отображается нормально в Опере и Фоксе, в ИЕ плохо, пока не раскомментировать строчку /*float: left;*/

Может еще что-то придумаю...

Да, спасибо за вариант. В моем арсенале есть подобное решение.

<div style="float: right; width: 300px; height: 100px; background: #000"></div>
<div style="padding-right: 310px">
<table width=100% bgcolor=#cccccc><tr><td>1234567890</td></tr></table>
</div>

И тоже в FF хорошо, в IE плохо.

Есть еще нейтральный вариант

<div style="float: right; width: 300px; height: 100px; background: #000"></div>
<table bgcolor=#cccccc><tr><td>1234567890</td></tr></table>

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

Еще у меня придумалось вот такое оригинальное решение

<div style="float: right; width: 300px; height: 100px; background: #000"></div>
<table bgcolor=#cccccc><tr><td>1234567890 <span style="font-size: 0"><img src="" width=300 height=1> <img src="" width=300 height=1> <img src="" width=300 height=1> <img src="" width=300 height=1> <img src="" width=300 height=1></span></td></tr></table>

Но оно кажется мне не вполне удачным :o.

Link to comment
Share on other sites

  • 0

Нашел вроде самое оптимальное кроссбраузерное решение:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}

table {
background: yellow;
display: block;
table-layout: fixed;
}
</style>

<!--[if IE]>
<style type="text/css">
table {
margin-right: -3px;
}
</style>
<![endif]-->

</head>
<body>
<div style="float: right; width: 300px; height: 100px; background: #000;">test</div>
<div style="margin-right: 310px; background: red;">
some text
<table><tr><td>1234567890</td></tr></table>
some text
</div>
</body>
</html>

Link to comment
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy