|
So I'm a bit of a n00b when it comes to CSS. Actually, I'm a total n00b. I'm a visual designer who's trying to build on my webcoding skillz, with a couple of nice-looking but not-rocket-science HTML sites to my credit, and I'm trying to enter the modern age and learn CSS. To do so, I've picked up a book called 'Integrated HTML and CSS' (Sybex, 2005) and am going through it page by page, exercise by exercise. I'm only on page 44, and I'm already stymied, as the book's demonstration of 'background-position' in no way reflects how my browsers are acting. (For the record, I'm a Firefox user, but I recognize that IE has yet to be toppled as a the dominant beast.)
What I'm working with right now is an HTML document consisting of
<!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">
<head>
<title>My First Practice Page</title>
<link href="ch3practice.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Hello, world</p>
</body>
</html>
and a style sheet consisting of
body {
background-color: #9CC;
background-image: url(ch3bg_sm.gif);
background-repeat: repeat-y;
background-position: 100% 50%;
margin-top: 10%;
margin-left: 15%;
}
Couldn't be simpler, yes? Well, the book claims that the background-position declaration (more specifically, the "50%" part) will make a silly starflake picture repeat across the middle of the page. Which it does, in IE... though I've discovered that IE apparently defaults that value to 50% (center) even if I remove the value completely, and only have a specifier for the x-axis. (i.e. background-position: 100%) Is that right?
What's more important to me, though, is that apparently Firefox does not even register any kind of y-axis specifier. That stupid snowflake just sits along the top of the window, no matter what value I put in. (I've already read a dissertation on the browser compatibilities associated with percentage/pixel/keyword value combinations... I don't think that's the issue, but then, I'm clueless anyways.)
In short, I feel like a grown man who can't figure out why the square peg won't fit into the round hole. I hate to take up bandwidth with such a piddly little issue, but I'd like to know I'm not starting out on the wrong foot. Any wisdom is greatly appreciated. Thanks!
|
