Formatting, Percentages, and Browser Incompatability Options

[UniD]

URL:http://conformingmasks.com/index2.html
CSS:http://conformingmasks.com/css.css

CODE

body
{
    background-color: black;
    border: 0px;
    color: white;
    cursor: url('/img2/point.ani');
    display: block;
    height: 100%;
    margin: 10px;
    position: absolute;
    width: 100%;
}
img.banner
{
    border: 0px;
    border-color: black;
    float: left;
    margin-bottom: 10px;
    margin-top: 0px;
    position: absolute;
}
input.btn
{
    background-color: black;
    border: 1px solid;
    border-color: blue;
    color: white;
    cursor: crosshair;
    font-variant: small-caps;
    font-weight: bold;
    padding: 1px;
}
input.btn:hover
{
    background-color: white;
    color: black;
    font-weight: bolder;
}
#menu
{
    background-color: black;
    border: 1px dashed;
    border-color: blue;
    color: white;
    float: right;
    margin-right: 30px;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 70px;
    width: 65%;
}
#affiliates
{
    background-color: black;
    border: 1px dashed;
    border-color: blue;
    color: white;
    display: block;
    float: left;
    font-family: "arial black";
    font-size: 12px;
    font-variant: small-caps;
    height: 73%;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-top: 110px;
    padding: 3px;
    width: 30%;
}
#center
{
    background-color: black;
    border: 1px dashed;
    border-color: blue;
    color: white;
    display: block;
    float: right;
    font-family: "arial black";
    font-size: 12px;
    font-variant: small-caps;
    height: 73%;
    margin-right: 30px;
    margin-top: 10px;
    padding: 3px;
    width: 65%;
}

Well now that I've given the information, I have quite a few questions. First off, I'm fairly new to CSS and so there are some elements (ie. display) that I use haphazardly.

Questions:
1) Is it better to use percentages or actual defined pixels when working with width/height? I used percentages because I figure it's scalable but I'm not sure if it would somehow distort the data.

2) In firefox it looks how I want it to look, however that's not the case for internet explorer. I validated the code and it checked out okay (for the most part - note question 4), but it's still not cross-browser compatible and I have no idea why. Anyone know why this is occurring?

3) I was reading a bit about inheritance in CSS. For the most part it made sense. However for my own applicability I ran into a dead end. I was attempting to align the affiliate box beneath my banner. I set the margin-top attribute to 110px. For whatever reason it didn't acknowledge the banner image. However, for the center id (big box) it only required a margin-top attribute of 110. They're both layered underneath objects and yet they required completely different definitions. Can anyone explain it?

4) Value Error : cursor Missing comma separator. : url('/img2/point.ani') is the error message I got when I attempted to validate the page. Which is fine and dandy, but I simply have no idea what it's talking about. Why do I need a comma for a single attribute?

Hrm well I suppose that about covers it. If you see any general conflictions/bad coding habits please tell me.

Thanks to anyone who reads this! Anyways it's 5 in the morning, I'm going to bed. e.e;

[Darin McGrew]

1) Is it better to use percentages or actual defined pixels when working with width/height? I used percentages because I figure it's scalable but I'm not sure if it would somehow distort the data.

In general, percentages help the page to adapt gracefully to different browser windows. But there are exceptions. For the most part, images should use their actual pixel dimensions. And some things are best expressed using units like em that scale with the size of the font.

2) In firefox it looks how I want it to look, however that's not the case for internet explorer. I validated the code and it checked out okay (for the most part - note question 4), but it's still not cross-browser compatible and I have no idea why. Anyone know why this is occurring?

It might have something to do with the haphazard use of CSS properties. For example, do you want img.banner to float, or to be positioned absolutely?

4) Value Error : cursor Missing comma separator. : url('/img2/point.ani') is the error message I got when I attempted to validate the page. Which is fine and dandy, but I simply have no idea what it's talking about. Why do I need a comma for a single attribute?

The cursor property requires URLs to be used only in lists, with a keyword at the end of the list (in case none of the URLs in the list can be retrieved).

BTW, try reducing your browser window size and see what happens.