Let me admit first of all that I am a novice. Awhile back I made a very basic set of pages that displayed properly in IE. Later, I started using Firefox as my browser, and realized that my code doesn't display properly in Firefox.
What I'm trying for is the blue menu color running down the entire length of the page. Firefox shows my main body text as though it's "sitting on top" of the blue menu. I validated the HTML and the CSS, which shows a parsing problem on the bottom line which I also can't figure out. But I'm guessing the main problem is with the structure I've set up for the page, and I just can't figure it out.
Thanks for any help you can provide.
The page is at . My CSS is as follows:
What I'm trying for is the blue menu color running down the entire length of the page. Firefox shows my main body text as though it's "sitting on top" of the blue menu. I validated the HTML and the CSS, which shows a parsing problem on the bottom line which I also can't figure out. But I'm guessing the main problem is with the structure I've set up for the page, and I just can't figure it out.
Thanks for any help you can provide.
The page is at . My CSS is as follows:
Code:
/* new_coach_home.css */
body
{ font-family: Arial, sans-serif;
margin: 0px; padding: 0px;
background-color: #99CCFF; }
h1, h2, h3
/* clear stops floating */
{ clear: both;
font-family: Verdana, sans-serif; }
.structure /*try to make structure the big box */
{ margin-left: 30%; /*bottom doesn't seem to work in either margin-bottom; 0em;*/
background-color: white; color: black;
height: 100%;
}
#headline /* These create the overlapping headline effect */
{ padding: 1em; margin-bottom: 0em; }
#headline .coach
{ position: absolute; left: 0em; top: 0em;
font-size: 1em; color: #0000FF; }
#headline .me
{ position: relative; right: -45%; top: 0.5em;
font-size: 0.75em; color: #0000ff; }
#main { padding: 1em 1em 1em 1em;
} /*top, right, bottom, left*/
#sitemenu
{ position: absolute; left: 0em; top:30%;
/* background-color: yellow; border: 2px solid white; */
font-family: Verdana, Arial, sans-serif;
margin: 0em; padding: .5em;
min-width: 30%; }
#sitemenu a
{display: block;}
#sitemenu a:link
{ color: #0000FF; text-decoration: none;
font-weight: bold; }
#sitemenu a:visited
{ color: #0000FF; text-decoration: none;
font-weight: bold; }
#sitemenu a:hover { color: white; }
#location {position: relative;top: 5em;
font-family: Verdana, Arial, sans-serif;
color: white;
font: italic bold 8pt;
line-height: 50%;
}
#bottom_links a:link
(text-align: center; font: 8pt; color: red;}[/CODEWhat I'm trying for is the blue menu color running down the entire length of the page.
Is this the probelm? Try looking up faux colums, or something similar.
(text-align: center; font: 8pt; color: red;}
This should be:{text-align: center; font: 8pt; color: red;}