|
| |
|
|
Starhugger
Posts: 624
Joined: 4/12/2005
From: Canada
Status: offline
 |
Background image won't align at top - 5/16/2009 3:33:24
I decided (at 12:30 AM...  ) to put a background-image behind a navigation bar on my links pages. For some reason, it won't align at the top of the table cell (that's still there from the old page layout structure). The bg-image is in a DIV that is inside a table cell/column that is set to align=top and the bg-image is set to background-position:top. But for some reason there's a gap at the top between the top edge of the image and the top of the cell. You can see the alignment problem most clearly >on this page<.
View Source with Tidy doesn't show anything that would make sense as the cause (mostly some assumed warnings of some ad code and obfuscated mail-to code). It does warn about possibly using a different DOCTYPE but I think that's just because of the ad code. In Firefox's Developer Toolbar, the Outline> Block Level Elements and Information> Display Element Information show the DIV as sitting 15px below the top of the column, but I'll be damned if I can figure out why.
It's 3:30 AM now and I've beaten the thing to death as long as I'm able, until I can't see straight anymore. At this point I'm trying not to bash my head against the monitor. Could someone please take a look at it and see if you see why it's doing that? I'll copy the most relevant CSS below. Thanks VERY much in advance!
/* ----- LINK NAVIGATION BOX ----- */
div#linkbox {
width: 240px;
background-image: url(../images/linknavbg.jpg);
background-position: 0px;
background-repeat: no-repeat;
padding: 0;
margin: 0 0 40px 0;
}
div#linknav {
position: relative;
width: 220px;
margin: 10px;
}
div#linknav ul {
text-align: left;
margin-top: 4px;
margin-bottom: 4px;
padding-left: 10px;
margin-left: 10px;
}
div#linknav ul li {
padding-left: 2px;
margin-left: 2px;
font-family: Tahoma,Arial,sans-serif;
font-size: .87em;
text-align: left;
margin-top: 2px;
margin-bottom: 2px;
}
h2.reviewsby {
font-size: .95em;
color: #663;
font-weight: bold;
text-align: center;
margin-top: 15px;
margin-bottom: 8px;
font-family: verdana, helvetica, sans-serif;
}
h3.categories {
font-size: .85em;
color: firebrick;
font-weight: bold;
text-align: left;
margin-top: 0px;
margin-bottom: 4px;
}
Starhugger
|
|
|
|
Starhugger
Posts: 624
Joined: 4/12/2005
From: Canada
Status: offline
|
RE: Background image won't align at top - 6/21/2009 16:21:00
I'm going to bump this up to the top again because I'm still pulling my hair out trying to make it work and I'm about to go bald.
Quick summary: I've created a link navigation box for a series of pages on my site. The box DIV uses a background image, and inside this DIV (linkbox) is another DIV (linknav) where the links are listed. (I've used an inner DIV because I couldn't get it to put padding between the text and the box edges without pulling the image in from the edge with it. I've got this kind of structure to work elsewhere on the site without problems; I just haven't tried using it with a background DIV before.) The whole thing is imported into a series of 4 pages (here's an example page) using a FrontPage (2003) webbot-include, where it is positioned at the top of a right-hand column on these pages. The problem is that the background image won't align at the top of the column. (In the example page, it should align with the top of the centre link box.) There's a gap of 10px at the top of the background image that I can't account for, can't get rid of, and is driving me crazy.
I've now created a new development page that uses only CSS for the page layout, as I thought maybe it was something to do with the table I was using for the column layout, but it's still not aligning at the top.
I'm not in a panic for an answer (I've lived with it this long), but I really would like to know why it's not aligning. I've checked and tried everything I can think of, with no success. If someone could help me solve the mystery, I would be happy to name my firstborn child after you except that it's highly unlikely children will ever be in my life (and they're much better off for it too).  Seriously, if someone could please have a look when you get a chance, I would be very grateful. Let me know if you need me to provide or point you to any further information. Thanks!
Starhugger
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
but I'm hoping someone will see this in between hot dates and take pity on this poor webmiserable soul... 
