Forum Moderators: not2easy

Message Too Old, No Replies

Serious NS mess with CSS + DIVS

My forum works in IE 6, Opera 7.11 - but awful in NS 6

         

DEfusion

10:23 pm on Jun 25, 2003 (gmt 0)

10+ Year Member



Message in process of editing...

[edited by: DEfusion at 10:40 pm (utc) on June 25, 2003]

BlobFisk

10:38 pm on Jun 25, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, DEfusion!

Posting links to personal URL's is against the Terms of Service [webmasterworld.com] or WebmasterWorld. I'd urge you to remove it before a mod/admin comes along and does it anyway!

Maybe the best way to approach this is to describe the differences you're seeing, and what elements you think are causing the problem.

That way we can help to narrow down the possibilities and begin to suggest solutions.

DEfusion

10:50 pm on Jun 25, 2003 (gmt 0)

10+ Year Member



How am I supposed to describe it to you then, it would be so much easier for people to actually see the code I'm having problems with and the actual problem as its the most strange problem I've come across with CSS.

I wasn't posting the links for any self promotion or anything like that its just without seeing it, or at least screenshots of my results and snippets of the code.

But not knowing whats wrong I can't even hazard a guess as to what to describe to you.

Ok its a forum, like this forums main page, the layout is similar, all using divs and a few spans. The divs are layed out like this:

LINKS (new topic etc) - float left
INFO (page number etc) - float right

TITLE - width 98%
POSTED - float left - width set etc.
TOPIC - float left - width set etc.
VIEWS - float left - width set etc.
REPLIES - float left - width set etc.
LAST REPLY - float left - width set etc.

FORUMBODY - width 98%
ROWTYPE (alternates colour)
POSTED - as above
TOPIC - as above
VIEWS - as above
REPLIES - as above
LAST REPLY - as above

It all looks like you'd expect (although you can't tell much from my description) a forum to in IE and Opera, but in Netscape everything is all over the place, the different ROWTYPES are very thin and at the top of the window.

That's the best I can describe this mess.

-D

DrDoc

12:38 am on Jun 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmaster World!

Which doctype are you using?
And, when you say "NS6", which version do you mean? Some of the NS6 releases were hopelessly buggy!
Have you tried the page in Mozilla or NS7?
Also, can you post a brief excerpt of the CSS used to style the page?

BlobFisk

9:44 am on Jun 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Have you run your CSS and HTML through the W3C validators? This sometimes flags errors that can easily be missed with a manual check.

DEfusion

10:07 am on Jun 26, 2003 (gmt 0)

10+ Year Member



It's NS 6.01 I have almost everything sorted in it now I did this by inserting a few spacer divs (with clear: both; set)
after the first two divs, after the title div, before each new row and finally before the forum navigation bar (added since start post).

I've run all the CSS and HTML (output from PHP) through W3C's validators and they are both perfect, nothing wrong at all.

The main problem I'm having with NS now is:

The alternating rows (set by ROWTYPE) background colour is only one line high, even though the row content is at least 2 or 3 lines high.

heres the CSS for them:

.f-row-type1 {
width: 100%;
padding-top: 4px; padding-bottom: 4px;
border-bottom: thin dashed #CCCCCC;
background-color: #FCFCFC;
}

any help?

-D

BlobFisk

10:28 am on Jun 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Do you have any margins set on the <p>aragraph text within the ROWTYPE div? Also, on these <p>'s is there any background colour set?

DEfusion

11:44 am on Jun 26, 2003 (gmt 0)

10+ Year Member



There are no <p> tags at all, is that the problem? inside each div should I have a <p> - won't that cause paragraph space to be put before and after each <p> tag though, which I don't want.

-D

DrDoc

9:21 pm on Jun 26, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You're also recommended not to use hyphens for your id or class names. Use underscore, or stick to only letters and numbers.

DEfusion

12:58 pm on Jun 27, 2003 (gmt 0)

10+ Year Member



I've got it all working now to my satisfaction by playing around with the code and stuff.

But I thought I'd just give you this quote from the complete css guide [westciv.com]:

Note that a class name should comprise only alpha numeric characters, and hyphens. They cannot include underscores and other characters, nor spaces. A class cannot begin with a numeral.

-D

drbrain

3:58 pm on Jun 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



A CSS2 class name can begin with a '-' and just about any other character, provided you escape it in the selector.

Nothing in the grammar of CSS2 prevents you from using any old character in a class name, provided you have it in unicode form. (Well, except for the definition of the ~= attribute selector that matches "a space-separated list".)

Hrm, this could be a novel way of distinguishing between IE6 and other browsers that support the complete CSS2 grammar.

These work in Gecko and IE6:

p { color: red }
.\--- { color: green }
.\e { color: green }
.\f { color: green }
.\30 { color: green }
.\5f { color: green }

<p class="---">This text should be green
<p class="^N">This text should be green
<p class="^O">This text should be green
<p class="0">This text should be green
<p class="_">This text should be green

Gecko additionally supports .\b and .\c as selectors.

Can anybody tell me what this does on browsers other than IE6 and Gecko (it works on both of these):

.\31 x { color: green }
<p class="1x">This text should be green

DrDoc

10:13 pm on Jun 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Then I guess it's underscore you're supposed to avoid ;)

Got those mixed up. Sorry 'bout that.
Personally, I only use letters and numbers...

drbrain

10:47 pm on Jun 27, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yeah, sometimes I scare myself.

I really scared myself when I saw you could put in crazy stuff like a ^N in a selector and have it work.

Several browsers support using a bare underscore in the selector (its valid in the HTML) even though it must be unicode escaped.

I must remember this for my examples, thanks for bringing it up!