mdibb.net

CSS and conditional statements

I was playing around with a few ideas for a site redesign a while ago. I wanted a pretty sort of "heading" thing for the site, but decided that instead of using an image I'd be a good, accessibility-aware, standards-compliant guy and do it all with CSS. Fine. Stick in a couple of DIVs, set the background colours and you're done. At least I thought it would be easy - Firefox (and so I assume all/most Gecko based things) seems to whack on a huge extra margin at the bottom of the DIVs.



So anyway I didn't realise this at this stage - stuck in all of the HTML and CSS, chose my colours I was going to use, padded the page out with some lorem ipsum and double clicked the html file, which loaded it up in Internet Explorer 6 (this is the default action for my Windows setup - I usually browse with firefox). This is what it looked like (although I've added in a dashed border around the problem area for clarity). Great - exactly what I wanted, it all lines up and the colours work insitu. Ok now lets have a look at what Firefox makes of it. Hmm ok so thats not good - there is a huge chunky bit of space at the bottom of the indicated DIV that buggers up the design of the page - you can see the darker red part of the header which is the height that the lighter red section should be. Simple solution? - lets just explicitly define margin-bottom to 0px, right? Wrong - doesn't make a difference. Ok, lets have a negative margin-bottom. Well, that works but then it buggers up the IE rendering! So what is the solution? I was googling for some answers (rather unsuccesfully though - there was a lot of unrelated noise to wade through in the results) and I stumbled on this whilst getting carried off on some random tangent - conditional statements in CSS. Knowing this I could simply put in a little dirty hack in the CSS to get Firefox to use a negative margin-bottom value, but have IE just use a 0px margin-bottom:

margin-bottom : -40px; <!--[if IE]> margin-bottom : 0px; <![endif]-->
So now, Firefox (and everything else for that matter - cant be bothered to check the rendering with Opera and I dont have access to Safari but thats Gecko anyway) will use -40px for its margin-bottom, but IE will use the 0px value. Tried it again and now everything looks as it should in both browsers - a very handy little CSS hack I am sure you'll agree! I'm not sure how widely this is supported, but I'm assuming that the huge majority of users are using IE5 or 6, or something like Firefox or some other Gecko browser so I'm happy.
If anyone has a proper solution to this, I'd love to hear it! Feel free to get in touch!

Back 23.02.2006.