Tag: CSS
Why does my content flow outside its box?
Usually this question is accompanied by: “It looks fine in Internet Explorer but not Firefox”
and it’s usually because a height has been specified on the element in question.
Don’t use IE as your primary testing browser
As mentioned in previous posts, I spend some time on web design-related forums so a lot of what I’ve written on this site has been in response to questions I see asked quite often. This post is not so much about a question, but a reaction.
Styling form buttons
Anyone who’s used the web has encountered buttons in forms. Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. Roger Johansson has delved into this issue in more detail.
Content bookends
Sometimes you want to have a list of text items or images appear on the same line but with some items aligned to the left and some aligned to the right. An example of this would be a footer where you want to split the links down the middle. Or maybe a blog post where you want to put the date on the left and the number of comments on the right. More on Content bookends
Onfocus, background-changing, sliding door tabs
There are already several excellent articles discussing the sliding door tabs technique for creating navigation elements, so why do we need another one?
Elastic layouts
Prompted by a comment from Mike Cherim of Accessites in answer to my post on Zoom Layouts, this post is to list Elastic Layouts.
Zoom layouts
I came across an article today on A List Apart written by Joe Clark: Big, Stark & Chunky (it is 18 months old – I know, I should read ALA more often) which was aimed at promoting the use of ‘zoom layouts’, which are those designed for people with low or impaired vision.
Why doesn’t :hover work in IE?
You may have seen on other sites an effect whereby the background colour of a containing element changes colour when you hover over it. A look at their CSS might reveal something like div:hover or li:hover. This is also how a lot of CSS dropdown menus work too, by applying a :hover to a list item.
What is shorthand CSS?
Shorthand CSS is the method of writing related style properties all on one line instead of several. Using shorthand CSS results in files that are smaller in size and easier to read and maintain.
How do I make my CSS file smaller?
The key feature of Cascading Style Sheets and probably the one not realised by most newcomers to CSS is that certain style properties are inherited. This means that style properties (mostly those relating to styling text including color, font-size, text-alignment etc.) set on a parent element are inherited up by every descendant element (any element contained within the parent whether directly or indirectly).
What’s the difference between classes and IDs?
Classes and IDs are how we create different styles for different elements on the page.
IDs are unique identifiers and can only be used once on any one page. Classes can be reused and applied to different elements.
My links won’t change colour when I hover over them
Usually when people have trouble with their links not doing what they want, it’s because they’ve arranged them in the wrong order. More on My links won’t change colour when I hover over them
How do I get different styled links?
So you’ve set up the styles for the links of your page but you have one section that you want to be different from everything else. To do that, you need to assign a different class or ID.
How do I centre my layout?
To centre a CSS layout horizontally, you need to add margin: 0 auto; to either the body or a containing element More on How do I centre my layout?
I’m getting CSS validator warnings
When you validate your CSS file, do you get a load of warnings about background-color not being accompanied by a color and vice versa? More on I’m getting CSS validator warnings
