Mozilla, CSS, and banging my head against a wall...

Factual Questions
1

Next week, I’m getting access to the new network at work, which means I no longer have to use this ancient excuse for a browser, Netscape Navigator 4.7. Yes, I’m doing the happy dance.

Anyway, I decided to take the opportuntity to bring my site up to date, namely, ditching a lot of the PITA tables and old layout tags in favor of CSS.*

Check out this test page.

Looks fine in Opera 6 and IE5, but Mozilla 1.0, which I’ve been using as my Nutscrape replacement, screws up div spacing. Note the that the center column is all screwed up.

Any suggestions?
*Yeah, I should make it compatible with as many browsers as possible, blah blah blah, but frankly, I’m sick of worrying about Navigator 4. It’s easier to write pages for frickin Lynx.

2

MY SO says:



.main {
	border : 1px solid #ffffff;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight : normal;
	padding : 6px 6px 6px 6px;
	vertical-align : top;
	width : 100px;
	font-size : 10px;
	margin-top : 4px;

is the problem with the borders not lining up (or rather, this is the correction!) Mozilla shows what the code intends because you have width: 100% so the padding and border width overflows.

As a correction, you could specify the width to be in pixels instead. Also, remove the width of your table so that you don’t get a gap between the columns.

To override the middle column, you can specify the width in-line using the style attribute, right after the class in your div.

I see your email is public, so I’ll send you the source file that we worked on.

-mnemosyne who just had a geek moment :smiley:

3

Thanks mnem, but code you sent screws up the <div> widths in Opera and IE. I tried every combination of id’s and classes I could think of, and still no dice.

Looks like I’m going to have to learn about positioning… sigh…

For anybody else who’s interested, here’s a screenshot of the page looking screwed up in Mozilla:

http://neussubjex.net/mozilla_ss.png

Note that the center column is overlapping (or alternately, the left column is underlapping) for some reason.

I’d like 4px of spacing between each box, boxes to be of the same width within a column, and a 1px border. Column widths can be variable.

Mozilla is quickly becoming the new NN4 for me…

4

Except that Mozilla is the browser that comes closes to the CSS interpretation as the W3C propagates. :rolleyes:

I don’t have time at the moment but I’ll look into this problem this evening when I’m back home.

5

Looks kinda sloppy in iCab.

6

Although it did look better in IE with the code I sent, didn’t it? I looked at it really quickly, and although the “idiot box” width wasn’t right, the overlapping issue was corrected…it looked more bearable to read, at least :). I don’t have any more suggestions, though, and off-hand, neither did the SO (cuz any suggestion I have is really his :slight_smile: ). Good luck!

7

Actually when you take the width : 100% part entirely out of the main class it looks the same in IE6, Opera6 and Mozilla1.1b. Isn’t that the way it’s supposed to be? :confused:

On a side note: there is no height attribute for TABLE tags, so if you depend on the height you may use CSS for it instead.

8

I think I got it pretty much fixed… thanks everybody.

Oh, and LX… I spent about a half an hour messing with php and browser-specific stylesheets to get those columns positioned exactly right before I logged on to the SDMB today. Then I saw your post, thought “What the hell?”, and took out that width tag.

:smack: