serzh
-
Posts
6 -
Joined
-
Last visited
serzh's Achievements
Explorer (1/14)
0
Reputation
-
Наш?л несколько решений для создания аналога min-width под IE 6. Для наступающих на те же грабли, в дополнение к предыдущему посту привожу ещ? один вариант: <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" /> <title> min-width in Internet Explorer - fixed </title> <style type="text/css"> body {background:#fff; font-family:"trebuchet ms", "times new roman", times, serif; font-size:76%;} .css {color:#983; font-family:"times new roman", serif;} .play {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; margin:0; color:#000; font-weight:normal;} /* for all browsers that understand min-width */ .container {position:relative; width:90%; min-width:400px;} .holder {display:block; color:#000;} /* method 1 a bodge for IE5.5 and IE6 browsers */ * html .container {border-right:400px solid #fff;} * html .holder {display:inline-block; position:relative; margin-right:-400px;} /* for all browsers that understand min-width */ .container2 {position:relative; width:90%; min-width:400px;} .holder2 {display:block; color:#000;} /* method 2 a bodge for IE browsers IE5.01, IE5.5 and IE6 */ * html .container2 {border-right:400px solid #fff;} * html .holder2 {float:left; position:relative; margin-right:-400px;} /* General styling */ h1 { font-size: 5.3em; letter-spacing: -3px; color:#06a; font-weight:normal; margin:0; font-family:"times new roman", times, serif; } h2 { font-size: 2em; color:#f60; font-weight:normal; margin-top:0; padding:top:1em; } .b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin:0 5px;} .b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px;} .b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px;} .b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px;} .content {border-right:1px solid #aaa; border-left:1px solid #aaa;} h1, h2, h3, h4, p {margin-left:5px; margin-right:5px;} p {margin-bottom:0; padding-bottom:1em;} .rule {width:400px; background:#c00; color:#fff; margin:1em 0;} </style> </head> <body> <h1 style="position:relative; z-index:100;"><b class="css">CSS</b><span class="play">play</span></h1> <h2>experiments with Cascading Style Sheets</h2> <h3 class="norm">by Stu Nicholls</h3> <h1>method 1</h1> <div class="container"> <div class="holder"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h2>{width:90%; min-width:400px;} includes IE5.5 and IE6</h2> <h3>this is the first of two ways that I have found to emulate true min-width in IE and uses an inline-block, a border-width and a negative margin (NO javascript).</h3> <h4>this div has a min-width of 400px and a width of 90%. You can set the width as any percentage and the min-width as a px or em value.</h4> <p>discovered 11th May 2005 by Stu Nicholls</p> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div> </div> <div class="rule"><p>this div is 400px wide and can be used as a guide for min-width.</p></div> <h1>method 2</h1> <div class="container2"> <div class="holder2"> <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div class="content"> <h2>{width:90%; min-width:400px;} includes IE5.01, IE5.5 and IE6</h2> <h3>this is the second way that I have found to emulate true min-width in IE and uses float left, a border-width and a negative margin (NO javascript).</h3> <h4>this div also has a min-width of 400px and a width of 90%. You can set the width as any percentage and the min-width as a px or em value.</h4> <p>discovered 11th May 2005 by Stu Nicholls</p> </div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> </div> </div> <p>compliant <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.1!">xhtml 1.1</a></p> <p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=IE min width" title="please leave your comments here ">leave your comments here</a></p> <p><a href="../index.html" title="home">home</a></p> </body> </html> Всем спасибо за участие в обсуждении.
-
2 ЗАВАРКА Как не игрался - не помогает. Я в трауре...
-
Извините, но я не понял вашего вопроса. Что такое "+ экспрешн для ie6"?
-
Эээ..., поторопился. Надо было применить указанные свойства к диву, который объединяет обе колонки Для оперы и лисы добился положительного результата, а вот для IE6 - дизайн просто стал фиксированной ширины (улетучилась "резиновость" ) Здесь зв?здочнка - не опечатка?
-
Нет, это не помогает ни в одном браузере.
-
Здравствуйте. Обращаюсь с вот такой проблемой, для которой никак не могу подобрать решение. Есть "резиновая" страница, состоящая из двух колонок на базе div: правая фиксированной ширины для меню навигации, а левая - с основным текстом, горизонтальные размеры которой подстраиваются под размеры окна браузера. Под текстом находится форма обратной связи. Можно ли как-то ограничить горизонтальные размеры левой колонки оредел?нной величиной, скажем, 300px? Пока никакого решения (без использования таблиц) не наш?л. Просто если совсем сузить окно браузера, элементы формы залезают на меню навигации, а мне этого не нужно.