[css-d] teaching float v. absolute positioning
Hey all, I teach web design and dev courses at the college level and often steer students away from absolute positioning as a first-choice CSS layout solution in favor of float. I've read John Faulds' post on the pitfalls of abs pos here http://csscreator.com/node/11291 and use this as a summary of the discussion for my students. Do any of you know of other hearty debates on the matter that would illuminate students who will likely enter the professional web design/dev field? Other opinions not covered in the CSSCreator thread? -- Jared M. Stein Director of Instructional Design Services Utah Valley University __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Proper float behavior question
Hey folks, I'm trying to figure out what the proper behavior is for the
following simple example:
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html
head
titleYo/title
style
#elone { width: 20%; float: left; background: green; }
#eltwo { width: 20%; float: left; clear: left; background: red;
}
#elthree { width: 80%; float: left; background: orange; }
#elfour { width: 80%; float: left; background: blue; }
/style
/head
body
div id=elone1/div
div id=eltwo2/div
div id=elthree3/div
div id=elfour4/div
/body
/html
IE 6 Win allows #elthree to set the position it's top outer edge to the
top outer edge of #elone. Firefox Win only allows #elthree to set the
position of its top outer edge to the top outer edge of #eltwo--the
clear: left in #eltwo constraining the flow of the following floaters.
Relevant W3C specs ( http://www.w3.org/TR/CSS21/visuren.html#float-rules
or http://www.w3.org/TR/CSS21/visuren.html#propdef-clear ) don't make
the proper behavior clear to me. If anything, they suggest that IE Win
6's rendering is correct (A floating box must be placed as high as
possible.)
Jared Stein
Director of Instructional Design Services
Utah Valley State College, MS 149
http://www.uvsc.edu/disted/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Styling the br element?
How much styling can one do with the br element? I'm sure this has been asked before, but I can't find any answers. And really the reason I ask this is because I don't fully understand the properties of the br element, so where can I find info on the br element's default browser render properties? Case example: I've got the following: address Someone's Collegebr/ 800 West University Parkwaybr/ Sometown, Somestate 12345 /address I want the address to run horizontally (which I can do by marking the br to display: none) but i also want the br's to display as a separator (maybe an image, or maybe a border). I know it would be easier to wrap each line in a span element, but the question of styling a br intrigues me. Jared Stein Adjunct Instructor Multimedia Communications Technology Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Phantom mirror text in IE 6x Win
Here's a weird one I encountered... This page is using 3 div.article partitions to do some (slightly uncomfortable) curved corner boxes. Everything seems to be fine in Windows Firefox. Get some freaky behavior in IE 6 (surprise surprise). I'm currently troubleshooting, but here's a synopsis of the two problems: 1. On Windows IE 6, the left-hand div article box shows a large gap where the ul is. No such behavior in Firefox, and the gap is closed when the ul is set to display: none. Is not solved by controlling ul/li margin/padding. 2. On Windows IE 6, the last instance of How to Buy repeats the word Buy apparently outside all the divs. This is the Buy from the third div, and clicking on this phantom Buy does select the How to Buy link (though does not activate it). This anomaly disappears if all left/right margins from all div.article boxs. I have also in my desperation tried using nbsps for the spaces in the phrase, tried hiding overflow, tried nowrap on the white-space, tried just eliminating the margin on the last box. No luck. Page: http://www.simpliphones.com/products/upgrades.php CSS: http://www.simpliphones.com/screen.css http://simpliphones.com/products/upgrades.css Any ideas? Thanks for looking... Jared Stein Adjunct Instructor Multimedia Communications Technology Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Alternative font sizing
Folks, let me propose a scenario to you and get your ideas on how useful/useless you would find it. As you know CSS 2 allows absolute and relative font sizing. Of course relative refers to the font size of the parent element, but I've often found myself pining for the ability to use a ratio relative to the size of the parent element itself rather than the parent's font table. This is primarily because while I love the concept of liquid designs, such layouts often fail in terms of usability when long-ish text blocks run longer than the print-standard of 50-70 characters per line. A fixed width design is significantly weaked by high-res displays, which makes a forced standard line length too often too small. An em/ex-based design width is OK, but requires the user to adjust the type size manually. If one accepts this as a legitimate problem, it seems to me the most obvious solution would be to provide a method of basing the current em space not on the parent element's em space, but on a percentage of the parent element's width. If dynamic, this would change the font size based on the width of the element particular to each user, but would still allow for the user to override the page's display with their own +/- adjustments. My colleague and I have been playing with this concept, and implementation is possible and pretty straight-forward with a little Javascript, but I wonder if such stuff would be of interest to anyone else? Jared Stein Director of Learning Media Development Distance Education, Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ phone: (801) 863 8929 office: Learning Center 221d __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Alternative font sizing
Yes, I see your point that this is the case for most people with standard OSs and browsers and resolutions, but wouldn't we like to move beyond 72dpi eventually? My own point of view (and this is where my 'logic' comes in) is that higher-res is always better if the software supports it. For example I have a little 14 laptop screen set to 1400x1050 (or higher depending on the project); I personally set Win to show large fonts so everything's readable, but it seems OSs of the future would better detect the res/screen and adjust the base font size automatically--even if it's just to set a baseline for the default or 'normal' setting. Oh, and the javascript for this took all of 20 minutes to write and test, so it's really not a big investment of time, and I don't see it as a hole. Currently the js has font-size dynamically increase/decrease as the window is resized, but it could calculate the window size on load and set the font-size once, with no font-size +/- as the window resizes--really this is no different than designers setting a base font-size for any element off the bat, except that in this case the base font-size is not some arbitrary 12pt/16px/0.9em or whatever, it's calculated based on the user's initial window size. Anyway, a few have commented that this is a bit off-topic, so I'll invite any further points/counterpoints offlist! Jared Stein Director of Learning Media Development Distance Education, Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ phone: (801) 863 8929 office: Learning Center 221d Mark Howells [EMAIL PROTECTED] 3/7/06 10:38 AM Hmm, maybe it's just me getting old and wanting my text bigger! Still one lingering thought: as user displays increasingly become higher resolution, there certainly will be a point--and I imagine not too far down the road--where what is currently readable by most people with the standard layout and font size will not be easily legible to a broad base with 'default' high-res displays. I think your 16x12 example is a good one, but really what would be wrong with setting it thus on a 17 monitor if the page display was more suitable to high-res? I'd question the logic of that. You have to have really good eyesight to be able to use any standard OS at 1600 x 1200 on a 17 display. The point is that as a user, you should be able to increase the text size if YOU want to, not as the designer forces you to. My point wasn't about cramming a big resolution into a small window space, more that most people I know who use 16x12 are working with big monitors and normal (c. 1024 - 1200) browser window widths. If you're using a small monitor, cranking it up to 1600x1200 and then having to use a full-width browser window whilst zooming everything to be able to read it, why not just use 1280 or 1024? If displays do increase in resolution, and remain at 17 or 20, then that'll mean that the text will be pretty illegible and 72 dpi web images pretty tiny if the resolution goes above 1920! Getting back onto the CSS tracks (here on the CSS list!), you'll avoid all kinds of pointless, expensive and time-consuming development by defining text sizes in such a way as to allow for client-side resizing, rather than a nifty technical solution which I, for one, would find annoying as a user. I may be Superman and be able to read 10px Geneva on a 15 monitor at 1600x1200, but if not, then I'll increase the text size if I need to. I'd respectfully say that you're digging yourself into a hole which you really don't need! Regards Mark Howells www.permanenttourist.ch __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Table of Contents with flexible dotted lines
Hey all, I've come up with this work-around to deliver a typical book-like table of contents entry appearance (with dashes/dots between toc entry and page number) and while it seems fully flexible, pretty reliable, and not too trashy in terms of coding, I'd still welcome anyone's alternative approaches or experiences. Page available, with CSS embedded: http://stein.uvsc.edu/steinja/tableofcontents.html J. Stein Director of Development Distance Education, Utah Valley State College, MS 149 http://www.uvsc.edu/disted/ phone: (801) 863 8929 office: Learning Center 221D __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
