Forum Moderators: not2easy
Nothing I try works. Please help me out if you can. I'm only a few weeks new to this, so dumb it down please. :)
Notice that this is a table within a div layer. Not sure if that makes a difference. I'm open to alternatives.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<link media="screen" type="text/css" rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<!-----Header Div----->
<div id="header" style="z-index:2;">
<table style="width:580px;" cellpadding="0" cellspacing="0" border="0">
<tr style="width:580px;">
<td style="width:10px;"><img style="width:10px; height:10px;" src="images/tlCorner.jpg" /></td>
<td style="width:550px;"></td> <!-----horizontal repeat here----->
<td style="width:10px;"><img style="width:10px; height:10px;" src="images/trCorner.jpg" /></td>
</tr>
<tr style="width:580px;">
<td style="width:10px;"></td> <!-----vertical repeat here----->
<td style="width:550px;"></td>
<td style="width:10px;"></td> <!-----vertical repeat here----->
</tr>
<tr style="width:580px;">
<td style="width:10px;"><img style="width:10px; height:10px;" src="images/blCorner.jpg" /></td>
<td style="width:550px;"></td> <!-----horizontal repeat here----->
<td style="width:10px;"><img style="width:10px; height:10px;" src="images/brCorner.jpg" /></td>
</tr>
</table>
</div>
</body>
</html>
Any ideas/instruction will be greatly appreciated.
Thanks!
bsbarker
The first two here (and possibly third) may not help, but it's always good to get all your duckies in a row.
First, you have a "half" doctype, which throws it into quirks mode. Use a full doctype so it renders in standards compliance mode.
Choosing the best doctype for your site [webmasterworld.com]
Validate your document [validator.w3.org] which will eliminate any other possible errors. Quirks mode does exhibit some odd behaviors in respect to CSS and BG images, so eliminate this possibility.
Next, IE abhors empty table cells. Do this
<td> </td>
and if it causes it to expand the table too much, set the style to font-size: 2px. IE won't render 1px.
Last, and most likely the cause, is your css. Don't quote the attributes,
background: url('some-directory/bg.gif'); <-- No
background: url(some-directory/bg.gif); <-- yep
and remember that the url to an image is always relative to the css file, not the document. Javascript is the opposite, any URL's are relative to the document calling it.
So you have
href="styles/styles.css"
and probably
images/bg.gif
The safest thing here is to not use the dot-toothpick syntax, ../../../file.jpg. In your documents, CSS, scripts, everywhere you use a URL to an image or internal link, use a leading slash. This means "start at the document root and follow this path." So it doesn't matter if you have
path/to/some/heavily/buried/file.html
or
index.html
this will always find it:
#header .horiz-cell {
width: 550px;
font-size:2px;
background: #ffffff url(/images/h-bg.gif) top left repeat-x;
}
#header .vert-cell {
width: 10px;
font-size:2px;
background: #ffffff url(/images/v-bg.gif) top left repeat-y;
}
The only down side is this doesn't work when testing files offline, only on a server. Add the styles,
<td class="horiz-cell"> </td>
....
<td class="vert-cell"> </td>
And you should be good to go. If your document and CSS get complex, you may have other styles override it, so you may have to be specific:
#header table .horiz-cell {
But from what you have there, it shouldn't.
[w3.org...]
The optional quotes can be either double (") or single (') and must be the same.
Once you're ready to leave tables behind: there are ways to have 4 elements nested appropriately and using a technique called "sliding doors" both vertically and horizontally to make graphical orders with just backgrounds on those 4 elements. Much less clutter in your html.
Using CSS3 graphical borders can also be done using a single image, but that's maybe still too soon (esp. if you need IE to also do it).
Meanwhile, rocknbil, all that wizardry you said worked swimmingly and the image is repeating exactly as I wanted it! Thanks for dumbing it down for me :). I think the main issue must have been the lack of a leading / in my url because I could swear that I already tried the coding you gave me and it didn't work before, but I didn't have the / in there. Also, I had a lot of cleaning up to do when I validated my document, so thanks for that tip.
Anyway, thank you both for the replies and the welcome! I'm looking forward to learning from these forums and hopefully someday helping someone else out.
AFAIK, quotes around URLs are more than fine.
Agreed, and you are the master (no sarcasm intended!) I've just seen it not work in some cases and removing them made it work, so have always left them out. I've no clue as to why or why not. :-)
