Get a free trial // Grow your CSS skills // Land your dream job

>:( styling problem

  • # September 13, 2008 at 6:03 pm

    aaaaargh I’m really annoyed…
    I just started work on my wordpress blog (finally) and no sooner had I inserted the header I was having to troubleshoot. It seems when I end my header div like so: <div id="header"></div> the header won’t show up, at all. if i end the div tag like this though ><div/> its shows up, but when I validated it it failed, so i changed the div tag end to the correct and it validated fine but didn’t show my header… bummer :shock:

    Below is the code:

    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">



    Theme Name: Alex Rogahn
    Theme URI:
    Description: Theme of Alex Rogahn’s personal blog
    Version: 1.0
    Author: Alex Rogahn
    Author URI:

    /* Global reset */
    /* Based upon ‘reset.css’ in the Yahoo! User Interface Library: */
    *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
    table { border-collapse:collapse; border-spacing:0 }
    fieldset, img { border:0 }
    address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
    ol, ul, li { list-style:none }
    caption, th { text-align:left }
    h1, h2, h3, h4, h5, h6 { font-size:100% }
    q:before, q:after { content:”}
    a { text-decoration:none }

    /* Global reset-RESET */
    /* The below restores some sensible defaults */
    strong { font-weight:bold }
    em { font-style:italic }
    * a { position:relative } /* Gets links displaying over a PNG background */
    a img { border:none } /* Gets rid of IE’s blue borders */

    body {
    background: #232323;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 62.5%;

    #header {
    background: url(images/header.png) repeat-x;

    I’d really appreciate it if some one would help me out :P

# September 13, 2008 at 6:34 pm

a div tag by itself is empty. Even if you give it a background color. You have to give it a width and height for it to show up. Even if you put a background image in it won’t show up without a width and height

so you should only have

<div id="header"></div>

this is wrong <div />

so ad width:300px; height: 300px; to your header style. Where 300px is the width and height of your header.png

#header { background: url(images/header.png) repeat-x; width: 300px; height: 300px; }

# September 13, 2008 at 6:39 pm

omg I cant believe I missed that I really should brush up on my css :lol: …

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed