CSS and Firefox questions

[Spinaker]

Hey everyone. I have 2 questions.

1 - Has anyone experience problems with CSS and background images not appearing in Firefox? I have a CSS files which works fine in Internet Explorer however when the same page is viewed in Firefox all the background images do not appear and the text is not formatted properly....basically Firefox doesn't recognize the CSS file. I'm lost as to why this is happening. The CSS files has been stripped of all comments as commenting style was a suggested cause of the problem so I removed them. Still no luck. Any ideas?

2 - There used to be a CSS validator on this site. Is it still available on this evrsoft.com?

Any help would be appreciated greatly.

Spinaker

[DCElliott]

A code example or link to an example??

DE

[chance57]

In some cases, you can add these tags and it will solve your problem. These tags allow for different Browsers to display your pages correctly.

Tag Attribute Comment

<TABLE bgcolor =""> Allow Background color for tables
<TD bgcolor="" > Allow a table cell to have a background color
<TR bgcolor=""> Allow a table cell to have a background Row
<FONT face=""> Sets the type face for text

What this means is assign these tags to your Tables, Table Data, and Table Rows, and they will display correctly. Don't forget to assign the Font tags also.

As for your second question, I'm not sure. I'm new to the Forum also.welcome ! :smack:
Let me know if this solves the problem. :crazy:

[Spinaker]

I posted this yesterday...found the answer today and fixed the problem thanks to a guy in Finland who had the same problem and posted on a different BB/Forum. The problem was CSS validation. Firefox renders only valid CSS files. IE is able to show colored scrollbars without a problem and still read the entire CSS file correctly, however Firefox will not allow for colored scrollbars - at least not that I know of. I ran my CSS file though W3C CSS Validator and it failed horribly. Once I removed the scrollbar colors and fixed a few mistakes with using the wrong brackets my accident, my text and backgrounds now appear (Still some bugs but I can figure that out I hope) Thanks to all who gave suggestions. Here is the site - www.hgmh.on.ca . As you can see no problems in IE, still some bugs in Firefox, but at least its an improvement. Thanks again ppl

[Terminator1138]

For validator, go to w3c site...they have all the validators you need. or you can use FFox extension also..

[Tarmithius]

The very first thing I noticed from the source on your site is you have no doctype. That one important piece of information is what tells the browser how to interpret the code.

That is just the beginning. Once you have the doctype then you can validate properly and see what you have to fix.

[Terminator1138]

There is really not a problem in FFox since FF uses standards only and IE runs in quirks. If you run standards all the way, your site will display just fine as its intended in IE and FF and I'm sure in Opera also. I noticed you posted at same time so I did not get a change to check the source coding. Good luck with the site.

[Spinaker]

Thats a good point to. I always delete the doctype info that comes in a new template file when using 1st Page. I never new what this code did and removing it didn't ever effect my pages while using IE and it made the code look a bit cleaner. Now I feel foolish. I'm gonna have to add it back to a few dozen pages :(

[pavelka]

hi all,

i have problem with css + firefox ... plzzz help

if i first time open page where i have navigation menu ... navigation menu is broken displaying ... but if i reload [CTRL+R] this page again ... error disappear and all is OK.

at IE and Opera i dont have this error ... everything is ok, this error show only in firefox.


can u help me ?


peter p.

[sorry for my english]


[Administrator's note: Code formatted to make it easier to read]
piece of css code:

.menuEnvelope {
height: 38px;
padding-left: 167px;
}
.menuEnvelope .menuLev1 {
display: block;
float: left;
padding: 16px 10px 7px 10px;
}
.menuEnvelope .menuLev1ON {
display: block;
float: left;
padding: 16px 10px 7px 10px;
border-left: 1px solid #fff;
background: #9dbcd3;
}
.menuEnvelope a.menuLev1a {
font-family: Verdana, Tahoma, Arial, Sans-Serif;
font-size: 15px;
font-weight: bold;
color: #fff;
}
.menuEnvelope a:link.menuLev1a {
text-decoration: none;
}
.menuEnvelope a:active.menuLev1a { }
.menuEnvelope a:visited.menuLev1a { }
.menuEnvelope a:hover.menuLev1a {
text-decoration: none;
background-color: #ff0000;
}


<div class="menuEnvelope">
<a title="item1" href="#" onClick="javascript:location='#" class="menuLev1a">
<div class="menuLev1" onMouseOver="this.style.cursor='hand';
self.status='#';return(true);" onMouseOut="self.status='';">ITEM 1
</div>
</a>
<a title="item2" href="#" onClick="javascript:location='#" class="menuLev1a">
<div class="menuLev1" onMouseOver="this.style.cursor='hand';
self.status='#';return(true);" onMouseOut="self.status='';">ITEM 2
</div>
</a>
<a title="item1" href="#" onClick="javascript:location='#" class="menuLev1a">
<div class="menuLev1" onMouseOver="this.style.cursor='hand';
self.status='#';return(true);" onMouseOut="self.status='';">ITEM 1
</div>
</a>
</div>

:smack:

[DCElliott]

Is it a javascript error you are getting or a display error. Despite language difficulties you have to be precise in what you are asking. As a general rule you should develop in firefox and then fix up your code for other browsers.

DE

[pavelka]

this is my problem ... http://magorina.szm.sk/ ... if i reload this page everything is ok ... this error shows only in firefox :smack: