CSS Cheat Sheet?
- Started
- Last post
- 17 Responses
- SteveJobs
does something like this exist for getting stuff to work across browsers? this really isn't my thing, and i'm having a helluva time trying to get stupid things like spacing between h3 and hr elements, or floated divs, correct. what works for one browser, breaks in another. most of my problems are related to vertical spacing it seems.
is there any rule of thumb for stuff like this? the site is done, and i just need to get things look 'close'. doesn't have to be perfect.
- estetic0
use conditionals to call browser specific stylesheets for IE - 90% of the time webkit and mozilla handle things pretty much the same way. If you are seeing large difference between those two its usually a good indicator that something is awry in your code (syntax issue or just not a good way to do something)
- estetic0
I have also started implementing this recently:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html id="ie6" lang="en-US"> <![endif]-->
<!--[if IE 7 ]> <html id="ie7" lang="en-US"> <![endif]-->
<!--[if IE 8 ]> <html id="ie8" lang="en-US"> <![endif]-->
<!--[if IE 9 ]> <html id="ie9" lang="en-US"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-US"> <!--<![endif]-->
Then you can write css that targets elements in different browsers:
html#ie7 div.container h1 {
Margin: 1px;
}
- alicetheblue0
this might help
http://www.noupe.com/css/using-c…
- SteveJobs0
@estetic
wow, that seems very high-maintenance. every time you make a change, you possibly have to make it in several other places. i guess this is common though?
- ukit0
It really shouldn't be much trouble to write reliable cross browser code these days. Seeing huge differences in different browsers is probably an indication that you're "doing it wrong."
Try starting with a template or framework like the 960 grid that is already working cross-browser and reverse engineering to get what you want.
- SteveJobs0
here are the kinds of things i'm figuring out: instead of an hr element, it's easier to use a div with a bottom border and set the top and bottom margins. does this sound right?
- It's a good hack, which I prefer over HR elements, tbh.Continuity
- acrossthesea0
Are you starting off with some sort of reset CSS file?
- nope. didn't know about them till now when i just googled it.SteveJobs
- is that: margin : 0; padding : 0;
...etc???alicetheblue - Yeah you're on the right trackacrossthesea
- just learning, too :)alicetheblue
- estetic0
as ukit said - you shouldnt be seeing huge shifts across modern - semi-modern (ie7+) browsers. Any code where I am getting that specfic is in a different ie only style sheet which probally only contains 10 or so rules and its mostly aesthetic stuff.
IE6 (which is still a concern around here) is a different story, dont usually have to resort to hacks but definitly need to make tweaks to achieve layout at times
- Gordy220
I agree with the reset stylesheet - its a little bit of extra code to d/l but it helps immensely: http://meyerweb.com/eric/tools/c….
That, coupled with a few tweaks with Conditional stylesheets and you're set.
- pillhead0
Padding 0
Marging 0resets really can do help the situation.
- You only need this + good coding, except for IE6 sometimes.jadrian_uk
- phatwrx0
Why not use a bottom border and padding instead of HR
- tymeframe0
^ yep, our reset is simply...
* {
margin: 0;
padding: 0;
border: 0;
}- what about:
font-size : 100%;font : inherit;
vertical-align : baseline; ???alicetheblue - wildcard reset? i dont think so.chalk
- Haven't run into any issues yet. And I use * so that everything initially inherits these attributestymeframe
- what about:
- duhsign0
^this
- chalk0
I used to have a copy of this printed and hanging at my desk: http://www.addedbytes.com/cheat-…
- SteveJobs0
how do you make a div that contains floated content expand to the size of that content? i have a mouseover action that needs to occur, kind of like how you mouse over a qbn post and the comment button, dog-ear link, etc. come up. i obviously can't set the height of the div since i won't know how much content it will contain. what i have works in ie7, but not ff
- SteveJobs0
^nevermind,
found the hack:
http://tangible.ca/articles/35/h…"The solution is surprisingly simple. If you add a div with clear:both as it’s style just before the parent div closes, the parent div will expand to fit the floated div."