CSS basic questions

[B L U E]

just getting into web standards:)
I'm encountering some problems while creating this (http://www.eclipseprint.com/fullriver) site, hopefully someone can lend their expertise.

1) Color discrepancies. Firefox is the only browser Ive tested this on where this isn't an issue. However, in other browsers there is a huge difference in color between an image's color and the body's bgcolor set via CSS, even though I use the exact hexadecimal color code for each. If you look at the side gradients you'll see what I mean.

2) On this page (http://www.eclipseprint.com/fullriver/whatmakes.html), the text within the div class "content" 's height extends the page's height. The two outer div's "left" and "right" (gradients) are set to 100% height, but do not stretch the entire page like they should.

Hope I made sense. Any help would be appreciated!:)

[aldomatic]

1.you could made the gradients, both a bg image and tile it on the body tag that would make it work best, and slove that issue.

2. And i think it extends past your set height becauase you have more content then, what set height you have. or you can also fake it with an image like the gradients

[simplistik]

for the fist question do a Save for Web in PS

[fasterthanlight™]

for the second question make sure your body{ } code looks like this:



body,html
{
height: 100%;
}

[B L U E]

Ok first issue fixed. Thanks Simp:) However, still no luck on the second. I've included what you said faster, and I'm not sure I follow you al-do.

[B L U E]

Ok, I've changed it so #page vertically tiles a bg image 100% of the page height, but it doesn't end up 100% due to the content text extending. Here is the css code.
body {
background-color: #036;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #036;
text-align:center;
height:100%;
padding: 0px 0px 0px 0px;
}
a {
color: #FF6600;
font-weight:bold;
}
a:hover {
color: #3366CC;
}
#page {
position:absolute;
top:0px;
left:50%;
width:1050px;
height:100%;
margin: 0px -525px;
background: url(images/total.jpg) repeat-y 0 0;
}
#main {
position:absolute;
left:145px;
top:0px;
width:760px;
height:100%;
}
#menubox {
width:165px;
padding-top:30px;
}
.navText {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
line-height:16px;
letter-spacing:.1em;
border-top: 2px solid #C0DFFD;
text-decoration: none;
text-align:left;
}
.navTextS {
font: 11px Verdana, Arial, Helvetica, sans-serif;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
border-top: 2px solid #C0DFFD;
padding:8px 6px 10px 26px;
background: #ffffff url("mm_arrow.gif") 14px 45% no-repeat;
color:#FF6600;
text-decoration: none;
text-align:left;
}
#menubox a {
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
line-height:16px;
letter-spacing:.1em;
text-decoration: none;
display:block;
padding:8px 6px 10px 26px;
background: url("mm_arrow.gif") 14px 45% no-repeat;
}
#menubox a:hover {
background: #ffffff url("mm_arrow.gif") 14px 45% no-repeat;
color:#FF6600;
}
.content {
position:absolute;
text-align:justify;
width:595px;
top:351px;
left:165px;
}
.topimg {
width:610px;
height:127px;
}
.bar1 {
width:100%;
height:12px;
background:#f00;
}
.bar2 {
width:100%;
height:12px;
background:#036;
}
.flashbar {
width:100%;
height:200px;
}
.bodyText {
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#003366;
line-height:20px;
background: #C0DFFD;
margin:0px 10px 0px 10px;
}
.bodyText a {
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#003366;
line-height:20px;
text-decoration:none;
font-weight:bold;
}
.bodyText a:hover {
font:11px Verdana, Arial, Helvetica, sans-serif;
color:#F60;
line-height:20px;
text-decoration:underline;
font-weight:bold;
}
.pageName{
font: 18px Verdana, Arial, Helvetica, sans-serif;
color: #3366CC;
background: #C0DFFD;
line-height:24px;
padding:10px 10px 0px 10px;
letter-spacing:.2em;
text-align:center;
}
.subHeader {
font:bold 10px Verdana, Arial, Helvetica, sans-serif;
color: #3366CC;
line-height:16px;
letter-spacing:.2em;
}
.quote {
font: 20px Verdana, Arial, Helvetica, sans-serif;
color: #759DA1;
line-height:30px;
}
.smallText {
font: 10px Verdana, Arial, Helvetica, sans-serif;
color: #003366;
}
td {
font:9px Geneva, Arial, Helvetica, sans-serif;
background:#FFF;
color:#036;
text-align:center;
}
tr.blue td {
font:9px Geneva, Arial, Helvetica, sans-serif;
background:#C0DFFD;
color:#036;
text-align:center;
}
th {
font:9px Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
text-align:center;
background:#036;
color:#FFF;
}Anybody have an idea?

[aldomatic]

do you have a link?

[simplistik]

Looks like it's workin to me... at least in the link u provided

[B L U E]

Aye, I tried putting the tiled bg image under body instead of #page and it worked. Apparently #page wasn't stretching properly for some reason.

[B L U E]

Can someone on a PC check in IE to see if the navigation shows up? Maybe FF too.