As a web developer one of our biggest challenges is to make web design look the same or at least similar for all browsers. Most of the browsers renders almost identical but we have one mind bugging little nasty thing called Internet Explorer, we can’t ignore this browser as it is the standard browser in Windows so it has a lot of users and of course Microsoft made extra hard for us so that every version has its own life. There are a few ways to tackle this thing, most common once are with conditional tags or CSS hacks.
September 6th, 2012
Remove space between li with display inline block
No Comments, CSS, HTML, by Joakim Ling.I’ve noticed that when you use display inline-block on li elements it creates a space between them. Even if you put margin and padding to 0. Took me a while to figure it out but the reason is that li is a whitespace independent method so if you have your elements on diffrent rows and renders a space between them.
For now this is only possible in Webkit and Mozilla browsers, the discussion about best implementation is still an ongoing project. You’ll have to use 2 rules, as the standards for this is not been set yet.
One of many great features in CSS3 is the multiple background support in one single element. Web designers can now define as many layers as they want, with a simple comma separated list.
Rounded corners is something new in CSS3, therefore we have some compatibility issues especially with Internet Explorer up to version 8. But of course there are ways around so you don’t have to use images everywhere you want a round corner.
CSS gradient was introduced by Webkit around 2007 but was rarely used due to cross-browser issues. But nowadays when most browsers support it, it is common used to save up on http requests on your site. Firefox started supporting gradient in 3.6 which made it a lot more popular on the web to be used by web designers.
To set opacity in CSS is easy and supported by all new browsers. This makes a nice effect and you don’t have to work with images.