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;
