Header widget

Hi Wes,

Awhile back I added padding to this widget as you suggested and it seemed ok. Later I needed some more room for text and I made a few more simple adjustments…but obviously something is amiss. I have avoided writing this for about 10 days as I’ve tried to fix it in every way. No luck though. If I add the widget but without content, the Header looks unchanged. If I add text, it appears as black font at about 16px. When I add html to change the font size or color back to white, the header corrupts and the entire screen turns red. I can have a pic in the widget and that’s fine, but when I add text to the right-aligned pic, the text sits further to the right then it used to. So I’ve left the empty widget there in case you decide to check it.

I have only recently learned a little bit about viewing Source Code from the Develop Menu, and that is a little helpful…but I need to learn more. So, in lieu of never using the Header widget again, I’ve included the editor header info for you to quickly scan…

If you can, please let me know if you see an obvious error that I can fix. Thanx Wes/Eric

/* Header
———————————————————— */

#header {
margin: 0 auto;
overflow: hidden;
width: 960px;
}

#header .wrap {
margin: 0 auto;
width: 100%;
}

#title-area {
float: left;
overflow: hidden;
padding: 20px 0;
width: 560px;
}

#title {
font-family: Arial, Helvetica, sans-serif;
font-size: 45px;
line-height: 1.75;
margin: 20px 0 0;
}

#title a,
#title a:hover {
color: #222;
text-shadow: 2px 2px 4px #000;
text-decoration: none;
}

#description {
font: arial;
font-size: 24px;
font-style: italic;
text-shadow: 2px 2px 4px #000;
line-height: 30px;
padding: 0 0 40px;
}

#header .widget-area {
float: right;
width: 250px;
height: 150px;
}

#header .widget {
margin: 20px 0;
padding: 20px 0;
overflow: hidden;
}