Background image won't align at top (Full Version)

All Forums >> [Web Development] >> General Web Development



Message

Starhugger -> Background image won't align at top (5/16/2009 3:33:24)

I decided (at 12:30 AM... [:o] ) 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 -> RE: Background image won't align at top (5/16/2009 20:22:23)

I've discovered at least where the problem lies, but still not why. For some reason the DIV is centering the background image top-to-bottom, even though I've told it to align to top. I even tried putting "vertical-align: top" as part of the DIV code (even though this shouldn't affect the background-image) - ironically, that makes it display properly in Frontpage's view screen, but still not in either FF or IE8.

To explain perhaps more clearly: I am using two nested DIVs - one ("linkbox") that is the outer box that has the background image, and one ("linknav") that is a container for the text inside the box. I found when I used "padding:10px" for the same DIV as the background, it was pushing the background image over, so I created an inner DIV that would pull the text in from the edges to give it some padding. 

div#linkbox {            /* This is the outer wrapper that has the background */
	width: 240px;
	background-image: url(../images/linknavbg.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0;
	margin: 0 0 40px 0;
	}
div#linknav {           /* This is the inner wrapper around the text */
	position: relative;
	width: 220px;
	margin: 10px;
	}


The navigation box is created in a separate HTM page, and then pulled into a table cell on 4 different pages using a FP include webbot. 

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Link Pages Navigation</title>
<link rel="stylesheet" type="text/css" href="../newcss/cssborders.css" />
<link rel="stylesheet" type="text/css" href="../newcss/mainstyles.css" />
<link rel="stylesheet" type="text/css" href="../OLDcss/linkspage.css" />
</head>
<body>

<div id="linkbox">
<div id="linknav">
<!-- content of the navigation box goes here -->
</div>
</div>

</body></html>


A sample of the table cell's code in the final page is below. The code is probably overstated, but I wanted to be sure it wasn't slipping in some padding or alignment surprises. Here's a sample of the HTML: 

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Links & Resources</title>
<link rel="stylesheet" type="text/css" href="../newcss/mainstyles.css" />
<link rel="stylesheet" type="text/css" href="../newcss/cssborders.css" />
<link rel="stylesheet" type="text/css" href="../OLDcss/linkspage.css" />
</head> 
<body>
<!-- snip -->

<table border="0" 
cellpadding="0" 
cellspacing="0" 
width="760" 
style="border-collapse: collapse; border-spacing: 0">
<tbody><tr>

<!-- snip -->

<td style="text-align: center; padding: 0; vertical-align: top" 
width="240" valign="top">
<!--webbot bot="Include" U-Include="../includes/linksnav.htm" TAG="BODY" -->
</td>

<!-- snip -->


I realize I may be the only person who's hanging around here on a weekend with nothing better to do [&o] but I'm hoping someone will see this in between hot dates and take pity on this poor webmiserable soul...

Starhugger



Tailslide -> RE: Background image won't align at top (5/17/2009 1:50:43)

Sorry - can't really take a lot of time to work it out as I'm out most of the weekend! One quick observation though - background position is two points - e.g. left top or center center or right bottom.



Starhugger -> RE: Background image won't align at top (5/17/2009 2:14:36)

Hi Tailslide. Thanks for your reply anyway.

I too wondered about including both horizontal and vertical positions. I tried using both, and even tried changing which one was given first. I also tried taking it out altogether, since it should default to top left anyway. Alas, no difference. Thanks though.

Have a great weekend. [:)]

SH



Starhugger -> 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




Tailslide -> RE: Background image won't align at top (6/22/2009 1:34:59)

Don't ask me why this works... just add: 

border-top:1px solid white;


to your #linkbox rule.



Starhugger -> RE: Background image won't align at top (6/22/2009 10:34:37)

[sm=bowdown.gif]

Well that has got to be the weirdest thing! You're right, it does work, although I couldn't say why either. How bizarre.

Thank you SO much! A solution is definitely better than knowing why. [:)]

Starhugger




Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.109375