IE7 LI text over background image
newbie
Location: Tampa, FL
Posted: Tue, 2008-04-22 01:48
I'm working on an email page and trying to display attachments as LI's in a UL. I've tried spans, but couldn't get it to work nicely. Anyway, I've got it working almost perfect, except that when I resize the DIV, the text in the LI's shifts position over the background image in IE7. In FF, everything works fine. How can I stop the text from shifting in IE7?
Here's my code:
<html>
<head>
<title>Attachment Listing</title>
<style type="text/css">
#navigation {
height: 60px;
overflow: auto;
}
#navigation ul {
margin: 0;
padding: 0;
height: 20px;
}
#navigation li {
float: left;
margin: 2px 2px 2px 2px;
background-color: #eee;
list-style-type: none;
border: 1px solid #888;
white-space: nowrap;
}
#navigation a {
float: left;
margin: 0;
background-repeat: no-repeat;
background-position: 2px 50%;
text-decoration: none;
color: #333;
}
#navigation .inner {
padding: 0 5px 0 20px;
display: inline;
line-height: 20px;
vertical-align: middle;
}
#navigation .pdf {
background-image: url(http://www.pstinc.net/icons/pdf.gif)
}
#navigation .zip {
background-image: url(http://www.pstinc.net/icons/zip.gif)
}
#navigation a:hover {
background-color: #fff;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="" class="pdf"><span class="inner">Meeting Notes_20080418.pdf</span></a></li>
<li><a href="" class="zip"><span class="inner">Q4-Report.zip</span></a></li>
<li><a href="" class="zip"><span class="inner">File_Utils.zip</span></a></li>
<li><a href="" class="pdf"><span class="inner">A Really, Really, Really, Really, Long Filename.pdf</span></a></li>
</ul>
</div>
</body>
</html>
Thanks for any help/suggestions!
newbie
Posts: 10
Joined: 2007-06-22
Location: Tampa, FL
I didn't realize this was
Posted: Thu, 2008-05-01 13:04
I didn't realize this was such a difficult issue. No one has any idea?
Guru
Posts: 2605
Joined: 2005-12-14
Location: Victoria British Columbia
I didn't realize it was
Posted: Thu, 2008-05-01 17:45
I didn't realize it was apparantly so hard to read the sticky messages at the top of each forum index that tell you what you need to post if you really do want help, but which you seem to have ignored completely.
Give us what we need to help you and we'll help.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse
newbie
Posts: 10
Joined: 2007-06-22
Location: Tampa, FL
My Apologies
Posted: Mon, 2008-05-12 16:01
I have a bunch of stuff in an include that has the DOCTYPE in it and I mistakenly left it out of my initial post. The full, validated code should read:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
Attachment Listing
</title>
<style type="text/css">
#navigation
{
height: 60px;
overflow: auto;
}
#navigation ul
{
margin: 0;
padding: 0;
height: 20px;
}
#navigation li {
float: left;
margin: 2px 2px 2px 2px;
background-color: #eee;
list-style-type: none;
border: 1px solid #888;
white-space: nowrap;
}
#navigation a
{
float: left;
margin: 0;
background-repeat: no-repeat;
background-position: 2px 50%;
text-decoration: none;
color: #333;
}
#navigation .inner
{
padding: 0 5px 0 20px;
display: inline;
line-height: 20px;
vertical-align: middle;
}
#navigation .pdf
{
background-image: url(http://www.pstinc.net/icons/pdf.gif)
}
#navigation .zip
{
background-image: url(http://www.pstinc.net/icons/zip.gif)
}
#navigation a:hover
{
background-color: #fff;
}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="" class="pdf"><span class="inner">Meeting Notes_20080418.pdf</span></a></li>
<li><a href="" class="zip"><span class="inner">Q4-Report.zip</span></a></li>
<li><a href="" class="zip"><span class="inner">File_Utils.zip</span></a></li>
<li><a href="" class="pdf"><span class="inner">A Really, Really, Really, Really, Long Filename.pdf</span></a></li>
</ul>
</div>
</body>
</html>
Any help is appreciated. Also, if using spans or divs instead of an unordered list would be better, please give me some help. I haven't been able to get the spans to work.
newbie
Posts: 10
Joined: 2007-06-22
Location: Tampa, FL
Ed Seedhouse wrote:I didn't
Posted: Thu, 2008-05-15 16:49
Was I missing something else besides the DOCTYPE?
Guru
Posts: 2605
Joined: 2005-12-14
Location: Victoria British Columbia
You are much more likely to
Posted: Thu, 2008-05-15 17:27
You are much more likely to get assistance if you post a link to a live version of the page. Myself I am lazy and won't bother to copy and paste your code into local files. And I can't parse html by looking at it, I rely on my browser to do that.
Make sure your html and CSS are both valid, put it on a server, and post the link here. That will make it much more likely that you will get some assistance.
I am not now, nor was I ever, any kind of "dude".
Ed Seedhouse