CSS problem in Firefox

[Steve]

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;

}

 

[Allen Chen [MSFT]]

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

 

[Steve]

Hi Allen

I still need help with this problem

The web runs OK with IE6 / 7 but several pages don't render properly with
Firefox
etc

If you have firefox you will see what I mean at www.australiapos.com.au
Main page, Resellers and contacts pages

I have no idea why they don't render in firefox and assumed it was because
of the css which have float: parameters

I reply from a post several days ago from Alexey indicated that the
pages were using a jpg as the background when it wasn't required but I am
unsure how to resolve this


Regards
Steve

 

[Allen Chen [MSFT]]

Hi Steve,

Please remove the float:left and float:right from the CSS File. Namely use
following one instead:

#content-main-two-column {
width:540px;

}

#content-side-two-column {

width:160px;
}

You can refer to:

http://webjournl.wordpress.com/2007/03/15/css-float-property-not-working-in-
firefox-or-is-it/
to learn how to use float.

BTW, sometimes we can use two different CSS files to support different
browsers. You can try following way to do so.
In aspx:

Replace this line:

<link href="App_Themes/Standard/css-content.css" rel="stylesheet"
type="text/css" media="interactive, braille, emboss, handheld, projection,
screen, tty, tv" />
With:
<link href=<%=GetCSSFile() %> rel="stylesheet" type="text/css"
media="interactive, braille, emboss, handheld, projection, screen, tty, tv"
/>

In aspx.cs:

protected string GetCSSFile()
{
if (Request.Browser.Browser == "IE")
{
return "App_Themes/Standard/css-content.css";
}
else //Other browsers
{
return "App_Themes/Standard/cssforotherbrowsers.css";
}
}

Please try it to see if it works and let me know if you have any further
questions.

Regards,
Allen Chen
Microsoft Online Community Support

Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can

improve the support we provide to you. Please feel free to let my manager
know what you think of the

level of service provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-

us/subscriptions/aa948868.aspx#notifications.

Note: MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from

the community or a Microsoft Support Engineer within 2 business day is
acceptable. Please note that each

follow up response may take approximately 2 business days as the support
professional working with you

may need further investigation to reach the most efficient resolution. The
offering is not appropriate

for situations that require urgent, real-time or phone-based interactions.
Issues of this nature are

best handled working with a dedicated Microsoft Support Engineer by
contacting Microsoft Customer

Support Services (CSS) at
http://msdn.microsoft.com/en-us/subscriptions/aa948874.aspx
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

 

[gerry]

Way to complicated considering this functionality ( adaptive rendering ) is
built in to ASP.NET since 2.0 !
Try this for browser specific style sheets :

<link id="Link1" runat="server" rel="stylesheet" type="text/css"
href="def.css"
ie:href="ie.css"
mozilla:href="moz.css"
/>