Debra Kappmeyer wrote: > So, I took Dave's "friendly" advice to "learn CSS layout!" and am > trying to do that and attempting my very first (so keep that in mind) > CSS layout.
It's looking alright :-) Just the usual IE-bugs in need of fixing... and a couple of "human bugs" that should be corrected ;-) > http://www.viterbo.edu/proofs/CSSTest/index3.html > First when I have the list near the bottom, I'm wondering why there's > a large gap between the 4. And the A. But I don't have that problem > in the unordered list above it. Lack of specificity for some of the combinations in the rule that is supposed to zero out 'margin-top' on nested lists. Write it like this: div#content ol ul, div#content ul ol, div#content ol ol, div#content ul ul, div#content ol a, div#content ul a {font-size: 1em; margin-top: 0;} ...and it will work just fine. The specificity problem is rooted in this... div#content ol, ul {font-size .8em; margin-top: 1em; margin-left: 1em; line-height: 1.4;} ...where 'div#content ol' has a much higher specificity than 'ul'. 'div#content' acts as "targeting" and adds specificity to the rule for 'ol', but *not* for 'ul'. See: <http://www.w3.org/TR/CSS21/cascade.html#specificity> for more on the subject. > The other problem is in Windows IE (which I've noticed from my short > time on this list is a pretty big problem). In IE my page does very > strange things. My header and content move down below my navigation. > And even before I did something to make that happen, my content was > butted right up against my navigation background (no space like in > the other browsers). IE adds 3px width to... <img src="presentimages/hdbackground.jpg" ...> ...and... <div id="header"></div> ...so it runs out of space. div#header {width: 587px;} ...will fix that element. For the image... HTML: <img id="header-background" src="presentimages/hdbackground.jpg" ...> CSS: * html #header-background {margin-left: -3px;} ...will give IE6 the space it needs. Note that this isn't the most "solid" fix for IE/win, as it relies on "a bug fixing another bug". Better alternatives involves 'floating' more of your layout, and will require some additional markup. --- Looks like 'div#content' isn't "spaced" correctly in IE6. Adding... * html div#content {margin-left: 200px;} ...below existing style, is _one way_ to correct it. --- *General comments:* Noticed that you're leaving out optional end-tags. That'll usually work well in HTML4.01, but may create maintenance-problems later on. Also, </div> isn't optional, and there's one missing for <div id="container">. --- The nav-list in <div id="nav"> looks like a typical nav-list, so it should probably be marked up as an unordered list. regards Georg -- http://www.gunlaug.no ______________________________________________________________________ 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/
