Forum Moderators: not2easy
I want the left and right columns to hold a repeating 1 pixel high, 15 pixel wide image for the total page height that nicely merges the page content with the page background.
The borders preview fine in the Dreamweaver Design pane but doesn't appear when I look at it in an IE6 browser although if I put a background-color in I can see that fine so the area is there.
Here's the code for the page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="project.css" rel="stylesheet" type="text/css">
</head>
<body>
<table border="0" align="center" cellpadding="0" cellspacing="0" id="containerTable">
<tr>
<!---- Left border ---->
<td id="leftBorder">
</td>
<!---- Main wrappper ---->
<td id="mainWrapper">
<table border="0" align="center" cellpadding="0" cellspacing="0" id="mainTable">
</table>
</td>
<!---- Right border ---->
<td id="rightBorder">
</td>
</tr>
</table>
</body>
</html>
(I've removed all the content to simplify the issue!)
The relevant entries in the stylesheet are as follows:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #DCE0FC;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#containerTable {
margin-right: 10%;
margin-left: 10%;
}
#leftBorder {
height: 100%;
width: 15px;
left: 0px;
top: 0px;
padding: 0px;
background-color: #87C35C;
background-position: top;
background-image: url(/Images/leftBorder.gif);
background-repeat: repeat-y;
}
#rightBorder {
height: 100%;
width: 15px;
left: 0px;
top: 0px;
padding: 0px;
background-color: #DA4581;
background-image: url(/Images/rightBorder.gif);
background-repeat: repeat-y;
}
#mainTable {
border: 1px solid #000000;
/*/*/line-height: 1.5em; /* */
}
Can anyone spot something obvious that I'm doing? I just don't understand why DM and IE6 are disagreeing on such a simple issue (I haven't got to the rocket science part of the page yet!)
The DOCTYPE seems fine as well.
Very strange!
Dumb question, but the images are uploaded, right?
Also, the images are relative to the style sheet... but that shouldn't matter, since you're using a root relative path.
Also, make sure the file name (and path) is correctly cased.
Yeh all those seem fine.
The images are there (as they wouldn't appear in the DM preview pane if they weren't)
The paths are relative to the stylesheet
The path and filenames are both identically cased
Is this a possibility?
Nice idea though ... will make sure I don't do that again just in case
The colours are like that so you can see the areas easily. It's the thin left and right borders I'm trying to get the repeating images in.
Please help!
<No URLs, thanks. See TOS [WebmasterWorld.com] and CSS Forum Charter [WebmasterWorld.com]>
[edited by: DrDoc at 8:13 pm (utc) on Oct. 7, 2004]
background-image: url("images/leftborder.gif");
Not sure if you need the leading slash ("/images...") or not. That image only showed for me when all lower case as mentioned above btw.
Not sure if you need the leading slash ("/images...") or not.
Nice catch, Noisehag. That leading slash tells the browser to look one directory level up. If the images subdir is in the same dir as the css file, it won't find it....
For example...
(1)
[example.com...]
[example.com...]
Would need url(images/image1.gif), whereas...
(2)
[example.com...]
[example.com...]
needs url(/images/image1.gif). In #2 above, url(images/image1.gif) would refer to this folder...
[example.com...]
Which doesn't exist. In #1 above, url(/images/image1.gif) would refer to a directory level higher than the root which, again, doesn't exist.
Right? Does that make sense? It's so hard to tell anymore...
Thanks so much ... you've brought a designer back from the brink of a cliff!
Weird how DM reads this differently but then it's not the first time!
Thanks people
It was the leading slash that caused the problem by the looks of things. Both including the "s and excluding them works as long as the slash is not there.
Have a feeling that when I get to test properly cross browsers that including the "s will be most robust but I'll let you both know when I know more
