Weird Problem with Alt attribute in Images

Hello.
I’m working on a site that I did not design or code. I just took over to finish some small things here and there and plan on maintaining the site.

I’ll go ahead and state my problem up here in case you already now the answer. If you want more info on the situation then read on. I restate my problem further down.

“Here’s my problem. When images are disabled my Alt attribute is falling below where the images are.”

The site is designed with a footer. Which contains a Bottom Horizontal Nav Bar. The properties are below

[code]
#footer {
background-color: #b84;
background-image: url(‘images/desert-bottom.jpg’);

bottom: 0px;
height: 64px;
position: absolute;
width: 100%;
}
#footerlinks {
color: #000;
list-style-type: none;
margin: 0;
padding: 7px 0 0 0;

font-size: 1.3em;
text-align: center;
white-space: nowrap;
}
#footerlinks li {
display: inline;
padding: 0 1em 0 1em;
}
[/code]

The full footer image is massive. And is designed to be revealed as your screen size increases. I’m pretty sure thats why he used display: inline. Rather then just floating left. So he could then use text-align: center to always keep the links centered horizontally no matter how big your screen gets. I only mention this because my problem is fixed by taking out inline and just floating the links left. But I’d rather not do that.

Now we’ve decided to make a second smaller row for less important links. So I just made a new ul and kept most of the same css properties. And just made the images in the (x)html smaller.

Here’s my problem. When images are disabled, my Alt attribute is falling below where the images are. But only in the Main Footer links. It does not happen in the sub links below them that is contained in the same <div> (footer). The only difference is their part of a different <ul> and id to go along with that <ul>. Also this does not happen on the original site. Which can be found here. [url]http://apache-moon.net/realsite[/url]
Turn off images and you’ll see that “News” “Story” etc. display their alt attributes and don’t seem to move. The CSS for that site’s footer is here.

[code]
#footer {
background-color: #b84;
background-image: url(‘images/desert-bottom.jpg’);

bottom: 0px;
height: 64px;
position: absolute;
width: 100%;
}
#footerlinks {
color: #000;
list-style-type: none;
margin: 0;
padding: 20px 0 0 0;

font-size: 1.3em;
text-align: center;
white-space: nowrap;
}
#footerlinks li {
display: inline;
padding: 0 0.5em 0 0.5em;
}
[/code]

As you can see very little difference. Also I’ve tried replacing values across the two style sheets. Nothing seems to work. So I was thinking it might be an inherited value from another CSS property somewhere else in the style sheet. I’ve looked over it several times. But if you want you could give it a look. The entire and only style sheet for the page is here.

[code=html]
/* — Comment — */

html, body {
background-color: #000;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
font-family: Georgia, serif;
}
a {
color: #750;
}
a:active {
color: #a80;
}
a:hover {
color:#a80;
}
a:visited {
color: #750;
}
a img {
border: none;
}
img {
margin: 0;
padding: 0;
}

/* — Content Window — */

#storythumbs {
margin: 3em 0 0 0;
padding: 0 0 0 0;
}
.biothumb {
float: left;
margin: 0 2.5em 2em 0;
text-indent: 0.4em;
}
.biothumb a img {
vertical-align: middle;
margin: 0 0.5em 0 0;
}
.closebutton {
float: right;
}
.backbutton {
float: right;
padding: 0 0.5em 0;
}
.headerimage {
background: #fff;
line-height: 0;
margin-bottom: 1em;
margin-top: 3em;
width: 100%;
}
.hollow {
color: #ccc;
background-image: url(‘images/hollow.png’);

width: 70%;

top: 30%;
bottom: 100px;
left: 15%;
}
.paper {
background-color: #ffb;
background-image: url(‘images/paper.jpg’);

width: 70%;

top: 20%;
bottom: 100px;
left: 15%;
}
.window {
display: none;
overflow: auto;
padding: 1em;

position: absolute;

}
.window h3 {
margin-top: 0;
}
.first {
margin-top: 3em;
}

#window_news {
display: block;
}
.paperheader {
position: fixed;
top: 20%;
left: 15%;
right: 14%;
bottom: 72%;
padding: 0.5em 0 0 1em;
margin: 0;

background-color: #b84;
background-image: url(‘images/paper.jpg’);
}
.paper p {
text-align: justify;
}
/* — Background and Footer — */

#horizon {
background-color: #000;
background-image: url(‘images/desert-top.jpg’);

bottom: 64px;
height: 452px;
position: absolute;
width: 100%;
}
#footer {
background-color: #b84;
background-image: url(‘images/desert-bottom.jpg’);

bottom: 0px;
height: 64px;
position: absolute;
width: 100%;
}
#footerlinks {
color: #000;
list-style-type: none;
margin: 0;
padding: 7px 0 0 0;

font-size: 1.3em;
text-align: center;
white-space: nowrap;
}
#footerlinks li {
display: inline;
padding: 0 1em 0 1em;
}
#minilinks {
color: #000;
list-style-type: none;
margin: 0;
padding: 0 0 0 0;
text-align: center;
white-space: nowrap;
}
#minilinks li {
display: inline;
padding: 0 0.5em 0 0.5em;
}
#moon {
bottom: 60%;
left: 50%;
position: absolute;
}
#smalllogo {
bottom: 16px;
left: 16px;
position: absolute;
}
#epiclogo {
bottom:5px;
right: 3px;
position: absolute;
}
[/code]

I attached a screen shot of the page so you can see what the links look like.
“News” “Store” and “Characters” have their images turned on. (Characters Alt attribute does not move from where it’s image sits and is working correctly) “About” and “Media” have their images turned off. And as you can see the Alt text is displayed. But for some reason it falls below where their images were being displayed.

Thanks for any help you guys can give.

[upl-file uuid=31edb893-33f5-43a6-9920-8935c2afe136 size=80kB]Screenshot.jpg[/upl-file]

Also in #CSS _↴