Layout messes up in NS/Mozilla

[Saj]

Hi this (http://host.deluxnetwork.com/~smscript/1256.html) page of mine adds spaces in the layout in NS 7 and Mozilla 1.3. I have only recently started trying to keep pages cross-browser compatable, so I don't have much experience in it yet.

The css file is here (http://host.deluxnetwork.com/~smscript/main.css).

Thanks

[HairyTeeth]

If you've developed your pages primarily in IE, you may need to look at the DOCTYPE you are using, which can effect the 'box model' (i.e. width, height, padding, margins etc of elements). I can't access your page for some reason, so im not sure if it is doctype related. Good info anyway.

Find about about the doctype switch (http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp) in IE

[HairyTeeth]

re your CSS, it validates (http://jigsaw.w3.org/css-validator/validator?uri=http://host.deluxnetwork.com/~smscript/main.css) , which is always a good first step.
:)

[Saj]

Yes I made sure of that. That's pretty much why I made this...to test out xhtml and css and trying to make them valid :). Ive only recently started in css.

However, now its wierd in IE...I'll try and fix it first...

[Saj]

Ok try this page:

http://host.deluxnetwork.com/~smscript/index.html

[Saj]

OK...this is really annoying me now.

Here are the files if you can't access them from the web.....they work fine on my system, but completely mess up online.

Help Please!!

[Alex Vincent]

Saj: maybe that's part of the problem. Mozilla relies a little bit on MIME types to determine what to do with a file.

[HairyTeeth]

I've had a look at the *.zip file and accessed the site online with both IE5.0 and Moz1.0.

Honestly, i think you've just run into the realities of cross-browser webpage design. You won't get it exactly the same in each browser (if you want to retain your sanity and have a life :) ).

I think both page views are perfectly acceptable (at least in those two browsers), even though the overlap of some elements varies. If your happy with the design in IE, then you have roughly 80% (based on stats from my site) of your visitors getting the view you intended. The rest won't even know the difference.

The only thing I would suggest is:
1. Remove the non-breaking-spaces in <p class=content"> and adjust using padding in spans (if you want an indent) or the paragraph itself.

2. Try, over time, to reduce your use of tables.
http://www.alistapart.com/stories/journey/

http://www.alistapart.com/stories/index.html

Other than that, i don't think you've got much to worry about. It's a good clean design :thumbsup: Web design, for me at least, is about building flexible page designs that balance user and user agent needs (and getting a good nights sleep
;) )

[Saj]

Ok.

In Mozilla for me, wherever I have text in the main content area, the right side background is cut off. That was my problem there.

Also, I've been looking for other alternatives to tables. Know any others rather than fieldset?

[cg9com]

:confused: fieldset is not a replacement for a table, in fact i thought (there i go again) that fieldset was for forms?

either way, the best solution to get far from a table based layout it to use CSS, and divisions <div></div>

[liorean]

There's many alternatives to tables, but nothing that provides the exact combination of features that tables does. Most of them provide one or the other feature that tables doesn't.

Relatively positioned layers, absolutely positioned layers; liquid, semi-liquid and fixed layouting; floats, z-indices, negative margins, etc. There's so many alternatives and so many quirks out there, you have to know what you want and chose methods based on that. Often you have to accept that you wont get exactly pixel-perfect design in all browsers, and iem - if you care about it - has a few really obscure and nasty bugs hidden deep inside it's rendering engine. Use moz and op7 for near-perfect representation of what the css should be interpreted as, use iew and nn4 for compatibility check, use nn3/mosaic/links combo for non-css/non-css-js/non-css-js-graphics rendering. Op4-6, iem and saf/kong are kinda better-than-iew-but-worse-than-moz css rendering browsers that usually get most things right.

[Saj]

Ok.

I meant fieldset can have somewhat the same apprearance of a table, and are sometimes useful for replacing them: news and forms for example.

[brothercake]

Originally posted by Saj
Ok.

I meant fieldset can have somewhat the same apprearance of a table, and are sometimes useful for replacing them: news and forms for example.
No, fieldsets never replace tables, they do completely different semantic jobs. Fieldset groups a set of form elements (or possible a set of links) while table represents tabular data.

[Saj]

Ok then, are there any other common replacements for tables rather than div?

[brothercake]

Well ... DIVs are not really replacements for tables - because they do different jobs - but I understand the sense you mean - an element which could be used for presentation instead of table.

Basically, no other element does what tables do. But DIVs are the fundamental unit of division in an XHTML/CSS page because a DIV implies no formatting at all, except for being a block.

To make a layout without using tables then DIVs are what you need.

[cg9com]

What he said :D

[HairyTeeth]

At the moment (and depending on the type of site: e-commerce, ngo...), I use a mixture of table and div. I often use table to define the broad structure then I use divs etc (with style) for the content.

[Mhtml]

Nowdays I'm using div as a substitute for lots of cells.. you know how you have lots of rows and cells of varying sizes to position stuff.. that's what I mean.

[Saj]

Ok, I see. I'll try to incorporate that into my work as well. Also, instead of posting another thread, Can you help me solve this problem?

I am trying to create a heading inside a table.

<table style="border: solid;">
<tr>
<td style="border: solid;">Blah</td>
</td>
</table>

How could I say, in css, to add a margin of about 20 pixels below the cell...below the border of the cell. the margin-bottom didn't work for me?

Thanks

[cg9com]

Did you say margin-bottom:20px; ?
You can also try padding-bottom:20px;

[Saj]

Yes, Actually I tried both...it adds the padding inside the cell...inside the border, and I want the margin outside, between two table rows.

[HairyTeeth]

Like this perhaps:

<table style="border: solid;" width="400">
<tr>
<td style="border: solid;">Blah</td>
</tr>
<tr>
<td style="border: none;">Blah</td>
</tr>
<tr>
<td style="border: solid;">Blah</td>
</tr>
</table>