CSS problem in Firefox

**Alexey Smirnov** · Nov 17 '08, 08:55 AM

Re: CSS problem in Firefox

On Nov 17, 8:25 am, "Steve" <ga63...@nospam .nospamwrote:

Hi All
>
I have an asp.net 2.0 website with the following css file
>
It uses Master pages and in Firefox 3.04 for windows only, 3 of the web
pages don't display the Master page properly
>
The content page overlaps the Master page boundaries
>
In IE 6/7 All works fine
>
I have tested it at the w3c CSS validator site and NO errors returned
>
I believe there are some issues with float: in Firefox
>
Website iswww.australia pos.com.au
>
Any help appreciated
>
Regards
Steve
>
CSS code follows
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
CONTENT CONTAINER - TWO COLUMN
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#content-container-two-column {
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
padding:15px;
>
width:728px;
>
border:1px solid #818181;
>
/*background:url (../../images/bg-content-products.png) repeat-y right;*/
>
position:relati ve;
>
}
>
#content-main-two-column {
>
width:540px;
>
float:left;
>
}
>
#content-side-two-column {
>
float:right;
>
width:160px;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
CONTENT CONTAINER - THREE COLUMN
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#content-container-three-column {
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
padding:15px;
>
width:728px;
>
border:1px solid #818181;
>
background:url( ../../images/bg-three-column-main.png) repeat-y;
>
position:relati ve;
>
}
>
#content-main-three-column {
>
width:355px;
>
float:left;
>
margin-left:25px;
>
}
>
#content-side2-three-column,
>
#content-side1-three-column {
>
width:160px;
>
font-size:.9em;
>
}
>
#content-side2-three-column {
>
float:right;
>
}
>
#content-side1-three-column {
>
float:left;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HOME PAGE - THREE COLUMN SECTION
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#three-column-container {
>
background:url( ../../images/bg-three-column-home.png) repeat-y;
>
padding:0;
>
margin:20px 0 10px 0;
>
}
>
#three-column-side1 {
>
float:left;
>
width:30%;
>
}
>
#three-column-side2 {
>
float:right;
>
width:30%;
>
}
>
#three-column-middle {
>
width:30%;
>
margin:0px 32% 0px 35%;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~
>
css-master
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HTML TAGS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
body {
>
margin:0px;
>
background-color:#FFFFFF;
>
font-family:Verdana, Arial, Helvetica, sans-serif;
>
font-size:0.7em;
>
line-height:1.4em;
>
color:#666666;
>
}
>
p {
>
margin:10px 0;
>
}
>
p.no-padding-no-margin {
>
padding:0;
>
margin:0;
>
}
>
hr{
>
color: #E5E5E5;
>
background-color: #E5E5E5;
>
height: 1px;
>
border:0;
>
margin:15px 0;
>
}
>
blockquote {
>
padding:0 0 0 12px;
>
margin:12px 0 0 0;
>
background:url( ../../images/bg-quote.png) no-repeat;
>
}
>
blockquote p {
>
margin:2px 0;
>
}
>
cite {
>
font-size:.85em;
>
margin:0;
>
padding:0 0 0 6px;
>
}
>
fieldset {
>
padding:15px;
>
}
>
legend {
>
color:#333333;
>
padding:5px 3px 10px 3px;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HEADINGS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
h1, h2, h3, h4, h5, h6 {
>
font-size:1.8em;
>
font-family:Tahoma, Arial, Helvetica, sans-serif;
>
line-height:1.1em;
>
margin:5px 0;
>
}
>
h1 {
>
margin-bottom:0;
>
}
>
h1, h2 {
>
margin-top:0px;
>
}
>
h2 {
>
font-size:1.3em;
>
}
>
h3 {
>
font-size:1.1em;
>
}
>
h3.small {
>
font-size:1.2em;
>
}
>
h4 {
>
font-size:1.1em;
>
}
>
h5 {
>
font-size:1.1em;
>
}
>
h6 {
>
font-size:1em;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
LINKS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
a:link {
>
color:#d61719;
>
text-decoration:none ;
>
}
>
a:visited {
>
color:#980000;
>
text-decoration:none ;
>
}
>
a:hover {
>
text-decoration:none ;
>
}
>
a:active {
>
color:#980000;
>
}
>
#content-side-two-column a:link,
>
#content-side2-three-column a:link,
>
#content-side1-three-column a:link,
>
#content-side-two-column a:visited,
>
#content-side2-three-column a:visited,
>
#content-side1-three-column a:visited {
>
text-decoration:none ;
>
}
>
#content-side-two-column a:hover,
>
#content-side2-three-column a:hover,
>
#content-side1-three-column a:hover {
>
text-decoration:unde rline;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
TOP INFORMATION
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#top-information {
>
height:4.5em;
>
margin-left:auto;
>
margin-right:auto;
>
margin-bottom:3px;
>
color:#999999;
>
font-size:.85em;
>
position:relati ve;
>
width:760px;
>
}
>
#logo {
>
position:absolu te;
>
top:.5em;
>
left:15px;
>
font-size:2.6em;
>
font-family:Georgia, "Times New Roman", Times, serif;
>
height:2.8em;
>
padding:.1em 0 .2em 0;
>
font-variant:small-caps;
>
}
>
#logo a {
>
color:#4A6BB3;
>
text-decoration:none ;
>
}
>
#top-information-home {
>
text-align:right;
>
border-bottom:1px dashed #CACACA;
>
position:absolu te;
>
top:0;
>
right:25.5%;
>
height:2em;
>
width:15%;
>
padding:0 1.5% 0 0;
>
}
>
#top-information-phone {
>
text-align:center;
>
border-left:1px dashed #CACACA;
>
position:absolu te;
>
top:0;
>
left:75%;
>
height:100%;
>
padding:0 0 0 2%;
>
}
>
#top-information-link {
>
text-align: center;
>
border-left:1px dashed #CACACA;
>
position:absolu te;
>
top:0;
>
right:0;
>
height:2em;
>
width:8.5%;
>
padding:0 0 0 1.5%;
>
}
>
#heading{
>
text-align: left;
>
font-size:1.4em;
>
font-weight:bold;
>
}
>
#subheading{
>
font-size:1.1em;
>
font-weight:bold;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
MAIN NAV
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#nav-main {
>
background:#608 fc8 url(../../images/bg-nav.png) no-repeat;
>
margin-left:auto;
>
margin-right:auto;
>
width:740px;
>
padding:.8em 0 1em 20px;
>
position:relati ve;
>
font-weight:bold;
>
}
>
#nav-main div {
>
background:#4b6 cb5 url(../../images/bg-nav-side.png) top right no-repeat;
>
width:25%;
>
position:absolu te;
>
top:0;
>
right:0;
>
padding:.8em 0 1em 0;
>
}
>
#nav-main ul {
>
margin:0;
>
padding:0 20% 0 0;
>
}
>
#nav-main li {
>
display:inline;
>
list-style:none;
>
padding:0 1em 0 0;
>
background:none ;
>
}
>
#nav-main a:link,
>
#nav-main a:visited {
>
color:#FFFFFF;
>
text-decoration:none ;
>
}
>
#nav-main a:hover {
>
color:#D4E7F8;
>
text-decoration:unde rline;
>
}
>
#nav-main a:active {
>
color:#FFFFFF;
>
}
>
#nav-main li.current a:link,
>
#nav-main li.current a:visited {
>
text-decoration:unde rline;
>
}
>
#nav-main li.current a:hover {
>
color:#D4E7F8;
>
text-decoration:unde rline;
>
}
>
#nav-main li.current a:active {
>
color:#FFFFFF;
>
}
>
/* ACTIVE PAGES */
>
#nav-main a.StaticSelecte dStyle:link,
>
#nav-main a.StaticSelecte dStyle:visited {
>
color:#D4E7F8;
>
text-decoration:unde rline;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
POSTER PHOTO
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#poster-photo-container {
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
width:760px;
>
background:#608 fc8;
>
position:relati ve;
>
}
>
.poster-photo-image {
>
border-right:3px solid #FFF;
>
display:block;
>
}
>
#feature-area-home {
>
position:absolu te;
>
top:0;
>
right:0;
>
width:21%;
>
text-align:center;
>
padding:2%;
>
color:#FFFFFF;
>
font-size:1.2em;
>
font-weight:bold;
>
line-height:160%;
>
}
>
#feature-area-home a:link,
>
#feature-area-home a:visited {
>
color:#dcf2f7;
>
text-decoration:unde rline;
>
}
>
#feature-area-home a:hover {
>
text-decoration:none ;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
pagetitle
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#pagetitle {
>
margin-top:2px;
>
margin-left:auto;
>
margin-right:auto;
>
width:720px;
>
background:#608 fc8;
>
position:relati ve;
>
color:#d5e8ff;
>
font-size: large;
>
padding:.5em 20px .7em 20px;
>
}
>
#pagetitle a:link,
>
#pagetitle a:visited {
>
color:#FFFFFF;
>
text-decoration:none ;
>
}
>
#pagetitle a:hover{
>
color:#D4E7F8;
>
text-decoration:none ;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
TREE VIEW CONTROL
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
.TreeView
>
{
>
border-bottom:1px dotted #B2B2B2 !important;
>
}
>
.TreeView div
>
{
>
margin-left:5px;
>
}
>
.TreeView table
>
{
>
border-top:1px dotted #B2B2B2 !important;
>
}
>
.TreeView div table
>
{
>
border-bottom:none !important;
>
border-top:none !important;
>
}
>
.TreeView table td
>
{
>
padding:2px 0;
>
}
>
.LeafNodesStyle
>
{
>
}
>
.RootNodeStyle
>
{
>
}
>
/* ALL ELEMENTS */
>
.NodeStyle
>
{
>
}
>
.ParentNodeStyl e
>
{
>
background:yell ow;
>
}
>
a.SelectedNodeS tyle
>
{
>
background:#E5E 5E5;
>
display:block;
>
padding:2px 0 2px 3px;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
LISTS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
ul {
>
margin:0;
>
padding:0;
>
}
>
li {
>
list-style:none;
>
background:url( ../../images/list-bullet-02.gif) no-repeat 0 .8em;
>
padding:.2em 0 .2em 1em;
>
margin-left:0.4em;
>
}
>
ul.list-of-links {
>
border-bottom:1px dotted #B2B2B2;
>
}
>
#content-side1-three-column ul.list-of-links,
>
#content-side2-three-column ul.list-of-links {
>
margin: 0 0 30px 0px;
>
}
>
ul.list-of-links li{
>
border-top:1px dotted #B2B2B2;
>
background-image:url(../../images/list-bullet-01-link.gif);
>
}
>
ul.list-of-links li.current {
>
background-color:#E5E5E5;
>
}
>
ul.no-lines,
>
ul.no-lines li {
>
border:none;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HOME PAGE FEATURE AREA
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
.feature-area {
>
background-color:#6799D1;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
IMAGES & PHOTOS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
img {
>
border:none;
>
}
>
.photo-border {
>
border:1px solid #cecece;
>
padding:4px;
>
background:#d9d 9d9 url(../../images/bg-photo.png) top repeat-x;
>
margin-bottom:5px;
>
display:block;
>
}
>
.photo-float-left {
>
float:left;
>
margin-right:10px;
>
}
>
.image-border-none {
>
border:none;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
FOOTER
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#footer {
>
background:#608 fc8 url(../../images/bg-nav.png) bottom left no-repeat;
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
width:740px;
>
padding:.8em 0 1em 20px;
>
position:relati ve;
>
color:#a9c0db;
>
font-size:.8em;
>
}
>
#footer div {
>
background:#4b6 cb5 url(../../images/bg-nav-side.png) bottom right no-repeat;
>
width:25%;
>
position:absolu te;
>
top:0;
>
right:0;
>
padding:.8em 0 1em 0;
>
}
>
#footer a:link,
>
#footer a:visited {
>
color:#FFFFFF;
>
text-decoration:none ;
>
}
>
#footer a:hover {
>
color:#D4E7F8;
>
text-decoration:none ;
>
}
>
#footer a:active {
>
color:#FFFFFF;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
FOOTER-SUB
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#footer-sub {
>
margin-top:1em;
>
margin-left:auto;
>
margin-right:auto;
>
width:740px;
>
text-align:center;
>
padding:.1em 0 2em 0;
>
position:relati ve;
>
font-size:.8em;
>
color:#999999;
>
}
>
#footer-sub ul {
>
margin:0;
>
padding:0;
>
}
>
#footer-sub li {
>
display:inline;
>
list-style:none;
>
padding:0 1em 0 0;
>
background:none ;
>
}
>
#footer-sub a:link,
>
#footer-sub a:visited {
>
text-decoration:unde rline;
>
color:#999999;
>
}
>
#footer-sub a:hover {
>
color:#666666;
>
text-decoration:none ;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
MISC CLASSES
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
.news-date {
>
font-size:0.9em;
>
font-style:italic;
>
color:#A4A4A4;
>
}
>
.arrow {
>
vertical-align:middle;
>
}
>
input.button-big {
>
font-weight:bold;
>
padding:.7em 1.5em;
>
font-size:1.1em;
>
vertical-align:bottom;
>
}
>
input.button-small {
>
font-weight:normal;
>
padding:.4em 1em;
>
font-size:.8em;
>
vertical-align:bottom;
>
}
>
.clear {
>
clear:both;
>
}
>
.none {
>
display:none;
>
}

