Nov 04
An Event Apart 2008, Day 2, 8:30am – 9:30am
Read the previous talk in this series, Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or view An Event Apart’s Table of Contents
Eric Meyer Live Code Workshop
In this talk, Eric will be going through CSS questions and websites previously submitted by An Event Apartniks.
- http://www.stratom.com
- Dropdown menus… “Are those coming back and I didn’t hear? Because last time I heard, that wasn’t so good.” – Eric Meyer
- menus: <li><span><a> – span had a background image, but li had none. Why not just take out the span and put that background image on the li?
- “Spanitis”
- <div id=”menublock”> is wrapping the menu ul – why? Just put menublock on the ul. Not everything needs a container! Sometimes just the element can contain itself!
- https://mms.mckesson.com/html/main.menu.mck… macdeek?
- A lot of px sized text. Tsk tsk tsk. It’s no longer a real issue though, now with the death of IE6 (IE6 is dead woohoo! Also more implementation of position: fixed is another sign of its death
. “The death of IE6 does not mean that it is dead for you.” – Eric Meyer - <p class=”p”> Stop! <p class=”topnews”> I can get, but =”p”? Stop! Inheritance!
- .mck files: incorporating branding into your file extension. Why not?
- No background-color included for html, body. Tsk tsk.
- Everything done in px is asking for trouble. If you’re going to use px, set the body to px, and then use percentages for everything else. Relative font-size is not going away. Set a baseline. Setting px on everything is the same problem as setting font-family on everything. A change is a big headache.
- li background-image: good for bullet replace, but put the background-image on the a element so that you can have a rollover without having to use JavaScript.
- overflow: auto magically makes floated elements expand to take up the height of their children. Sometimes have issues with scrollbars being invoked by browser, but magic. Eric hasn’t been able to have anyone explain to him why this works, but it does.
- http://www.delta.com
- A lot of style attributes on the markup. You’re combining style and markup, which we spent the better part of a decade trying to get away from. Try your best to eliminate inline styles.
- The “Book a Trip” section should really be a table – arguably, it is a data form where your data has yet to be filled in by the user. This begs the question, are all forms tables?
- Why does Eric use tables over dls or whatever? The semantics are a very subjective thing. He does whatever is most pain-free, so sometimes OL, sometimes DL, sometimes a table.
- Firebug input a -x-system-font: none; in the CSS, that doesn’t actually exist in their CSS. -x-blah is probably from Firebug and not from the actual CSS.
- “Using floats for layout is a hack.” – Meyer
- http://www.tablethotels.com
- Use shorthand CSS declarations so that your CSS is smaller, easier to manage, etc. Don’t keep it separated!
- The form as a lot of divs…
- He has a hard time for getting irritated with form markup because of what he was saying to me earlier about it being so subjective and dependent on the developer’s feeling of semantics for that form.
- http://forwardlymphoma.org
- If something has an alt text of ” “, then why is it not a background-image?
- <img> of a sphere, then <img> of a button text “Donate”, and both were alted to “Donate” “Donate”, annoyance for a screenreader. Just have alt text of sphere be “”, or even better make it the background-image.
- overflow:auto to have scrolling sections (the look of frames) may be getting more popular in the future! The bad thing with frames is that there are a million files all over the place, not the scrolling thing.
View the next talk in this series: Design Lessons in Chess by Rob Weychert, or skip to An Event Apart’s Table of Contents
Popularity: 6% [?]
