Shoutbox

Ok guys. Heres my problem.

http://www.avidphotos.net/

It looks perfect in IE. Theres one minor spot where the background is missing, What do I need to alter in the CSS to fix that? I've got it just how I want it but need to fix that little bug.

Help is greatly appriciated as I just finished a website for a client and I'm back working on this one.

Well it appears in your css, you are not using your #container which has your background:; tag. Your menu and content are just really fitting in your #head, making #content by itself which has no background:; tag which wont show teh shadow part.
I havnt tested it so im not sure but try replacing

code:

---

#content
{
    position: relative;
    top: -75px;
    z-index: 2;
    font-size: 12px;
    padding-left: 26px;
    padding-right: 26px;
    color: #FFF;
}

---

to

code:

---

#content
{
    position: relative;
    top: -75px;
    z-index: 2;
    font-size: 12px;
    padding-left: 26px;
    padding-right: 26px;
    color: #FFF;
background-image: url('../images/red/bg.gif');
    background-repeat: repeat-y;
    background-color: #4B0000;
}

---

Didnt work.

Here you go =)
Included, wj.html and red.css

Thanks hmaster!

Now, How do I get it to align left in firefox. It looks fine in IE, just it's centered in Firefox and I dont know how it go there.

Delete the margin: 0px auto; from #head.

No such luck. It just left aligns the whole thing and the text is still centered.

I also tried removing it from the content div, No change in overall look or feel so I left it out, but the text is still centered.

code:

---

body
{
    background-image: url('../images/top_bg.gif');
    background-repeat: repeat-x;
    background-color: #F0E9CE;
    margin: 0;
    padding: 0;
}

#head
{
    width: 700px;
    padding: 0 0 0;
    background: url('../images/red/bg.gif') repeat-y;
    background-color: #4B0000;
    font-size: 0px;
}

#top
{
    background: url('../images/red/top.gif') no-repeat;
    width: 720px;
    height: 300px;
}

#endCap
{
    width: 700px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px;
    background-image: url('../images/red/base.gif');
    background-repeat: no-repeat;
    font-size: 0px;
    height: 142px;
}

#content
{
    font-size: 12px;
    padding-left: 26px;
    padding-right: 26px;
    color: #FFF;
}

#container
{
    width: 668px;
    padding-left: 26px;
    padding-right: 26px;
    background-image: url('../images/red/bg.gif');
    background-repeat: repeat-y;
    background-color: #4B0000;
    color: #FFF;
    font-family: Verdana, Arial;
    font-size: 13px;
    height: 300px;
}

#copyright
{
    width: 668px;
    height: 125px;
    padding-top: 280px;
    padding-left: 26px;
    padding-right: 26px;
    background-image: url('../images/main_bg.gif');
    background-repeat: repeat-y;
    background-color: #4B0000;
    color: #FFF;
    font-family: Verdana, Arial;
    font-size: 13px;
    margin: 0px auto;
}

#menu
{
    width: 210px;
    position: absolute;
    top: 275px;
    left: 460px;
    font-family: comic sans ms;
    font-size: 14px;
}

#menu ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#menu li
{
    color: #FFF;
    padding: 0px 18px 0 0px;
    float: left;
}

#menu li a
{
    border: none;
    color: #EFEFEF;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
}

#menu li a:hover
{
    text-decoration: underline;
}

---

Working here in Firefox.

http://www.avidphotos.net/

Thats your CSS with some minor tweaks.

Whats wrong with it?

It looks fine here (using IE at the moment).

If you WERE still on MSN I could help you with it