Hi Steve,

basically I don't see any reason to have so many styles to make so
simple layout. For example, you made /images/bg-nav.png as a
background for the central area where you don't need any background...
I would suggest to split your page in to the head, top, central, and
footer, where central will be the area with the text and footer will
be the small blue bar at the bottom with the links. The central area
would not have any background.

P.S.

To see the text on the central area, simply get rid of
position:relati ve; in the #footer definition.

Alexey

**Steve** · Nov 17 '08, 09:05 PM

Re: CSS problem in Firefox

Hi Alexey

Thanks for the reply

I am new to asp.net programming in VS 2005

I got the template for the website from one of Microsoft's web templates and
have not changed any of the code in the css file

I will take your advice and see how it goes

Regards
Steve

"Alexey Smirnov" <alexey.smirnov @gmail.comwrote in message
news:39e148f9-00cf-4dfd-936d-9b598797f57e@1g 2000prd.googleg roups.com...
On Nov 17, 8:25 am, "Steve" <ga63...@nospam .nospamwrote:

Hi All
>
I have an asp.net 2.0 website with the following css file
>
It uses Master pages and in Firefox 3.04 for windows only, 3 of the web
pages don't display the Master page properly
>
The content page overlaps the Master page boundaries
>
In IE 6/7 All works fine
>
I have tested it at the w3c CSS validator site and NO errors returned
>
I believe there are some issues with float: in Firefox
>
Website iswww.australia pos.com.au
>
Any help appreciated
>
Regards
Steve
>
CSS code follows
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
CONTENT CONTAINER - TWO COLUMN
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#content-container-two-column {
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
padding:15px;
>
width:728px;
>
border:1px solid #818181;
>
/*background:url (../../images/bg-content-products.png) repeat-y right;*/
>
position:relati ve;
>
}
>
#content-main-two-column {
>
width:540px;
>
float:left;
>
}
>
#content-side-two-column {
>
float:right;
>
width:160px;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
CONTENT CONTAINER - THREE COLUMN
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#content-container-three-column {
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
padding:15px;
>
width:728px;
>
border:1px solid #818181;
>
background:url( ../../images/bg-three-column-main.png) repeat-y;
>
position:relati ve;
>
}
>
#content-main-three-column {
>
width:355px;
>
float:left;
>
margin-left:25px;
>
}
>
#content-side2-three-column,
>
#content-side1-three-column {
>
width:160px;
>
font-size:.9em;
>
}
>
#content-side2-three-column {
>
float:right;
>
}
>
#content-side1-three-column {
>
float:left;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HOME PAGE - THREE COLUMN SECTION
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#three-column-container {
>
background:url( ../../images/bg-three-column-home.png) repeat-y;
>
padding:0;
>
margin:20px 0 10px 0;
>
}
>
#three-column-side1 {
>
float:left;
>
width:30%;
>
}
>
#three-column-side2 {
>
float:right;
>
width:30%;
>
}
>
#three-column-middle {
>
width:30%;
>
margin:0px 32% 0px 35%;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~
>
css-master
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HTML TAGS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
body {
>
margin:0px;
>
background-color:#FFFFFF;
>
font-family:Verdana, Arial, Helvetica, sans-serif;
>
font-size:0.7em;
>
line-height:1.4em;
>
color:#666666;
>
}
>
p {
>
margin:10px 0;
>
}
>
p.no-padding-no-margin {
>
padding:0;
>
margin:0;
>
}
>
hr{
>
color: #E5E5E5;
>
background-color: #E5E5E5;
>
height: 1px;
>
border:0;
>
margin:15px 0;
>
}
>
blockquote {
>
padding:0 0 0 12px;
>
margin:12px 0 0 0;
>
background:url( ../../images/bg-quote.png) no-repeat;
>
}
>
blockquote p {
>
margin:2px 0;
>
}
>
cite {
>
font-size:.85em;
>
margin:0;
>
padding:0 0 0 6px;
>
}
>
fieldset {
>
padding:15px;
>
}
>
legend {
>
color:#333333;
>
padding:5px 3px 10px 3px;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HEADINGS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
h1, h2, h3, h4, h5, h6 {
>
font-size:1.8em;
>
font-family:Tahoma, Arial, Helvetica, sans-serif;
>
line-height:1.1em;
>
margin:5px 0;
>
}
>
h1 {
>
margin-bottom:0;
>
}
>
h1, h2 {
>
margin-top:0px;
>
}
>
h2 {
>
font-size:1.3em;
>
}
>
h3 {
>
font-size:1.1em;
>
}
>
h3.small {
>
font-size:1.2em;
>
}
>
h4 {
>
font-size:1.1em;
>
}
>
h5 {
>
font-size:1.1em;
>
}
>
h6 {
>
font-size:1em;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
LINKS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
a:link {
>
color:#d61719;
>
text-decoration:none ;
>
}
>
a:visited {
>
color:#980000;
>
text-decoration:none ;
>
}
>
a:hover {
>
text-decoration:none ;
>
}
>
a:active {
>
color:#980000;
>
}
>
#content-side-two-column a:link,
>
#content-side2-three-column a:link,
>
#content-side1-three-column a:link,
>
#content-side-two-column a:visited,
>
#content-side2-three-column a:visited,
>
#content-side1-three-column a:visited {
>
text-decoration:none ;
>
}
>
#content-side-two-column a:hover,
>
#content-side2-three-column a:hover,
>
#content-side1-three-column a:hover {
>
text-decoration:unde rline;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
TOP INFORMATION
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#top-information {
>
height:4.5em;
>
margin-left:auto;
>
margin-right:auto;
>
margin-bottom:3px;
>
color:#999999;
>
font-size:.85em;
>
position:relati ve;
>
width:760px;
>
}
>
#logo {
>
position:absolu te;
>
top:.5em;
>
left:15px;
>
font-size:2.6em;
>
font-family:Georgia, "Times New Roman", Times, serif;
>
height:2.8em;
>
padding:.1em 0 .2em 0;
>
font-variant:small-caps;
>
}
>
#logo a {
>
color:#4A6BB3;
>
text-decoration:none ;
>
}
>
#top-information-home {
>
text-align:right;
>
border-bottom:1px dashed #CACACA;
>
position:absolu te;
>
top:0;
>
right:25.5%;
>
height:2em;
>
width:15%;
>
padding:0 1.5% 0 0;
>
}
>
#top-information-phone {
>
text-align:center;
>
border-left:1px dashed #CACACA;
>
position:absolu te;
>
top:0;
>
left:75%;
>
height:100%;
>
padding:0 0 0 2%;
>
}
>
#top-information-link {
>
text-align: center;
>
border-left:1px dashed #CACACA;
>
position:absolu te;
>
top:0;
>
right:0;
>
height:2em;
>
width:8.5%;
>
padding:0 0 0 1.5%;
>
}
>
#heading{
>
text-align: left;
>
font-size:1.4em;
>
font-weight:bold;
>
}
>
#subheading{
>
font-size:1.1em;
>
font-weight:bold;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
MAIN NAV
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#nav-main {
>
background:#608 fc8 url(../../images/bg-nav.png) no-repeat;
>
margin-left:auto;
>
margin-right:auto;
>
width:740px;
>
padding:.8em 0 1em 20px;
>
position:relati ve;
>
font-weight:bold;
>
}
>
#nav-main div {
>
background:#4b6 cb5 url(../../images/bg-nav-side.png) top right no-repeat;
>
width:25%;
>
position:absolu te;
>
top:0;
>
right:0;
>
padding:.8em 0 1em 0;
>
}
>
#nav-main ul {
>
margin:0;
>
padding:0 20% 0 0;
>
}
>
#nav-main li {
>
display:inline;
>
list-style:none;
>
padding:0 1em 0 0;
>
background:none ;
>
}
>
#nav-main a:link,
>
#nav-main a:visited {
>
color:#FFFFFF;
>
text-decoration:none ;
>
}
>
#nav-main a:hover {
>
color:#D4E7F8;
>
text-decoration:unde rline;
>
}
>
#nav-main a:active {
>
color:#FFFFFF;
>
}
>
#nav-main li.current a:link,
>
#nav-main li.current a:visited {
>
text-decoration:unde rline;
>
}
>
#nav-main li.current a:hover {
>
color:#D4E7F8;
>
text-decoration:unde rline;
>
}
>
#nav-main li.current a:active {
>
color:#FFFFFF;
>
}
>
/* ACTIVE PAGES */
>
#nav-main a.StaticSelecte dStyle:link,
>
#nav-main a.StaticSelecte dStyle:visited {
>
color:#D4E7F8;
>
text-decoration:unde rline;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
POSTER PHOTO
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#poster-photo-container {
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
width:760px;
>
background:#608 fc8;
>
position:relati ve;
>
}
>
.poster-photo-image {
>
border-right:3px solid #FFF;
>
display:block;
>
}
>
#feature-area-home {
>
position:absolu te;
>
top:0;
>
right:0;
>
width:21%;
>
text-align:center;
>
padding:2%;
>
color:#FFFFFF;
>
font-size:1.2em;
>
font-weight:bold;
>
line-height:160%;
>
}
>
#feature-area-home a:link,
>
#feature-area-home a:visited {
>
color:#dcf2f7;
>
text-decoration:unde rline;
>
}
>
#feature-area-home a:hover {
>
text-decoration:none ;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
pagetitle
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#pagetitle {
>
margin-top:2px;
>
margin-left:auto;
>
margin-right:auto;
>
width:720px;
>
background:#608 fc8;
>
position:relati ve;
>
color:#d5e8ff;
>
font-size: large;
>
padding:.5em 20px .7em 20px;
>
}
>
#pagetitle a:link,
>
#pagetitle a:visited {
>
color:#FFFFFF;
>
text-decoration:none ;
>
}
>
#pagetitle a:hover{
>
color:#D4E7F8;
>
text-decoration:none ;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
TREE VIEW CONTROL
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
.TreeView
>
{
>
border-bottom:1px dotted #B2B2B2 !important;
>
}
>
.TreeView div
>
{
>
margin-left:5px;
>
}
>
.TreeView table
>
{
>
border-top:1px dotted #B2B2B2 !important;
>
}
>
.TreeView div table
>
{
>
border-bottom:none !important;
>
border-top:none !important;
>
}
>
.TreeView table td
>
{
>
padding:2px 0;
>
}
>
.LeafNodesStyle
>
{
>
}
>
.RootNodeStyle
>
{
>
}
>
/* ALL ELEMENTS */
>
.NodeStyle
>
{
>
}
>
.ParentNodeStyl e
>
{
>
background:yell ow;
>
}
>
a.SelectedNodeS tyle
>
{
>
background:#E5E 5E5;
>
display:block;
>
padding:2px 0 2px 3px;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
LISTS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
ul {
>
margin:0;
>
padding:0;
>
}
>
li {
>
list-style:none;
>
background:url( ../../images/list-bullet-02.gif) no-repeat 0 .8em;
>
padding:.2em 0 .2em 1em;
>
margin-left:0.4em;
>
}
>
ul.list-of-links {
>
border-bottom:1px dotted #B2B2B2;
>
}
>
#content-side1-three-column ul.list-of-links,
>
#content-side2-three-column ul.list-of-links {
>
margin: 0 0 30px 0px;
>
}
>
ul.list-of-links li{
>
border-top:1px dotted #B2B2B2;
>
background-image:url(../../images/list-bullet-01-link.gif);
>
}
>
ul.list-of-links li.current {
>
background-color:#E5E5E5;
>
}
>
ul.no-lines,
>
ul.no-lines li {
>
border:none;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
HOME PAGE FEATURE AREA
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
.feature-area {
>
background-color:#6799D1;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
IMAGES & PHOTOS
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
img {
>
border:none;
>
}
>
.photo-border {
>
border:1px solid #cecece;
>
padding:4px;
>
background:#d9d 9d9 url(../../images/bg-photo.png) top repeat-x;
>
margin-bottom:5px;
>
display:block;
>
}
>
.photo-float-left {
>
float:left;
>
margin-right:10px;
>
}
>
.image-border-none {
>
border:none;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
FOOTER
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#footer {
>
background:#608 fc8 url(../../images/bg-nav.png) bottom left no-repeat;
>
margin-top:3px;
>
margin-left:auto;
>
margin-right:auto;
>
width:740px;
>
padding:.8em 0 1em 20px;
>
position:relati ve;
>
color:#a9c0db;
>
font-size:.8em;
>
}
>
#footer div {
>
background:#4b6 cb5 url(../../images/bg-nav-side.png) bottom right
no-repeat;
>
width:25%;
>
position:absolu te;
>
top:0;
>
right:0;
>
padding:.8em 0 1em 0;
>
}
>
#footer a:link,
>
#footer a:visited {
>
color:#FFFFFF;
>
text-decoration:none ;
>
}
>
#footer a:hover {
>
color:#D4E7F8;
>
text-decoration:none ;
>
}
>
#footer a:active {
>
color:#FFFFFF;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
FOOTER-SUB
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
#footer-sub {
>
margin-top:1em;
>
margin-left:auto;
>
margin-right:auto;
>
width:740px;
>
text-align:center;
>
padding:.1em 0 2em 0;
>
position:relati ve;
>
font-size:.8em;
>
color:#999999;
>
}
>
#footer-sub ul {
>
margin:0;
>
padding:0;
>
}
>
#footer-sub li {
>
display:inline;
>
list-style:none;
>
padding:0 1em 0 0;
>
background:none ;
>
}
>
#footer-sub a:link,
>
#footer-sub a:visited {
>
text-decoration:unde rline;
>
color:#999999;
>
}
>
#footer-sub a:hover {
>
color:#666666;
>
text-decoration:none ;
>
}
>
/*~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*
>
MISC CLASSES
>
~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~ ~~*/
>
.news-date {
>
font-size:0.9em;
>
font-style:italic;
>
color:#A4A4A4;
>
}
>
.arrow {
>
vertical-align:middle;
>
}
>
input.button-big {
>
font-weight:bold;
>
padding:.7em 1.5em;
>
font-size:1.1em;
>
vertical-align:bottom;
>
}
>
input.button-small {
>
font-weight:normal;
>
padding:.4em 1em;
>
font-size:.8em;
>
vertical-align:bottom;
>
}
>
.clear {
>
clear:both;
>
}
>
.none {
>
display:none;
>
}

Hi Steve,

basically I don't see any reason to have so many styles to make so
simple layout. For example, you made /images/bg-nav.png as a
background for the central area where you don't need any background...
I would suggest to split your page in to the head, top, central, and
footer, where central will be the area with the text and footer will
be the small blue bar at the bottom with the links. The central area
would not have any background.

P.S.

To see the text on the central area, simply get rid of
position:relati ve; in the #footer definition.

Alexey

**Allen Chen [MSFT]** · Nov 21 '08, 10:35 AM

Re: CSS problem in Firefox

Hi Steve,

Do you have any progress on this issue? If you need further assistance
please let me know.

Regards,
Allen Chen
Microsoft Online Community Support

CSS problem in Firefox

CSS problem in Firefox

Comment

Comment

Comment