Условн. комментарии в ИЕ

people2010 · August 27, 2010

Хочу сделать отступ картинки которая находиться внутри ячейки таблицы, отсуп хочу сделать на определенное расстояние вправо. Дело в том что задаю в стилях и во всех браузерах кроме ИЕ, отступ, такой как нужен, в ИЕ показывает немного дальше что меня не устраивает. Для этого использую условные комментарии. Дело в том, что вроде они срабатывают, но проблема в том, что не знаю как поставить так условие, чтоб не дублировалась картинка 2-ой раз в браузере Ие именно, толкьо в нём и больше ни где дублируется картинка, как исправить подскажите.

<html>
<head><title>Видео</title>

<style type="text/css">
.videoyrokiIE{position:relative; left:165px; }
.videoyrokiDR{position:relative; left:180px;}
</style>

</head>
<body style="margin:0px; padding:0px;"> 
<table width="100%" border="1" align="center">
<tr>
 <td align="center">
	 <img src="shapka.jpg"><br>

	 <!--[if IE]>
	 <img class="videoyrokiIE" src="videoyroki.png" align="left" > 
	 <![endif]-->

	<img class="videoyrokiDR" src="videoyroki.png" align="left" > 




 </td>
</tr>
</table>
</body>
</html>

swetlana · August 27, 2010

традиционное применение условных комментариев подразумевает подключение отдельного файла стилей для IE:

<!--[if IE]><link rel="stylesheet" type="text/css" href="styles-for-ie.css" /><![endif]-->

Для Вашего случая это как раз подходящее решение.

В коде html пишете только один вариант, например

<img class="videoyroki" src="videoyroki.png" />

,

в css для всех браузеров пишете:

.videoyroki {
	position: relative;
	left: 180px;
	float: left;
}

и для IE переопределяете одно свойство в файле styles-for-ie.css:

.videoyroki {
	left:180px;
}

Edited August 27, 2010 by swetlana

people2010 · August 27, 2010

1)Именно с таким названием должен называться файл отдельный ксс?

styles-for-ie.css

2)обзятельно в отдельном файле ксс нужно а не в одном для всех?

npofopr · August 27, 2010

назвать можно хоть как.

можно все в одном кссе писать, используя хаки.

people2010 · August 27, 2010

Что-то наверное друго вместо позиционирования использовать нужно,

а то я смотрю при уменьшении окна барузера кнопка смещается вправо, не важно какой вид позиционирования использовать.

Как разместить кнопку-картинку без позиционирования,чтоб при уменьшении окна браузера кнопка не летела вправо?

people2010 · August 27, 2010

Как убрать отступ в браузере ИЕ, и опере немножко есть?

Отступ в той маленькой картинке от лева.

http://www.sharemania.ru/0171629

Edited August 27, 2010 by people2010

mishka · August 28, 2010

тебе знакомо слово DOCTYPE ?

А слово "валидация" ?

Или ты из тех кто считает себя самым умным, а проверка на валидность - то для неудачников?

padding-left:-5px; - ты считаешь что есть отрицательные паддинги?

Edited August 28, 2010 by mishka2

people2010 · August 28, 2010

Точно, вот эта строка помогла:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional 4.01//EN">

А если позиционировать элементы с использованием Доктайпа, пр иуменьшении окна браузера объекты не будут ездить по экруану, при уменьшении окна браузера,

потому-что без доктайпа ездили, а с доктайпом не будут?

people2010 · August 28, 2010

Точно, вот эта строка помогла:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional 4.01//EN">
А если позиционировать элементы с использованием Доктайпа, пр иуменьшении окна браузера объекты не будут ездить по экруану, при уменьшении окна браузера,
потому-что без доктайпа ездили, а с доктайпом не будут?

Теперь вроде всё отлично, только в браузере Опера маленький отступ ,как убрать?

Vlad · August 28, 2010

Вообще-то доктайп для других целей нужен, а не для позиционирования элементов.

http://htmlbook.ru/html/!doctype.html

people2010 · August 28, 2010

А как тогда быть с этим отступом в браузере Опера?

Vlad · August 28, 2010

Не заметил никакого отступа в Опере 10.

Все проблемы в мелочах.

1. Поставь вот этот доктайп

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

2. Исправь ошибки в коде

3. Поставь cellpadding и cellspacing у таблицы явно

4. border=1 фтопку, замени стилями.

Сделаешь все правильно, тогда и отдельные стили не понадобятся под разные браузеры. У тебя же таблица, с ней ваще никаких проблем не должно быть.

people2010 · August 28, 2010

У меня Опера 9,63.

Если дописать как у вас доктайп, тогда, ещё от верху произойдёт отступ.

Вот переделал и всё равно отсуп от лева имено в браузере Опера, в др. нормально.

http://www.sharemania.ru/0131176

Vlad · August 28, 2010

О каком вообще отступе идет речь, приведи скриншот.

people2010 · August 28, 2010

mishka · August 28, 2010

у меня опера 10.61. Про 9ку давно забыл.

Отступа нет.

Браузер обновить не хочешь?

И доктайп полный напиши

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Edited August 28, 2010 by mishka2

people2010 · August 28, 2010

Доктайп не помог, картинка та же.

Как сделать чтоб работало на Опере,ничего больше нельзя сделать и придумать чтоб в этом 9,63 заработало?

Edited August 28, 2010 by people2010

clavin · August 28, 2010

Может в стилях надо прописать * {padding:0; margin:0;}

Vlad · August 28, 2010

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

people2010 · August 28, 2010

Точно, хотя я устанавливал его в боди, оказалось нужно вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">

</style>

</head>
<body style="margin:0px; padding:0px;"> 

<table width="910px" style="border:1px solid black;" align="center" cellspacing="0" cellpadding="0">
<tr>
 <td align="center">
	 <img src="shapka.gif"><br>
	 <img style="padding:0px; margin:0px;" src="videoyroki.png" align="left" > 
 </td>
</tr>
</table>
</body>
</html>

Edited August 28, 2010 by people2010

people2010 · August 28, 2010

Вот это да, оказывается вот эта строка

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Очень много значит.

Если написать просто:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

Тогда произойдет отступ от верха ещё, а если написать так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Тогда во всех браузерах отлично.

В итоге код получился таким. и стал работать во всех браузерах.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head><title>Видео</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<style type="text/css">
.marginpadding{margin:0px; padding:0px;}
.bordur{border:1px solid black;}

.videoyroki{position:relative; left:0px;}
</style>

</head>
<body class="marginpadding"> 

<table width="910px" class="bordur"  align="center" cellspacing="0" cellpadding="0">
<tr>
 <td align="center">
	 <img src="shapka.jpg"><br>
	 <img   class="marginpadding" src="videoyroki.png" align="left" > 
 </td>
</tr>
</table>
</body>
</html>

Edited August 28, 2010 by people2010

mishka · August 28, 2010

В верстке все мелочи много значат.

И игнорировать правила нестоит, их придумали далеко не дураки. Проверяй всегда на валидность.

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

Serlutin · August 29, 2010

Если написать просто:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

То Опера (9) перейдет в режим совместимости. Не понимает она укороченный Doctype.

Но выбрав xhtml, нужно ему соответствовать.

Параметры width и align в стили, все одиночные теги должны быть закрыты:

<img src="shapka.jpg" alt="" />
<br />

swetlana · August 29, 2010

…
Если написать просто:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
Тогда произойдет …

а вот если написать ещё проще:

<!DOCTYPE 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