Не правильно (или правильно?) работает позиционирование в WebKit - HTML и CSS

mutabor · 30.11.2010, 17:25

Всем привет. У меня такой вопрос: не работает в некоторых браузерах позиционирование как нужно. Выдрал код из контекста, чтобы легче было разобраться, нужно сделать так, как в первом варианте (чтоб картинка вниз не съезжала). Подскажите, как их побороть (Хром и Сафари)?

Код HTML:

<body>
    <div id="main">
	  <div class="abs" id="lite"><a class="white" href="#">
	  HEIGHT OF KILIMANJARO 19,340 FEET</a>&nbsp;
	  <img id="img" src="klm.jpg" alt="Kilimanjaro"></div>
	</div>
</body>

CSS

Код HTML:

#main {
position:relative;
width:500px;
height:500px;
background-color:gray;
}
div.abs {
position:absolute;
}
#lite {
left:60px;
top:46px;
font-family:sans-serif;
font-size:13px;
word-spacing:1px;
background-color:purple;
}
a.white {
color:white;
}
#img {
float:right;
}

Naive · 01.12.2010, 04:25

попробуйте с тегом

Код:

<nobr>

либо в цсс пошаманить с

Код:

vertical-align

у картинки
либо убрать флоэт

Alexei91 · 01.12.2010, 06:08

Поэксперементируйте с тэгом -webkit.
http://www.webmasters.by/articles/ht...-gradient.html
http://habrahabr.ru/qa/317/

Цитата:

...используются в Webkit-браузерах (например Safari), которые начинаются с -webkit-, и Gecko-браузеры (например Firefox), которые начинаются с -moz-. Konqueror (-khtml-), Opera (-0-) и Internet Explorer (-ms-) имеют свои собственные проприетарные расширения.

- http://dreamhelg.ru/2009/06/take-you...vel-with-css3/

Alex Cones · 01.12.2010, 09:08

Обязательно ли использовать два дива? Одним обойтись нельзя?

Код:

<div>
Ссылка
Имага
</div>

На крайняк табличку замутить.

mutabor · 01.12.2010, 17:33

Всё, вопрос решил. Убрал все лишнее, и вернулся к тому, от чего хотел уйти - отступ под картинкой. Отступ убрал с помощью vertical-align:bottom;
Вот здесь я нашел решение http://www.xiper.net/collect/html-an...the-block.html
и заодно понял в чем была проблема. Картинка выравнивалась по базовой линии, и т.к. высотой она 16px, она подрывала крышу div блоку. Из-за этого я и начал float городить, чтобы как-то выровнять.

dekameron · 09.12.2010, 09:54

если float задан для картинки, то попробуйте в HTML коде ее первой вписать

Код:

<body>
    <div id="main">
	  <div class="abs" id="lite">
                  <img id="img" src="klm.jpg" alt="Kilimanjaro" />
                  <a class="white" href="#">
	  HEIGHT OF KILIMANJARO 19,340 FEET</a>&nbsp;</div>
	  
	</div>
</body>

01.12.2010, 04:25	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	попробуйте с тегом Код: `<nobr>` либо в цсс пошаманить с Код: `vertical-align` у картинки либо убрать флоэт Alar, верни репу!

01.12.2010, 09:08	#4
Alex Cones Trust no one. Старожил Регистрация: 07.04.2009 Сообщений: 6,526	Обязательно ли использовать два дива? Одним обойтись нельзя? Код: `<div> Ссылка Имага </div>` На крайняк табличку замутить. SQUARY PROJECT - НАБОР БЕСПЛАТНЫХ ПРОГРАММ ДЛЯ РАБОЧЕГО СТОЛА. МОЙ БЛОГ GRAY FUR FRAMEWORK - УДОБНАЯ И БЫСТРАЯ РАЗРАБОТКА WINAPI ПРИЛОЖЕНИЙ

01.12.2010, 17:33	#5
mutabor Телепат с дипломом Старожил Регистрация: 10.06.2007 Сообщений: 4,929	Всё, вопрос решил. Убрал все лишнее, и вернулся к тому, от чего хотел уйти - отступ под картинкой. Отступ убрал с помощью vertical-align:bottom; Вот здесь я нашел решение http://www.xiper.net/collect/html-an...the-block.html и заодно понял в чем была проблема. Картинка выравнивалась по базовой линии, и т.к. высотой она 16px, она подрывала крышу div блоку. Из-за этого я и начал float городить, чтобы как-то выровнять. The future is not a tablet with a 9" screen no more than the future was a 9" black & white screen in a box. It’s the paradigm that survives. (Kroc Camen) Проверь себя! Онлайн тестирование \| Мой блог

09.12.2010, 09:54	#6
dekameron Форумчанин Регистрация: 27.04.2010 Сообщений: 185	если float задан для картинки, то попробуйте в HTML коде ее первой вписать Код: `<body> <div id="main"> <div class="abs" id="lite"> <img id="img" src="klm.jpg" alt="Kilimanjaro" /> <a class="white" href="#"> HEIGHT OF KILIMANJARO 19,340 FEET</a> </div> </div> </body>` Помог - тырк на весы

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
не правильно работает функция	mansp	Общие вопросы C/C++	15	07.11.2010 16:35
Программа работает не правильно	artem611	Паскаль, Turbo Pascal, PascalABC.NET	2	22.09.2010 07:49
Не правильно работает запрос	ww01031977	Microsoft Office Access	12	21.04.2010 10:52
программа работает. правильно ли?	getUp	Общие вопросы C/C++	10	26.03.2010 07:07
Не правильно работает программа	Virus_L	Помощь студентам	0	28.12.2009 22:52