TROUBLESHOOTING
Here are a few problems that beginners commonly face, along with the pages where you can find solutions to them.
STARTING OUT
The browser shows the markup typed in (not the result page).
Check the file extension is .html and not .txt. p 30, 32
Bold text, italics, headings, or link text are extending longer than expected.
Check you have closed the relevant tag e.g. </a>. p 21, 22
The page I linked to is not found.
Check the relative URL. p 83, 84
IMAGES
Images are not showing up.
Check the relative URL. p 83, 84
Images are looking blurry.
Check that you have saved your images in the right format and at the size you want to show them at. p 109–113
Border images are not showing.
This only works with latest browsers. (Also, check the relative URL). p 319, 21, 22
GIFs that were resized now look grainy or have jagged edges.
Check the color space in your image editing program. It should be RGB (not indexed color).
TEXT
Some text flashes up before showing the correct font.
You have a Flash Of Unstyled Content. p 278
When copying text from word processors, lots of extra tags are added to the markup.
Copy the text into a plain text editor (to remove formatting) then paste it into your HTML editor. p 49
The text looks bigger/smaller on some screens.
This is usually due to variances in screen resolutions. Also, check the type scale is set for the <body> element. p 377, 276
The font size is wrong in IE when I use ems.
See above. p 276
The font I specified is not showing in some browsers.
The computer must have that font installed. p 269–272
If you are use @font-face it must be in several formats. p 341
My fonts look jagged on a PC. Some fonts to do not anti-alias as well as others on a PC. Try a different typeface or try a thicker version. p 272
GENERAL CSS
A specified style is not showing.
Remember CSS selectors are case sensitive.
Check that your selectors are correct. p 238
The web developer toolbar can help you find the right selector. p 348
If the selectors are correct, do you have another selector that applies to the same element later in the CSS? p 239, 240
CSS varies in some browsers. There are a number of CSS bugs/browser quirks that mean they render the page slightly differently - try searching for the problem and see if it is a known CSS bug/quirk. p 242
HTML 5
The browser is not applying styles to HTML5 elements.
If it is IE, you might need to use the HTML5 shiv / shim. p442
Block-level elements are rendering as inline elements.
Use display:block to tell the browser which HTML5 elements are block-level elements. p 442
LAYOUT
The design looks bigger/smaller on some screens.
The resolution of a monitor affects how big the items appear on the page. p 377, 378
Margins above and below a box not showing.
Vertical margins collapse. p 308
My content does not fit in the containing box/browser window.
You can deal with this using the overflow property. p 306, 316
Boxes look a different size in IE.
Some versions of IE use a different box model than all other browsers. Use a DOCTYPE declaration to make old versions of IE behave like other browsers. p 316
Boxes do not appear centered when using auto for left and right margins.
You may need to use the text-align property on the containing element. p 315
Elements are overlapping.
When you take elements out of normal flow, they can overlap. z-index helps you control which item goes on top. p 369
Why is the vertical-align property not vertically centering my block-level element?
This property is not designed for this purpose. It is used to center inline elements on the page. You will find several ways to vertically center block-level elements (depending on their context) if you search on Google.
A background image is not showing on my box.
Does the box you are applying the style to to have a defined height and width? p 303
Does the containing box have an overflow property set to auto? p 373, 374
My background images do not show when the page is printed.
Most browsers do not print background images by default to help save ink. You can adjust this in your print preferences.
There is a gap between the browser window and my content.
You may need to set margin and padding on the <body> element to 0. p 313, 314
FLOAT IN LAYOUT
A box is not sitting next to another floated element.
Ensure that there is enough space in the containing element for the two to sit side by side. p 303
Margins and padding are added to the width of the box (except for older versions of IE, which have a different box model). Therefore, the box might be wider than specified in the width property. p 316.
Did you specify a width for the floated element? (See next point.)
My floated element takes up the full width of the browser window (or containing box).
Check that you have specified a width for the floated element. p 371
The container around my floated elements are one pixel tall.
The containing element doesn't know the height of the floated elements inside it. You can either add an element that acts as a clearing box or use the overflow property with a value set to auto. p 373
IE added an extra margin to my floated elements.
Set the display property to inline.
If you've come across a problem that you think belongs in this troubleshooting section, please feel welcome to email it to us at: [email protected]. We will endeavor to address the most common problems our readers have faced in future editions of this book. Thank you!