SitePoint Sponsor |
|
User Tag List
Results 26 to 50 of 63
-
May 31, 2009, 13:48 #26
-
Jun 1, 2009, 01:33 #27
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Are you sure you worked out a way that will work in IE6/7 Paul? Not changing the HTML and replicating the effect in good browsers was easy.
-
Jun 1, 2009, 02:00 #28
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jun 1, 2009, 14:05 #29
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a correct entry for both parts of quiz 4 (shadow text) from Erik J which works just as expected
Thanks Erik.
-
Jun 6, 2009, 04:39 #30
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I noticed that the screenshot for this Quiz 2 was clipped at the left side.
Here is the screenshot uncut where also IE6 shows.
.Happy ADD/ADHD with Asperger's
-
Jun 6, 2009, 05:28 #31
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Thanks Erik
I'll leave the quizzes running over the weekend to give a few more people a chance to have a go.
-
Jun 6, 2009, 19:11 #32
thanks this test. I'm improve my skill CSS
-
Jun 7, 2009, 08:36 #33
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
by the looks of it im not making it.
ill just try after the quiz has ended without looking at the answers...
-
Jun 10, 2009, 03:11 #34
- Join Date
- Feb 2009
- Posts
- 1
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
In the 4th quiz 2nd part it's easily done, but then the CSS code becomes very dependent on the heading. For example, if we change the heading text, the shadow effect won't work anymore. So I think the solution for the 1st part is more usable.
-
Jun 10, 2009, 04:04 #35
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jun 12, 2009, 12:39 #36
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Backkk guys. When will be answers?
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jun 12, 2009, 14:14 #37
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jun 12, 2009, 14:18 #38
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Bah I'll have a second shot at them...all 4.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jun 15, 2009, 02:53 #39
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Solution Time
Thanks to everyone that took part and had a go and anyone that watched with interest.
Thanks especially to Gary, Maleika, Erik, Eric Watson and Ryan for taking part.
Erik is the overall winner as he completed three of the quizzes (it would have been four but that as his quiz anyway). Gary had the quickest entry for the equal spread and although it only works in modern browsers but as there were no other closer entries than Gary wins that one
I'm short of time as I am away on holiday tomorrow for 2 1/2 weeks so forgive that these explanations are short but I'm sure Erik can fill you in with the details later if you have questions while I'm away.
Quiz 1 (advert to the side of page and no scrollbar)
This confused a few of you and I thought you would find it easy but most of you stumbled on this.
Here is my original solution:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> html,body{ margin:0; padding:0; } h1,p{margin:0 0 1em} #page { width:760px; margin: auto; text-align:left; background:red; position:relative; z-index:2; } #adholder { width: 100%; overflow: hidden; position: absolute; top: 0; left: 0; } #adinner { width:760px; margin:auto; } .adright,.adleft { width:160px; position: relative; margin:0; float:left; height:600px; overflow: hidden; background:#52b502;/* for testing */ z-index:99; display:inline; } .adright{float:right;left:170px;} .adleft{left:-170px} </style> </head> <body> <div id="adholder"> <div id="adinner"> <div class="adright">Advert goes here</div> <div class="adleft">Advert goes here</div> </div> </div> <div id="page"> <h1><a href="#">Centred page content goes here</a></h1> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </body> </html>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz #24a / Erik J</title> <style type="text/css"> html, body{ margin:0; padding:0; width:100%; min-height:100%; } html{ overflow-y:scroll; } #adwrapper { position:absolute; width:100%; min-width:760px; min-height:100%; overflow:hidden; } * html #adwrapper { width:auto; height:100%; overflow-y:visible; } #page { position:relative; width:760px; margin:auto; padding:1px 0; text-align:left; background:red; } #ad1, #ad2 { position:absolute; top:0; right:100%; width:160px; height:700px; background:green; } #ad2 { right:auto; left:100%; } </style></head><body> <div id="adwrapper"> <div id="page"> <h1>Centred page content goes here</h1> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>test</p> <p>TEST</p> <div id="ad1"> <p>Advert goes here</p> </div> <div id="ad2"> <p>Advert goes here</p> </div> </div> </div> </body></html>
No one was even close to Erik's original although Gary came up with a version for modern browsers.
Erik utilised text-align:justify to center the elements and the use of some non breaking spaces to trigger the full width of the line.
Erik's original:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Distributed Horizontal Menu</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> .nav { margin:auto; border:3px outset #66f; padding:0; min-width:42em; width:95%; height:44px; overflow:hidden; background:#039; text-align:justify; font:bold 88%/1.1 verdana; } .nav li { display:inline; list-style:none; } .nav li.last { margin-right:100%; } .nav li a { display:inline-block; padding:13px 4px 0; height:31px; color:#ddd; vertical-align:middle; text-decoration:none; text-transform:capitalize; } .nav li a:hover { margin:-3px; border:3px inset #66f; color:#ff6; background:#36c; } </style></head><body> <ul class="nav"> <!--[test to comment out random items] <li> <a href="#">netscape 9</a></li> [the spacing should be distributed]--> <li> <a href="#">internet explorer 6-8</a></li> <li> <a href="#">opera 10</a></li> <li> <a href="#">firefox 3</a></li> <li> <a href="#">safari 4</a></li> <li class="last"> <a href="#">chrome 2</a> </li> </ul> </body></html>
Gary's answer used display:table to good effect as follows in this nice demo.
Gary:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" /> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="author" content="Gary Turner" /> <style type="text/css"> /*<![CDATA[*/ ul { display: table; margin: 1em auto 0; padding: 0; text-align: center; width: 90%; } li { display: table-cell; border: 1px solid black; padding: 0 5px; } /*]]>*/ </style> </head> <body> <ul> <li>menu item</li> </ul> <ul> <li>menu item</li> <li>menu item</li> </ul> <ul> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> </ul> <ul> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> <li>menu item</li> </ul> </body> </html>
Quiz 3: (Min-width)
This quiz by Yurikolovsky was to achieve a min-width in IE6 without using scripting or expressions. You didn't actually have to look far for the answer because it is there in the CSS faq for all to see. Unfortunately not many of you spotted it. The trick is to use a wide border on an outer div and then drag the content into the border.
In the second part of this quiz we set a trap for you because IE has a limit on how wide borders can beThat's why we asked for a a rather large min-width to trigger this bug. IE will only apply a maximum border of 960px width and therefore would fail on anything larger.
The answer is easy as you just nest two divs and give each a border.
Yurikolovskys original normal width answer:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>YuriKolovsky - CSS Quiz suggestion #2 -min-width in ie6 and moving buttons</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> /* for all browsers that understand min-width */ .width {width:100%; min-width:960px;} /* the bodge for IE6 browsers */ * html .minwidth {border-left:960px solid #fff; position:relative; float:left; z-index:1;}/*this star hack can be moved into some ie6 only conditional comments*/ * html .container {margin-left:-960px; position:relative; float:left; z-index:2;}/*this star hack can be moved into some ie6 only conditional comments*/ /*below is for visuals only*/ * { margin:0; padding:0; } #navbar { width:100%; background:orange; padding-bottom:10px; padding-top:200px; border-bottom:red solid 7px; } ul { list-style-type:none; background:orange; overflow:hidden; display:block; margin:0 auto; } ul li { display:block; float:left; position:relative; } a { display:block; color:#000; background-color:#ebebeb; padding:1em 0 1em 0; position:relative; text-align:center; width:95px; } a:hover { top:5px; left:-5px; position:relative; border-top:solid orange 7px; border-right:solid orange 5px; margin-right:1px; margin-top:-7px; z-index:2; margin-left:-5px; left:0; width:94px; } li { border-left:solid #999 7px; border-bottom:solid #000 7px; margin:10px 0 0 4px; } i { border-top:solid orange 7px; border-bottom:0; border-left:0; border-right:solid #999 7px; width:0; display:block; line-height:0; height:0; position:absolute; left:-7px; top:0; } b { border-bottom:solid orange 7px; border-top:0; border-right:0; border-left:solid #000 7px; width:1px; height:0; display:block; line-height:0; right:0; bottom:-7px; position:absolute; } p { padding:0.2em 1em 0 1em; } </style> <!--[if lte IE 6]> <style type="text/css"> b { right:-1px; bottom:-8px; } a:hover { border-right:solid orange 6px; margin-right:0px; } </style> <![endif]--> </head> <body> <div class="width"> <div class="minwidth"> <div class="container"> <div id="navbar"> <ul> <li><a href="#1">stuff</a><i></i><b></b></li> <li><a href="#2">stuff</a><i></i><b></b></li> <li><a href="#3">stuff</a><i></i><b></b></li> <li><a href="#4">stuff</a><i></i><b></b></li> <li><a href="#5">stuff</a><i></i><b></b></li> <li><a href="#6">stuff</a><i></i><b></b></li> <li><a href="#7">stuff</a><i></i><b></b></li> <li><a href="#8">stuff</a><i></i><b></b></li> <li><a href="#9">stuff</a><i></i><b></b></li> </ul> </div> <div id="content"> <p>content content, bla bla bla.<p> <p>no javascript solution to ie6 min-width problem<p> <p>the little buttons are just for the sake of fun, and doing them can add more to the quiz<p> <p>write instructions here.<p> <p>(just for you paul, this quiz can be made harder, because ie6 does not support borders larger than 960px, this means that you can make it into a additional challenge, i solved it by repeating the min-width trick 2 times with borders of 500px, but when the solution is not right infront of you, its not as easy to solve, plus it will teach them of the additional ie6 limitation) (you can add some long text here just so that the min-width is more visible when you resize window)<p> </div> </div> </div> </div> </body> </html>
Code:<!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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style> * { margin:0; padding:0 } body { background:#f2f2f2; text-align:center; } #outer { width:80%; background:#fffccc; margin:auto; text-align:left; position:relative; min-width:1024px; border:1px solid #ccc; } h1 { text-align:center; } p { padding:10px; margin:0 0 1em 0 } </style> <!--[if lt IE 7]> <style type="text/css"> #inner{border-left:512px solid #fffccc;float:left;} #inner2{border-left:512px solid #fffccc;float:left;} #content{margin-left:-1024px;height:1px;position:relative;} </style> <![endif]--> </head> <body> <div id="outer"> <div id="inner"> <div id="inner2"> <div id="content"> <h1>Min-width in Ie without scripting</h1> <p>This layout is restricted to a minimum of 1024px pixels but will also expand to 80% of the available space. This is useful if you have floats that you don't want to drop or images that you don't want clipped.</p> <p>Ie doesn't understand min-width and the usual way to restricts its width is to use scripting or an expression, both of which rely on javascript being enabled. This layout however just uses CSS for the effect and in fact contains no hacks and would work in any browser, however I have hidden the extra styles in conditional comments because other browsers don't need them anyway as most of them understand min-width.</p> <p>The concept is simple in that the min-width is achieved by nesting an element that has a left border equal to the minimum width we require. A further nesting is then used and the element is dragged across the border with negative margins.</p> <p>The main drwaback is of course the 2 non-semantic divs required to do this. However its another choice that can be made if you want this effect, it's just a shame that we have to go to such lengths for a simple effect.</p> <p>This is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : </p> <p>This is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : his is the content : this is the content : </p> </div> </div> </div> </div> </body> </html>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz #24c / Erik J</title> <meta name="generator" content="PSPad editor, www.pspad.com"> <style type="text/css"> html, body { margin:0; padding:0; } .centerminwidth { margin:auto; width:90%; min-width:1100px; background:gray; overflow:hidden; } * html .centerminwidth { overflow:visible; } .ie6minwidth1, .ie6minwidth2, .ie6minwidth3 { float:left; position:relative; } * html .ie6minwidth1 { padding-left:1100px; } * html .ie6minwidth3 { margin-left:-1100px; } p { float:left; margin:0; border:1px solid gray; width:98px; height:100px; background:green; text-align:right; } </style> </head> <body> <div class="centerminwidth"> <div class="ie6minwidth1"> <div class="ie6minwidth2"> <div class="ie6minwidth3"> <p>100px</p> <p>200px</p> <p>300px</p> <p>400px</p> <p>500px</p> <p>600px</p> <p>700px</p> <p>800px</p> <p>900px</p> <p>1000px</p> <p>1100px</p> <p>1200px</p> <p>1300px</p> <p>1400px</p> <p>1500px</p> <p>1600px</p> <p>1700px</p> </div> </div> </div> </div> </body> </html>
This test provided by Ryan was to produce shadowed text in all browsers and the answer was to simply overlay one piece of text on another.
Ryans Original:
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> html, body { height:100%; } * { margin:0; padding:0; } body { font-size:100% } h1 { margin:0; padding:0; color:white; position:absolute; left:0; right:0; font-size:200%; font-weight:bold; } h1.overlay { color:darkgreen; position:absolute; left:1px; top:1px; } h2 { position:absolute; top:150px; } </style> </head> <body> <h1 class="overlay">This is the heading. It doesn't matter what font you use as long as you know this ltitle "trick" behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</h1> <h1>This is the heading. It doesn't matter what font you use as long as you know this ltitle "trick" behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</h1> <h2>This is a little textshadow which is supposed to be in CSS3...</h2> </body> </html>
The answer was to use the :before pseudo class and place the text on top from the css rather than the html. Unfortunately Firefox didn't allow absolute positioning of the pseudo class which is why the extra span was added to the html and the text in the span was absolutely placed on top of the pseudo class content instead.
As Ie6 doesn't understand the :before pseudo class I used the proprietary drop-shadow filter to create IE specific shadowed text.
My original answer:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style> h1 { position:relative; color:darkgreen } span { position:absolute; left:-2px; top:-2px; color:#fff } h1:before { display:block; content:"This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF."; } </style> <!--[if lte IE 7]> <style type="text/css"> h1{ filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, color='darkgreen', positive='true'); zoom:1.0; color:#fff; } h1 span{position:static;color:#fff;} </style> <![endif]--> </head> <body> <h1><span>This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Must work in IE6-8, Opera, Safari, and FF.</span></h1> </body> </html>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Quiz #24d / Erik J</title> <style type="text/css"> body{ font: 400 120%/1.2 sanserif; } /* Double content */ h1{ position:relative; color:black; font-size:100%; } h1 span{ position:absolute; top:-2px; left:-2px; color:silver; } /* CSS 2 and IEfilter */ h2{ position:relative; height:99em; overflow:hidden; color:black; font-size:100%; } h2:before{ display:block; margin:2px 0 0 2px; content:"Part 2, CSS 2 and IE filter) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF."; } h2 span{ position:absolute; top:0; left:0; color:silver; filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2); } </style></head><body> <h1> Part 1, Double content) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF. <span>Part 1, Double content) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF.</span> </h1> <h2> <span>Part 2, CSS 2 and IE filter) This is the heading. It doesn't matter what font you use as long as you know this little trick behind it. A simple quiz if you understand the underlying concept. Does work in IE6-8, Opera, Safari and FF.</span> </h2> </body></html>
Thanks to all the contributors and participants and hope you enjoy the solutions anyway.Last edited by Paul O'B; May 12, 2010 at 05:18.
-
Jun 15, 2009, 09:25 #40
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Paul I had a solution for the quiz 1 but you siad it had to hug the sides of the red content.
The solution you had does not touch the content
What gives?Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Jun 15, 2009, 10:44 #41
- Join Date
- Mar 2009
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
The Posting to Quiz #3 (min-width) - Eric's answer
Eric's CSS has an .ie6minwidth2. This needs to be added to the html for the solution to work in IE.
I believe this was just a typo.
-
Jun 15, 2009, 14:32 #42
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
not looking at the answers just yet, still planning to do em, eventually xD
-
Jun 15, 2009, 15:15 #43
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
My solution can be moved closer or further way as required. I just though it was more aesthetic to have a slight gap. It makes no difference with the method I used.
The attachment clearly shows the position anyway
Your solution didn't stay in tune with the centred layout which was the problem and the ads got left behind.
-
Jun 15, 2009, 15:21 #44
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Jun 22, 2009, 15:17 #45
- Join Date
- Jan 2009
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Quizzes 1–3 are great, each with a very real practical use!
Quiz 2 (equal Spread): Once again, dastardly Erik came up with something totally off the wall! Because text-align:justify doesn't cause stretching on line boxes which are "too narrow" (such as the last line box of a block), most people would have abandoned hope there… but he carried on and forced there to be a second line box by placing a sufficiently large margin-right on the last LI so that it was guaranteed to wrap! However, because we don't actually want the text of the last LI to wrap with it, he needed to place some extra character after the real text so that the wrapping would occur at that point instead. (Replace his s with 'x's to see what's going on.) Note that the only critical $nbsp;/x is the very last one, which wraps onto the next line causing the text on the first line to justify as desired. He then added a few "cosmetic" extra s/x's: one at the start of the first LI and another at the end of the last LI to push their real text away from the sides; and one at the start of each other LI to ensure that the spacing between the LIs is greater than the spacing at the start and end of the line, which looks better. (Note, however, that it's not at all clear that browsers should treat s as "fixed"-width characters; after all, they're defined to be non-breaking, not non-stretching. It would be unwise to rely unconditionally on the "distribution" behaviour that we see in the well-known browsers!)
However, the "closest" CSS 2.1 solution to the problem is to use display:table as several people did. (display:table is the only other horizontal space-distribution mechanism which exists in CSS 2.1, although a more general "flex" concept looks set to arrive in CSS 3.) IE6/7 don't support the table display types, but we can always just use conditional comments to place a secret TABLE and TR around the UL and secret TDs around the LIs; these warty but robust old browsers can recover gracefully from the muddled markup. (This technique also happens to be my favourite method of vertical centering.)
That said, the display:table solution will overflow undesirably when the menu items don't want to fit on the line, whereas Erik's solution has the advantage of wrapping onto the next line (albeit with the last line uncentred), provided you get rid of the unnecessary overflow:hidden on the UL. It's almost tempting... but any solution involving content kludges has to be frowned upon in "real" webpages.
Quiz 3 (min-width for IE6): Yuri's approach is certainly ingenious, and revolves around the shrink-to-fit behaviour of floats whose width is 'auto'. But surely if border causes problems with really large min-widths, wouldn't you just use padding instead (as he does in his second solution) rather than going overboard with nesting?
(Incidentally, in Yuri's border solution, the position:relative on .minwidth and the z-index on both .minwidth and .container are unnecessary, although the postion:relative on .container is required as usual when pulling a child out of its parent's content area. In his padding solution, the middle .ie6minwidth2 div is not ordinarily necessary but was required here because he forgot to fix the IE6 double float margin bug on .ie6minwidth3 through the use of float:left; _display:inline;.)
However, alas, this float approach is not quite correct (whether using border or padding), as easily demonstrated using Yuri's border solution and placing a coloured background on the .container. Because of the slightly broken implementation of shrink-to-fit in IE6/7, the .container does not in general occupy the full width of the viewport (or the full 960px min-width for narrow viewports); instead, it shrinks a little bit too much to ensure that the right content edge is flush with the text content. It looks ok in Paul's solution — but that's just because the layout is centred so that the discrepancy is masked.
Moreover, the float approach seems rather convoluted given that IE6 already supports a kind of min-width as we know and <del>love</del><ins>hate</ins>: if you want min-width:something together with width:auto, just use width:something for IE6. The element is then hasLayout and will expand to enclose its oversize content rather than permit overflow (in violation of CSS 2.1), in a manner akin to min-width. This isn't enough for this quiz though, because we want a real min-width including the possibility of setting a distinct width (eg width:90%; min-width:500px). But building on what we have, a more "natural" solution to the quiz is simply to give the element the required width and place inside it an empty child "prop" element of width:something which will forcefully widen the parent if it would otherwise be too narrow. Now, the height of an empty hasLayout element is equal to the line-height rather than being zero as one might expect, which gives us unwanted space at the top of the parent; but this is easily overcome by forcing the prop to have zero height: set height:0; overflow:hidden;. This gives us a genuine replacement for min-width, irrespective of font-size.
Quiz 1 (width-dependent clipping): the most interesting of the quizzes, with some neat CSS 2.1 behind the solution, as demonstrated by Paul and Erik. The theory is to have a viewport-width, fixed-min-width, overflow-hidden wrapper holding a fixed-width, horizontally centred container from which the "adverts" are pulled outside (applying position:relative for IE6/7 as usual for pull-outs).
[Erik: beware those position:absolute advert columns! They've forced you to add a few unnecessary heavyweight styles to the mix, and yet you still can't scroll the viewport vertically to reach their bottom extent if they are taller than the viewport. Better to make them floated siblings of the (floated) main content and pull them to either side of the main content using negative margins, irrespective of whether you restrict the technique to the adverts alone (as Paul did) or apply it to the page container. Note that Paul shifted them using position:relative instead, but that only works if the main content is wide enough to allow both adverts to naturally sit side-by-side in their wrapper.]
However, centred layouts are the easy part!Harder is left-aligned layouts. Here we need to float the main content leftwards and then apply the horizontal prop idea from Quiz 3 to all browsers: this sibling prop keeps the main content away from the left viewport edge to force space for the left advert, but has less and less of an effect as the viewport is narrowed until it has no effect at all when the viewport is narrower than the main content (an effect achieved using a combination of width and max-width on the prop). The prop can be implemented via CSS alone using generated content in browsers with excellent CSS 2.1 support, whereas other browsers (such as IE6/7, Firefox<=3) need a physical prop element. And of course, to work in IE6 the technique requires a working combination of width and max-width which I believe can only be achieved through the use of scripting. [In my code below I've used coloured borders on the .inner div instead of having separate advert divs, to demonstrate the concept as minimally as possible.]
Code HTML4Strict:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Width-dependent clipping</title> <style type="text/css"> html, body { margin: 0; padding: 0; } .holder { background-color: red; overflow: hidden; /* Note that IE6 doesn't need hasLayout (which overflow:hidden provides to IE7), but nor would it cause any trouble */ min-width: 500px; /* Don't attempt to hack min-width for IE6 here; The width on .outer forces the min-width anyway due to IE6 width expansion */ } .outer { background-color: yellow; margin: 0 auto; width: 500px; } .inner { background-color: blue; _position: relative; border: 0 solid green; border-width: 0 200px; margin-left: -200px; _margin-right: -200px; /* Counteract IE6 width expansion */ width: 500px; } .holder2, .holder3 { margin-top: 100px; } .holder3 { _zoom: 1; } .holder2 .outer, .holder3 .outer { margin: 0; float: left; _display: inline; } .holder2:before { content: ""; background: pink; float: left; _display: inline; margin-left: -500px; width: 100%; max-width: 700px; height: 20px; } .holder3 .prop { background: pink; float: left; _display: inline; margin-left: -500px; width: 100%; max-width: 700px; _width: 200px; _width: expression(document.body.clientWidth > 700 ? "700px" : (document.body.clientWidth < 0 ? "0px" : "100%")); height: 20px; } </style> </head> <body> <h1>Cross-browser width-dependent clipping</h1> <div class="holder"> <div class="outer"> <div class="inner"> Horizontally-centred layout requires two wrappers (probably BODY and one div are sufficient). WARNING: overflow:hidden carries danger for narrow layouts or large font sizes. </div> </div> </div> <div class="holder holder2"> <div class="outer"> <div class="inner"> Left-centred layout requires two wrappers (probably BODY and one div are sufficient). Works in Fx>=3.1, Opera, IE8. WARNING: overflow:hidden carries danger for narrow layouts or large font sizes. </div> </div> </div> <div class="holder holder3"> <div class="prop"></div> <div class="outer"> <div class="inner"> Left-centred layout requires two wrappers (probably BODY and one div are sufficient). Works in Fx<=3.0 and IE7 using a floated horizontal prop in place of generated content. To work in IE6 it requires a working combination of width and max-width which I believe can only be achieved through the use of scripting. WARNING: overflow:hidden carries danger for narrow layouts or large font sizes. </div> </div> </div> </body> </html>
Several interesting questions arise from this. In the left-aligned layout, the right advert disappears first, followed by the left advert; whereas in the centred layout both adverts disappear simultaneously. Is there a way of changing the order of disappearance? What about right-aligned layouts? (My guess is "no"… except perhaps for the right-aligned mirror image of the left-aligned layout, and even then it's possibly not achievable given that right and left [and top and bottom] are not equivalent due to how browsers will try to scroll to right/bottom content.)
Of course, in reality, you shouldn't use any width-dependent clipping technique for adverts, or any other useful content. Since (of course!) we'd only ever place adverts that our readers would be interested in, they'd be very frustrated if this content was clipped and unreachable. The technique does have its place though, such as for viewport-width overlay strips or wide main images whose horizontal extremes are nice to have on wide viewports but unimportant for narrow viewports.
[And, as always, treat any use of overflow:hidden with extreme caution! Are you really sure that your main content is not going to overflow and get clipped at large font sizes?]
-
Jun 23, 2009, 04:35 #46
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Anton P, very interesting views!
About my solutions I would like to comment:
Quiz 2 (equal Spread):
...
He then added a few "cosmetic" extra s/x's: one at the start of the first LI and another at the end of the last LI to push their real text away from the sides; and one at the start of each other LI to ensure that the spacing between the LIs is greater than the spacing at the start and end of the line, which looks better. (Note, however, that it's not at all clear that browsers should treat s as "fixed"-width characters; after all, they're defined to be non-breaking, not non-stretching. It would be unwise to rely unconditionally on the "distribution" behaviour that we see in the well-known browsers!)
...
In real life I would give ending space to the items at the list ends by e.g. a fluid padding on the list.
Quiz 3 (min-width for IE6):
...
Moreover, the float approach seems rather convoluted given that IE6 already supports a kind of min-width as we know and <del>love</del><ins>hate</ins>: if you want min-width:something together with width:auto, just use width:something for IE6. The element is then hasLayout and will expand to enclose its oversize content rather than permit overflow (in violation of CSS 2.1), in a manner akin to min-width. This isn't enough for this quiz though, because we want a real min-width including the possibility of setting a distinct width (eg width:90%; min-width:500px). But building on what we have, a more "natural" solution to the quiz is simply to give the element the required width and place inside it an empty child "prop" element of width:something which will forcefully widen the parent if it would otherwise be too narrow. Now, the height of an empty hasLayout element is equal to the line-height rather than being zero as one might expect, which gives us unwanted space at the top of the parent; but this is easily overcome by forcing the prop to have zero height: set height:0; overflow:hidden;. This gives us a genuine replacement for min-width, irrespective of font-size.
If I understand IE behavior right, it is letting the overflow grow its container only to display the overflow, while other e.g. floated content still is restricted to the container's original fluid width.
So I think in this caes if you use a content sibling to push the container wider than the viewport width, still the content could (depending of its nature) be restricted to the viewport and wrap fluid at viewport edge, while its container stays wide with an empty scroll.
Quiz 1
...
[Erik: beware those position:absolute advert columns! They've forced you to add a few unnecessary heavyweight styles to the mix, and yet you still can't scroll the viewport vertically to reach their bottom extent if they are taller than the viewport.
...
]Happy ADD/ADHD with Asperger's
-
Jun 23, 2009, 15:16 #47
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
thanks for the good read Anton P
nice review
p.s.
If I understand you right here, an extra div placed as sibling to the content would give the container that minimum width.
still the content could (depending of its nature) be restricted to the viewport and wrap fluid at viewport edge, while its container stays wide with an empty scroll.
putting a sibling of specific width inside the content box to have that content box not shrink below that size in ie6, will not do the trick completely,
it will simply create a scrollbar, but will not stop the content in the container from shrinking in any way.
if you want min-width:something together with width:auto, just use width:something for IE6.
min-width can mean min-width in terms of growing and shrinking! xD
p.p.s
hardest quizzes yet.
-
Jun 24, 2009, 14:47 #48
- Join Date
- Jan 2009
- Posts
- 42
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You're absolutely right of course! I'd forgotten all about that behaviour. How embarrassing: I must spend too much time with abstract test-cases, because I didn't think to actually put some real content in ;-)
Indeed! You've both got me thinking about why I don't usually run into this particular non-equivalence of min-width and _width. I think it's because I don't actually use min-width much on containers of free content. (I tend to be more concerned about max-width I want variable-width columns, to ensure that the line boxes don't get too wide.) I would appear to use min-width in very limited situations such as on buttons that I want to ensure are at least wide enough for their full background image to show (and I've just verified that button text does force the button to expand if the specified _width is too narrow, so I don't run into the problem in that particular case).
Apologies for my misinformation regarding this min-width exercise.Last edited by Anton P; Jun 28, 2009 at 14:41.
-
Jun 25, 2009, 04:35 #49
- Join Date
- Jun 2009
- Posts
- 6
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
quiz 1 works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I type
-
Jun 25, 2009, 06:12 #50
- Join Date
- May 2007
- Location
- Countryside, Sweden
- Posts
- 3,407
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
quiz 1 works everywhere except for a small glitch in IE6 which I'm sure is being rectified as I typeI submitted a corrected version the day after. (Post #12).
Happy ADD/ADHD with Asperger's
Bookmarks