Problems with CSS in Mozilla 1.6 [Theme design questions]

1

Problems with CSS in Mozilla 1.6

2004/2/5 14:52
Ace_Armstrong
Quite a regular
Posts: 226
Since: 2003/1/9 3

I'm having toruble getting a theme I designed to implement the CSS properly using Mozilla.

Specifically, I have a separate style set up for the left block. While the rest of the page is white with black text, I want the left block (which is on a coloured background) to have white text with links that shift to grey when you hover over them. This work great in IE, but Mozilla seems to be reading the default "a" and "a:hover" setting at the top of the file and not recognizing the ".LeftblockContent a" and ".LeftblockContent a:hover" styles I have set up.

Here's the entire CSS file:

Quote:

// table { width: 100%; margin: 5; padding: 5; font-size: small}
// table td { padding: 0; border-width: 0; vertical-align: top; font-family: Tahoma, Arial, Helvetica, sans-serif;}
div#content { padding: 5px; text-align: left;}
div#content td { padding: 3px;}

body { font-family: Arial, sanserif; font-size: 11px;}
body a { font-family: Arial, sanserif; font-size: 11px; text-decoration: none; color: #000080; font-style: normal}
body a:hover { text-decoration: overline underline; font-family: Arial, sanserif; font-size: 11px; color: #0000C0; font-style: normal}
// td { font-family: Arial, sanserif; color: #000000; font-size: 12px;border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px;}
input {color : #000000; font-family : Arial, sanserif, Verdana, Arial, Helvetica, sans-serif; font-size : 11px; font-weight : normal;border-color : #000000; border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px;text-indent : 2px; }
textarea {font-family: Arial, sanserif, Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-weight : bold; border-color : #000000; border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px; text-indent : 2px;}
select {font-family: Arial, sanserif, Verdana, Arial, Helvetica, sans-serif; font-size: 11px;font-weight : bold;background-color:#ececec; }
img { border: 0;}
ul { margin: 2px; padding: 2px; list-style: decimal inside; text-align: left;}
li { margin-left: 2px; list-style: disc inside;}

.odd { background-color: #ececec;}
.outer { background-color: #CCCCCC;}
.even { background-color: #E4E5EB;}
th { background-color: #e0e0e0; text-align: left; padding: 3px;}
.head { background-color: #ececec; padding: 3px;}
.foot { background-color: #c0c0c0; padding: 3px;}

.comTitle {font-weight: bold; margin-bottom: 2px;}
.comText {padding: 2px;}
.comUserStat {font-size: 10px; color: #333333; font-weight:bold; border: 1px solid #cccccc; background-color: #000000; margin: 2px; padding: 2px;}
.comUserStatCaption {font-weight: normal;}
.comUserStatus {margin-left: 2px; margin-top: 10px; color: #333333; font-weight:bold; font-size: 10px;}
.comUserRank {margin: 2px;}
.comUserRankText {font-size: 10px;font-weight:bold;}
.comUserRankImg {border: 0;}
.comUserName {}
.comUserImg {margin: 2px;}
.comDate {font-weight: normal; font-style: italic; font-size: smaller}
.comDateCaption {font-weight: bold; font-style: normal;}

.item {border: 1px solid #c0c0c0;}
.itemHead {background-color: #)000C0); background-repeat: repeat-x;; color: #000000; padding: 2px; font-weight: bold; text-align: left;}
.itemInfo {text-align: right; padding: 3px; background-color: #efefef}
.itemTitle a {font-size: 100%; font-weight: bold; font-variant: small-caps; color: #0000ff; background-color: transparent;}
.itemPoster {font-size: 90%; font-style:italic;}
.itemPostDate {font-size: 90%; font-style:italic;}
.itemStats {font-size: 90%; font-style:italic;}
.itemBody {padding-left: 5px; text-align: left}
.itemText {margin-top: 5px; margin-bottom: 5px; line-height: 1.5em; color: #000000;}
.itemText:first-letter {font-size: 100%; font-weight: bold; color: #000000;}
.itemFoot {text-align: right; padding: 3px;)
.itemAdminLink {font-size: 90%;}
.itemPermaLink {font-size: 90%;}

.blockTitle {font-family: Impact; Arial, sanserif, Verdana, Arial, Helvetica, sans-serif; background-color: #0000C0); background-repeat: repeat-x; color: #000080; padding: 2px; font-weight: normal}
.blockContent {background-color: #FFFFFF; padding: 2px; font-color: #000000; font-family: Arial, sanserif, Verdana, Helvetica, sans-serif; font-size: 11px;}
.LeftblockTitle {font-family: Impact; Arial, sanserif, Verdana, Arial, Helvetica, sans-serif; background-color: #0041CD; font-variant: small-caps; padding: 2px; font-weight: normal; color: #CDFFFF; font-size: 14px;}
.LeftblockContent {color: #000000; font-size: 11px; padding: 2px; font-weight: bold;}
.LeftblockContent a {font-family: Arial, sanserif, Verdana, Helvetica, sans-serif; font-size: 11px; font-weight: bold; color: #FFFFFF; background-color: transparent;}
.LeftblockContent a:hover {font-size: 11px; font-weight: bold; color: #C4BCC9; background-color: transparent;}

.SpotlightContent { font-family: Arial, sanserif; font-size: 11px;}

.logorow {background-color: transparents);}
// .footertile {background-image: url(images/footertile.gif); background-repeat: repeat-x;}

Note that this is basically the IE styleset, so I'm sure the problem is that I'm screwing up a Mozilla-specific syntax somewhere. Any ideas?

(Thanks in advance!)

2

Re: Problems with CSS in Mozilla 1.6

2004/2/5 15:12
ackbarr
Posts: 1449
Since: 2002/10/2

my recommendation is to use the Mozilla DOM Inspector (Tools -> Web Development -> DOM Inspector) to see why your page is ignoring those styles. If unfamiliar with using the DOM Inspector try the links below:

Introduction to the DOM Inspector (brownhen.com)
Using Mozilla for Testing and Debugging Sites (gemal.dk)

The second link covers many of the web development tools available within the Mozilla suite.

3

Re: Problems with CSS in Mozilla 1.6

2004/2/5 15:24
Ace_Armstrong
Quite a regular
Posts: 226
Since: 2003/1/9 3

Quote:

ackbarr wrote:
my recommendation is to use the Mozilla DOM Inspector (Tools -> Web Development -> DOM Inspector) to see why your page is ignoring those styles. If unfamiliar with using the DOM Inspector try the links below:

Introduction to the DOM Inspector (brownhen.com)
Using Mozilla for Testing and Debugging Sites (gemal.dk)

The second link covers many of the web development tools available within the Mozilla suite.

Yeah, I did that, but all it did was tell me that Mo isn't recognizing my styles...which I already knew. What I am cracking my skull over is the "why" portion.

4

Re: Problems with CSS in Mozilla 1.6

2004/2/5 15:39
ackbarr
Posts: 1449
Since: 2002/10/2

well - the next step in determining the problem would be to validate your css to see if there are any parse errors. IE is usually more forgiving of syntax errors in your stylesheet. I took the liberty of validating your CSS using the W3C validator.

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fackbarr.greatweb.com%2Fvalidate%2Farmstrong.css&warning=1&profile=css2&usermedium=all

A couple things jump out:
1. I don't think single line comments are allowed in CSS try using /* and */ around your commented lines
2. It doesn't have any complaint with the styles in question

If fixing the validation errors doesn't do the trick, double check the selector. Selectors are supposed to be case sensitive so make sure the class "LeftblockContent" is used properly.

And if all else fails, send me a copy of the theme html files (or a link to the site) and I'll try to help debug it with you.

5

Re: Problems with CSS in Mozilla 1.6

2004/2/5 15:53
Ace_Armstrong
Quite a regular
Posts: 226
Since: 2003/1/9 3

Quote:

ackbarr wrote:
well - the next step in determining the problem would be to validate your css to see if there are any parse errors. IE is usually more forgiving of syntax errors in your stylesheet.

That's what I'm assuming is going on, but da**ed if I can figure out what it is, exactly.

Quote:

I took the liberty of validating your CSS using the W3C validator.

You rock!

[/quote]
A couple things jump out:
1. I don't think single line comments are allowed in CSS try using /* and */ around your commented lines
[/quote]

I fixed that and it had not effect. *sigh*

Quote:

2. It doesn't have any complaint with the styles in question

Hence the level of my consternation!

Quote:

If fixing the validation errors doesn't do the trick, double check the selector. Selectors are supposed to be case sensitive so make sure the class "LeftblockContent" is used properly.

Yeah, that was the first thing I looked at.

Quote:

And if all else fails, send me a copy of the theme html files (or a link to the site) and I'll try to help debug it with you.

You are a godsend!

The URL is http://www.twilightmd.com/InteractiveDemo

I don't have your email, or I'd send ya the theme files to check out yourself.

Thanks again. You're awesome!

6

Re: Problems with CSS in Mozilla 1.6

2004/2/5 16:47
ackbarr
Posts: 1449
Since: 2002/10/2

I've loaded your theme up at my website:

http://ackbarr.greatweb.com/

a modified style is available at http://ackbarr.greatweb.com/xoops2/themes/EC/styleNN.css

basically all I did was fix all of the css validation errors in the file. Unfortunately, I don't know which one fixed the problem in particular.

7

Re: Problems with CSS in Mozilla 1.6

2004/2/5 17:00
Ace_Armstrong
Quite a regular
Posts: 226
Since: 2003/1/9 3

Ackbarr, you are, as always, my hero. (You and Catzwolf, that is!) Thanks!

Of course, now my FTP server is acting up so I can't upload, but I'll get to it eventually. Thanks again!

Stats
Goal:	$100.00
Due Date:	Nov 30
Gross Amount:	$0.00
Net Balance:	$0.00
Left to go:	$100.00

Problems with CSS in Mozilla 1.6

Re: Problems with CSS in Mozilla 1.6

Re: Problems with CSS in Mozilla 1.6

Re: Problems with CSS in Mozilla 1.6

Re: Problems with CSS in Mozilla 1.6

Re: Problems with CSS in Mozilla 1.6

Re: Problems with CSS in Mozilla 1.6

Login

Search

Recent Posts

XOOPS MyMenus 1.54.0 Beta 10

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Re: XOOPS MyMenus 1.54.0 Beta 7

Who's Online

Donat-O-Meter

Latest GitHub Commits

{{ record.sha.slice(0, 7) }} - {{ record.commit.message | truncate }}