25
Here is my problem.
I am trying to get into the habit of using CSS with HTML (soon to be XHTML) and it is going pretty well. I am creating the shadow effect with a page so it looks like the content is floating on a plate, you have probably seen this all over the web. So I have a 800 pixel wide by 10 pixel tall image that is white with a gradient/shadow on both edges and a green bar to make a secondary content area on the right of the page. Here is the image.
Here
There is another image that should make a white bar across the top of the page that will eventualy hold a title. That image is here
(Please Ignore the text!)
Actually Here Is My Problem
The First image is repeating itself down the page nicely. But the second image does not display at the top correctly, well sorta. Let me explain. Here is my Css code.
Expand|Select|Wrap|Line Numbers
- body {
- background-image: url(../cssTesting/Images/wrapperGIF.gif);
- background-repeat: repeat-y;
- background-position: center center;
- text-align: center;
- }
- #titleLayer {
- background-image: url(Images/wrapperTitleGIF.gif);
- background-repeat: no-repeat;
- background-position: center top;
- background-attachment: fixed;
- height: 70px;
- width: 800px;
- float: none;
- }
Here is my HTML
[HTML]<html>
<link rel = "stylesheet" type = "text/css" href = "test.css">
<div class="titleLayer" id="titleLayer"></div>
<body>
</body>
</html>[/HTML]
The title kinda stops. But here is the wierd thing, when I put a space in between the 800 and px in my CSS it displays corectly. In IE, and Firefox but still not Opera or Netscape, but it probably renders in Safari IDK? I am just puzzeled why the space would do that. Here is another thing, when I put a space after the 70 it makes the layer really small, height wise?
Also if it helps any the images are
wrapperGIF (800, 10)
wrapperTitleGIF(800, 70)
Thanks,
Matt
