By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,135 Members | 1,277 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,135 IT Pros & Developers. It's quick & easy.

CSS problem in Firefox

P: n/a
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 is www.australiapos.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:relative;

}

#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:relative;

}

#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:underline;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

TOP INFORMATION

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#top-information {

height:4.5em;

margin-left:auto;

margin-right:auto;

margin-bottom:3px;

color:#999999;

font-size:.85em;

position:relative;

width:760px;

}
#logo {

position:absolute;

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:absolute;

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:absolute;

top:0;

left:75%;

height:100%;

padding:0 0 0 2%;

}

#top-information-link {

text-align: center;

border-left:1px dashed #CACACA;

position:absolute;

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:#608fc8 url(../../images/bg-nav.png) no-repeat;

margin-left:auto;

margin-right:auto;

width:740px;

padding:.8em 0 1em 20px;

position:relative;

font-weight:bold;

}

#nav-main div {

background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;

width:25%;

position:absolute;

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:underline;

}

#nav-main a:active {

color:#FFFFFF;

}

#nav-main li.current a:link,

#nav-main li.current a:visited {

text-decoration:underline;

}

#nav-main li.current a:hover {

color:#D4E7F8;

text-decoration:underline;

}

#nav-main li.current a:active {

color:#FFFFFF;

}

/* ACTIVE PAGES */

#nav-main a.StaticSelectedStyle:link,

#nav-main a.StaticSelectedStyle:visited {

color:#D4E7F8;

text-decoration:underline;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

POSTER PHOTO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#poster-photo-container {

margin-top:3px;

margin-left:auto;

margin-right:auto;

width:760px;

background:#608fc8;

position:relative;

}
..poster-photo-image {

border-right:3px solid #FFF;

display:block;

}

#feature-area-home {

position:absolute;

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:underline;

}
#feature-area-home a:hover {

text-decoration:none;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

pagetitle

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#pagetitle {

margin-top:2px;

margin-left:auto;

margin-right:auto;

width:720px;

background:#608fc8;

position:relative;

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

{

}

..ParentNodeStyle

{

background:yellow;

}
a.SelectedNodeStyle

{

background:#E5E5E5;

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:#d9d9d9 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:#608fc8 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:relative;

color:#a9c0db;

font-size:.8em;

}

#footer div {

background:#4b6cb5 url(../../images/bg-nav-side.png) bottom right no-repeat;

width:25%;

position:absolute;

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:relative;

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:underline;

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;

}
Nov 17 '08 #1
Share this Question
Share on Google+
3 Replies


P: n/a
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.australiapos.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:relative;

}

#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:relative;

}

#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:underline;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

TOP INFORMATION

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#top-information {

height:4.5em;

margin-left:auto;

margin-right:auto;

margin-bottom:3px;

color:#999999;

font-size:.85em;

position:relative;

width:760px;

}

#logo {

position:absolute;

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:absolute;

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:absolute;

top:0;

left:75%;

height:100%;

padding:0 0 0 2%;

}

#top-information-link {

text-align: center;

border-left:1px dashed #CACACA;

position:absolute;

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:#608fc8 url(../../images/bg-nav.png) no-repeat;

margin-left:auto;

margin-right:auto;

width:740px;

padding:.8em 0 1em 20px;

position:relative;

font-weight:bold;

}

#nav-main div {

background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;

width:25%;

position:absolute;

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:underline;

}

#nav-main a:active {

color:#FFFFFF;

}

#nav-main li.current a:link,

#nav-main li.current a:visited {

text-decoration:underline;

}

#nav-main li.current a:hover {

color:#D4E7F8;

text-decoration:underline;

}

#nav-main li.current a:active {

color:#FFFFFF;

}

/* ACTIVE PAGES */

#nav-main a.StaticSelectedStyle:link,

#nav-main a.StaticSelectedStyle:visited {

color:#D4E7F8;

text-decoration:underline;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

POSTER PHOTO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#poster-photo-container {

margin-top:3px;

margin-left:auto;

margin-right:auto;

width:760px;

background:#608fc8;

position:relative;

}

.poster-photo-image {

border-right:3px solid #FFF;

display:block;

}

#feature-area-home {

position:absolute;

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:underline;

}

#feature-area-home a:hover {

text-decoration:none;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

pagetitle

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#pagetitle {

margin-top:2px;

margin-left:auto;

margin-right:auto;

width:720px;

background:#608fc8;

position:relative;

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

{

}

.ParentNodeStyle

{

background:yellow;

}

a.SelectedNodeStyle

{

background:#E5E5E5;

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:#d9d9d9 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:#608fc8 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:relative;

color:#a9c0db;

font-size:.8em;

}

#footer div {

background:#4b6cb5 url(../../images/bg-nav-side.png) bottom right no-repeat;

width:25%;

position:absolute;

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:relative;

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:underline;

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:relative; in the #footer definition.

Alexey
Nov 17 '08 #2

P: n/a
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" <al************@gmail.comwrote in message
news:39**********************************@1g2000pr d.googlegroups.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.australiapos.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:relative;

}

#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:relative;

}

#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:underline;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

TOP INFORMATION

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#top-information {

height:4.5em;

margin-left:auto;

margin-right:auto;

margin-bottom:3px;

color:#999999;

font-size:.85em;

position:relative;

width:760px;

}

#logo {

position:absolute;

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:absolute;

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:absolute;

top:0;

left:75%;

height:100%;

padding:0 0 0 2%;

}

#top-information-link {

text-align: center;

border-left:1px dashed #CACACA;

position:absolute;

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:#608fc8 url(../../images/bg-nav.png) no-repeat;

margin-left:auto;

margin-right:auto;

width:740px;

padding:.8em 0 1em 20px;

position:relative;

font-weight:bold;

}

#nav-main div {

background:#4b6cb5 url(../../images/bg-nav-side.png) top right no-repeat;

width:25%;

position:absolute;

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:underline;

}

#nav-main a:active {

color:#FFFFFF;

}

#nav-main li.current a:link,

#nav-main li.current a:visited {

text-decoration:underline;

}

#nav-main li.current a:hover {

color:#D4E7F8;

text-decoration:underline;

}

#nav-main li.current a:active {

color:#FFFFFF;

}

/* ACTIVE PAGES */

#nav-main a.StaticSelectedStyle:link,

#nav-main a.StaticSelectedStyle:visited {

color:#D4E7F8;

text-decoration:underline;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

POSTER PHOTO

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#poster-photo-container {

margin-top:3px;

margin-left:auto;

margin-right:auto;

width:760px;

background:#608fc8;

position:relative;

}

.poster-photo-image {

border-right:3px solid #FFF;

display:block;

}

#feature-area-home {

position:absolute;

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:underline;

}

#feature-area-home a:hover {

text-decoration:none;

}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*

pagetitle

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~*/

#pagetitle {

margin-top:2px;

margin-left:auto;

margin-right:auto;

width:720px;

background:#608fc8;

position:relative;

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

{

}

.ParentNodeStyle

{

background:yellow;

}

a.SelectedNodeStyle

{

background:#E5E5E5;

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:#d9d9d9 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:#608fc8 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:relative;

color:#a9c0db;

font-size:.8em;

}

#footer div {

background:#4b6cb5 url(../../images/bg-nav-side.png) bottom right
no-repeat;

width:25%;

position:absolute;

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:relative;

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:underline;

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:relative; in the #footer definition.

Alexey
Nov 17 '08 #3

P: n/a
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

Nov 21 '08 #4

This discussion thread is closed

Replies have been disabled for this discussion.