Ширина div при одной и двух строках

Тема в разделе "Веб-дизайн", создана пользователем funest, 25 июл 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Подскажите как сделать в CSS для IE:
    если в блоке одна строка = width:auto; // то есть тут ширина элемента зависит от количества символов.
    если две = width:100%; // в любом счлучае, если происходит перенос, ширина принимает указанное значение.

    Если к блоку применяешь float в лисе и сафари все замечательно, а осел отображает его ширину по самой длинной строке, не так как надо :nezn:
     
  2. ConstNW

    ConstNW Постоялец

    Регистр.:
    30 июн 2007
    Сообщения:
    132
    Симпатии:
    39
    линк на пример и все сделаем.
     
  3. mittus

    mittus Создатель

    Регистр.:
    12 июл 2009
    Сообщения:
    72
    Симпатии:
    11
    чтобы что то для IE отдельно сделать, нужно прописать в css отдельный класс или ID.
    *html тут класс или ID {
    тут параметры, которые отличаются от обычных
    }
    вот как то так я справлялся с багами в IE ))
     
  4. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Спасибо конечно, но я не про хаки спрашивал.
    Вот пример.
    стили
    Код:
    #container{width:700px; margin:0 auto; padding:9px; overflow:hidden; border:1px #aab solid;}
    .bg{height:300px; width:100%; background:#0099FF;}
    .hd{background:#000; color:#fff; font-size:18px; margin-top:-36px; padding:7px; float:left;}
    
    HTML:
    <div id="container">
    	<div class="bg"></div>
    	<div class="hd">Заголовок</div>
    </div>
    
     
  5. x_Dev

    x_Dev Создатель

    Регистр.:
    2 фев 2009
    Сообщения:
    13
    Симпатии:
    1
    Хм. интересная проблема. На самом деле блок в ie ведет себя достаточно логично. Кстати в Опере тоже. А вот в остальных скорее наоборот нелогично.

    Ширина плавающего блока должна зависеть от контента внутри. Но в новых браузерах он ещё резервирует ту часть в которой теоретически мог бы быть перенесенный контент.
     
  6. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Возможно ослик и правильно себя ведет в данном случае.
    Но все-таки хотелось бы как-то решить данную траблу...

    Можно ли проверить тогда JavaScript`ом на наличие переноса строки браузером или просто перевода каретки?
    По количеству символов в строке не получится.
     
  7. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Нашел такую же проблему и решение на js.
    Только очень по корявому получается. :(
    http://forum.htmlbook.ru/index.php?showtopic=15047
     
  8. x_Dev

    x_Dev Создатель

    Регистр.:
    2 фев 2009
    Сообщения:
    13
    Симпатии:
    1
    Да, там много лишнего. Сегодня вечером постараюсь реализовать красивее.
     
  9. funest

    funest Постоялец

    Регистр.:
    2 июл 2007
    Сообщения:
    145
    Симпатии:
    38
    Был бы признателен )
     
  10. x_Dev

    x_Dev Создатель

    Регистр.:
    2 фев 2009
    Сообщения:
    13
    Симпатии:
    1
    Вообщем проверил на Опере 9.27, 9.64, IE6, IE7(IETester), IE8. Вроде все нормально работает. Скрипт нужен только для Оперы. Потестить тщательней не получилось, так что проверь. 36 это минимум высота блока при одной строке.

    Должно кстати при резиновой ширине работать.

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
    	<style>
    	#container{width:700px; margin:0 auto; padding:9px; overflow:hidden; border:1px #aab solid;}
    	.bg{height:300px;width:100%;background:#0099FF;}
    	.hd{background:#000;color:#fff;font-size:18px; margin-top:-36px;float:left;}
    	.indent {padding:7px;}
    	</style>
    	<!--[if IE]>
    	<style>
    	 	.hd{width:expression(this.clientHeight>36?"100%":"auto");}
    	</style>
    	<![endif]-->
    
    	<script>
    		function opera_fix(){
    			if (window.navigator.userAgent.indexOf ("Opera") >= 0){
    				widthControl();
    				document.body.onresize = widthControl;
    			}
    		}
    		function widthControl(){ 
    			var bl = document.getElementById("hd");
    			if(bl.clientHeight>36){bl.style.width="100%";}else{bl.style.width="auto";}
    		}
    	</script>
    
     </head>
    
     <body onload="opera_fix();">
    
      
    	<div id="container">
    		<div class="bg"></div>
    		<div class="hd" id="hd"><div class="indent">Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок Заголовок  Заголовок</div></div>
    	</div>
    
    
     </body>
    </html>
    
     
    funest нравится это.
Статус темы:
Закрыта.