After spending a while on web development forums, you start to see the same questions being asked regularly. So here I'm going to answer some of these common beginner questions and hopefully save me typing answers out repeatedly in the future because I can just refer the poster to here or copy it myself. 😉
If you have any other common questions that you think should be added to this list, please let me know.
- How do I get rid of the space under my header?
If your header contains an image, it's more than likely that adding
display: blockto the image will remove the space. This is because images are inline replaced elements and as such, sit on the baseline of the adjacent text. When drawing a line box around text, browsers allow room for the descenders of text characters, (e.g. g, j, y, p, q) and the space below the image is that left by the browser for these descenders, even if there are none. Another possible solution is to specify
vertical-align: bottomon the images.
- Why won't my margin work?
- You've added a margin to an element but no matter how large you make it, it won't move away the surrounding edge. So what's going on? It's more than likely due to collapsing margins. I'll let Paul O'Brien explain this one as he's already gone into it in some detail at Search-This but generally the quick fix is to add a bit of padding or a border to the element as well.
- Why can't I see my background-image/color?
- You're creating a multi-column layout and you've floated your columns, but the image or colour you're using for the background of the parent container won't show up. :? This is because floated elements are taken out of the normal flow of the document so if all the columns are floated, the container behaves as if the end point of the content is the same as the starting point. This problem affects browsers that follow the specs – Firefox, Opera, Safari – but not IE6 because IE6 incorrectly expands parent containers' height to enclose any floated content. It's easily fixed though; you just need to contain your floats.
- Why does my footer appear in the middle of the page?
This is another one due to floats: because the floats are taken out of the document flow, other elements have less awareness of their presence. In the case of a footer appearing where it shouldn't, it's more than likely that the preceding content was floated and the footer is appearing at the point at which the last non-floated element sits. Again, the fix is easy, in fact, if you applied a float containment fix to solve the problem above, you may not need to do anything here, but if it still persists, then clearing the floated content by adding
clear: bothto the footer (or whatever element is affected) should do the trick.
If you've created your layout using absolute positioning, the fix will not be so straightforward, which is one of the reasons I've warned against using absolute positioning to create complete layouts before.
- Why does my column drop down in IE?
Quite often when this question is asked it's because the layout contains columns that are floated next to each other. You give each of the columns a width and quite often you'll give them horizontal margins too to move them away from each other. This is fine in all browsers except for IE6 and lower which fall prey to the double margin bug. Again the fix is easy: just apply
display: inlineto the floated columns.
- Why is there a three pixel gap between my columns in IE?
- Because of the 3 pixel gap bug of course. 😉
- Why doesn't my dropdown menu work in IE?
This is related to Why doesn't
:hoverwork in IE? Most CSS-based dropdown menus work by triggering an action when you hover over one of the top level list items. Because IE6 and lower don't understand
- Why is this moving when I hover over a link in IE?
If you find that when hovering over links or form elements on your page, other parts of the page shift around slightly, it's likely to be a hasLayout issue. The fix for IE6 is usually to make sure the offending element has a dimension (either width or height) although it can be more complicated than that. In IE7, adding
min-height: 0often does the trick (and is harmless in other browsers because every element will have a min-height of 0 anyway).
Tracking down which element is causing the problem can also prove tricky as it's not always the one you think it is. A technique which can be useful if you suspect it is a hasLayout problem is to use the univeral selector – * – to apply a hasLayout trigger to all elements on the page. Applying the fix may completely wreck the presentation of parts of the page, but if it solves the shifting problem you're looking at, you at least know you're on the right track and can then try and narrow it down to whichever element actually needs Layout.
- What's the best way to achieve cross-browser font-sizing consistency?
Unlike most of the other questions above, there's no one right answer to this. There's a variety of different opinions as to what the best implementation for sizing fonts is, so I'm just going to describe what I do (I'll leave discussion of the pros and cons of other methods for another time). I set a
font-sizeof 100% on the body in combination with a
- How do I test my site in browsers on other OSs?
Unless you have both a Mac and a PC, you have two options:
- online browser testing services
If you own a PC you can run both Windows and Linux, again using software like Parallels or others like VMWare. You can't however run OSX on a PC. You can get Safari 3 for Windows but there are slight differences between the Windows and Mac browsers and you still won't be able to test Safari 2.x versions. And just as there's likely to be slight variations between Windows and Mac versions of Safari, the same is true of Firefox and Opera, so if you want a 100% guarantee that things look right on a Mac, you'll need to use an online browser testing service like Browsercam, Browsershots, Litmus and iCapture
- What's wrong with using Design View in Dreamweaver?
- I use Dreamweaver in Split Design View when I'm creating content because I find it easier to create paragraphs and lists and add links when in that mode, but when it comes to positioning elements on a page in Design View, Dreamweaver quite often uses absolute positioning to achieve what would be better accomplished other ways. As I described in Absolute Positioning Pitfalls, using absolute positioning can have unwanted side effects when used by the inexperienced, so while it might seem like the perfect tool for web design newcomers to start creating sites, it can actually lead to more problems in the long run and will often require starting from scratch with the structure of your layout.
Some other FAQs have also been covered in previous articles:
- Why does my content flow outside its box?
- Which browsers should I test in?
- What is ‘semantic mark-up’?
- Why doesn’t
:hoverwork in IE?
- What is divitis?
- What is shorthand CSS?
- How do I make my CSS file smaller?
- What’s the difference between classes and IDs?
- My links won’t change colour when I hover over them
- How do I get different styled links?
- How do I centre my layout?
- I’m getting CSS validator warnings
- My floated layout won’t work!
- How do I include code on every page?
- Why does my layout look wrong in IE?