Resolved Footer image underlapping body

anonymousg · 01-14-2013, 08:47 AM

Hello, hopefully someone is able to help.

Concerning this site: http://bit.ly/VVA7zQ

On that specific page (and this is the only place I can see where it occurs) the twitter widget within a table displays, but the image in the cell to the right of it gets cut up under the body.

Usually I would be looking for a z value to assign, but in all honesty I'm a bit lost with this one.

Excavator · 01-15-2013, 12:28 AM

Hello anonymousg,
The element that's showing is div#twtr-widget-1 .twtr-widget .twtr-widget-profile which is styled in your CSS with this -

Code:

.twtr-widget {
    font-family: "lucida grande",lucida,tahoma,helvetica,arial,sans-serif !important;
    font-size: 12px !important;
    position: relative;
}

The element that is hiding behind #bg is an unstyled anchor.

Either give that anchor styling that's similar to .twtr-widget (it will need position: relative

OR
Adjust #bg's position in the stacking order with this bit highlighted in red -

Code:

#bg {
    background: url("images/header-bg.png") repeat-x scroll 0 0 transparent;
    height: 426px;
    left: 0;
    position: absolute;
    top: 145px;
    width: 100%;
    z-index: -1;
}

waxdoc · 01-15-2013, 12:29 AM

What is this (in middle of page)

Code:

. . .
</body>
</html>
<br>
<center>
<!DOCTYPE html>
<html>
<head>
. . .

Your whole HTML structure is off!