This is basic CSS 101. I'm posting it (to share with others) because I'm happy to have figured this out on my own, instead of asking for help. ~~~~~~~~ I was having trouble figuring out how to eliminate the borders on images which also are linked. The borders are different colors in IE and FF. Not having control over the design was 'driving me nuts'. This seems to work. img { border: none; } ~~~~ Easy? "Yes" EZ if you don't know how? "NO"
Which is probably just another needless file causing increased handshaking between the server and browser that just causes you to waste more bandwidth than necessary. If anything, all you need to "reset" are the margins/padding on all elements through the universal selector ( * { margin: 0; padding: 0; } ), borders on images ( img { border: 0; } ), and the display of tables ( table { border-collapse: collapse; empty-cells: show; table-layout: fixed; } and that's it. Put those at the top of your Web page, before styling the BODY selector or anything else (unless you want to set the font size, font family, and leading (that's line-height in CSS parlance) of your headings.
Which you often see people use yet still not understand what it does. If you use border-collapse:collapse, that stupid 'cellspacing=0 cellpadding=0 border=0' nonsense is no longer needed, but be warned that borders between your table-cells will have very unusual cross-browser behavior, and you are reliant on padding inside your table-cells for most spacing as margin becomes non-functional. table-layout:fixed tells the browser that all calculations for columns are 'immediate' and not to adjust for the width of content - as such table content can be rendered as soon as it arrives, much akin to how DIV's are handled.... which is why this option removes most (not all) of the speed penalty normally associated with table rendering time.
We've upgraded to CSS 201 ~~~~~~~~~ I'm going to need to experiment several times to understand all this. Thanks
Yeah, Jason. I know. I was going to mention that, but it was late, and I was also dealing with other issues/posts/threads here and on SitePoint. Oh, and also chasing Matt down for that design template too - still haven't heard form him yet.
Wrong, because if you use form elements, you've just screwed up some important default browser rendering with the star selector reset. It's completely unacceptable. That's why global resets exists which additionally normalise other styles that the star selector alone cannot. html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0; border: 0;font-weight: normal; font-style:normal; font-size: 100%;} body {line-height: 1; color: black; background: white;} ol, ul {list-style: none;} table {border-collapse: collapse; border-spacing: 0;} caption, th, td {text-align: left;font-weight: normal;} blockquote:before, blockquote:after, q:before, q:after {content: "";} blockquote, q {quotes: "" "";} Code (Current Code Press reset): More here on why; http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
And in my experience, I haven't seen ANY over-riding of default form behavior with the * selector reset. None - not even with select/option elements.
In your experience, is that a logical way to draw a conclusion? Would it be better to attempt to gain more experience and investigate it further? It especially affects select fields.
What do you think I've been doing the past few months, Adam? Sitting on my duff eating Twinkies and bon bons while watching Oprah (sorry about the off-topic "Married with Children" joke)?
Dan, if you've been looking for it, then you will have seen the problems that exist with form fields cross-browser. Look, just make a form, fill a select field with content and see what happens when the margin and padding is taken off in firefox. Look how the longest content almost rides behind the button. Try correcting that using padding, see the results in other browsers.
certain inputs end up still having a minimum margin you have no control over in IE, while RoW actually goes to no margin/padding... People that go completely nuts on having 100% identical form element sizes cross-browser (which is damned near impossible in the first place - especially when you mix KHTML/Webkit into the equation) will find the * selector too hard to 'work around' - at least, now without using IE6/IE7 specific hacks. Pretty much anyone 'pixel perfect' obsessed and lacking in skills at 'dynamic layout' aren't going to be able to use the universal selector to null all margins - at least not without browser specific targeting after. Of course what these people MISS is that most web pages are NOT heavily form-laden, and it's still less code to just target those specific elements and set the rest globally.... It's like people overusing classes, if you have fifty items with only one styled diffferent, put one class on that one item and style the rest globally - you don't put fifty class="" attributes in there.