First I have to tell you guys how much of a help you are to a kid my age. People literally gave me the code to solve my problem last time.
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.
Body Displays the shadowed image wrapperGIF.gif down the whole page and the class title layer is suposed to make the title image appear corectly. It does not. Click here to see what I mean. It does not display corectly in IE, Firefox, Netscape or Opera (Don't know about safari, wish I did though (:) Want a Mac!))
Here is my HTML
[HTML]<html>
<link rel = "stylesheet " type = "text/css" href = "test.css">
<div class="titleLay er" 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
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.
Code:
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="titleLay er" 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
Comment