site layout is awful in FF/Opera, but not in IE (using CSS)

D

Dano

Hi,

I've rebuilt my site, having it changed from frames to floating CSS-layout
and SSI. But is seems that the layout looks OK in IE, but not good in
FF/Opera.
Can someone give me some clues how to fix this?

link: http://www.ltvborgharen.nl
(dutch site about tennis)

Thanks,
Dan
 
D

Dano

How about using tables? These should render more reliably on both IE and
FF.

Do you mean using tables for lay-out purposes? I was just trying to get rid
of them!
Isn't there a way FF renders the CSS correctly? (I know it's the other way
around) But what things am I doing wrong regarding the float-element or
width-set etc... ?

regards
Dan
 
S

Spartanicus

Dano said:
I've rebuilt my site, having it changed from frames to floating CSS-layout
and SSI. But is seems that the layout looks OK in IE, but not good in
FF/Opera.

Use a proper browser during the creation, only check in IE when finished
and make changes so that it also works in that.
Can someone give me some clues how to fix this?

link: http://www.ltvborgharen.nl
(dutch site about tennis)

Before attempting to fix display issues you should first improve other
things:

1) Mark up the nav links as an unordered list, specify the bullet images
with css (not include them in the html).
2) Best avoid having the word "banner" in the name of the logo image as
ad filter software may filter it out (did for me initially).
3) The graphic logo contains the text "Lawn Tennisvereniging Borgharen",
so this should also be the alt content for the image, not "Logo van
LTV". Btw, Tennis vereniging are 2 words, not one.
4) The logo image is your level 1 header, so mark it up as such.
5) For consistency your page title should also be "Lawn Tennis
vereniging Borgharen".
6) Don't use inline styles, externalize it.
7) Floating and relatively positioning an element may work, but it's
something that doesn't fit the positioning schemes as laid out in the
specification, it defines 3 positioning models that are best kept
exclusive. If you need to shift a floated element somewhat you should
use margins (can be negative).
8) Don't use  s, use css margins or padding.
 
B

Beauregard T. Shagnasty

No tables, please. Tables for layout are no more reliable in modern
browsers than any well-done CSS layout, and far more accessible for
non-graphical browsers and search engines.
Do you mean using tables for lay-out purposes? I was just trying to
get rid of them!

And you are just about finished. said:
Isn't there a way FF renders the CSS correctly? (I know it's the
other way around) But what things am I doing wrong regarding the
float-element or width-set etc... ?

I though I remembered seeing a reply to one of your posts on how to
fix that.

You need to change the CSS for the #content box, removing the float:
right, and changing the margin-left to something about 15em or so. The
#nav box should also have its width set in ems, so it will float in
width if a visitor is using large fonts. Make the nav around the same
15em in width, instead of the px setting. With both set at 15, their
edges should meet, so you might want to adjust by an em or two.
 
D

Dano

And you are just about finished. <g>

Yeah, I know there are still some (ugly) tables in it. But when is it OK to
use tables?
I see it a lot in FORM's (eg:
http://www.ltvborgharen.nl/contactformulier.shtml), is it "allowed" then?
I though I remembered seeing a reply to one of your posts on how to fix
that.

You need to change the CSS for the #content box, removing the float:
right, and changing the margin-left to something about 15em or so. The
#nav box should also have its width set in ems, so it will float in width
if a visitor is using large fonts. Make the nav around the same 15em in
width, instead of the px setting. With both set at 15, their edges should
meet, so you might want to adjust by an em or two.

Yep, that's the one!! I missed: "removing float:right".

Thanks
Dan
 
D

Dano

Before attempting to fix display issues you should first improve other
things:

1) Mark up the nav links as an unordered list, specify the bullet images
with css (not include them in the html).
2) Best avoid having the word "banner" in the name of the logo image as
ad filter software may filter it out (did for me initially).

Hmm, didn't know that. I'll change the naming.
3) The graphic logo contains the text "Lawn Tennisvereniging Borgharen",
so this should also be the alt content for the image, not "Logo van
LTV". Btw, Tennis vereniging are 2 words, not one.
Done

4) The logo image is your level 1 header, so mark it up as such.
5) For consistency your page title should also be "Lawn Tennis
vereniging Borgharen".

We'll, the shortname is commonly used. The long name only once (for
explanation purposes)
6) Don't use inline styles, externalize it.
7) Floating and relatively positioning an element may work, but it's
something that doesn't fit the positioning schemes as laid out in the
specification, it defines 3 positioning models that are best kept
exclusive. If you need to shift a floated element somewhat you should
use margins (can be negative).

I don't understand what you mean? I thought floating was good?
8) Don't use &nbsp;s, use css margins or padding.

thanks for the comments; I will work on it

regards
Dan
 
K

kchayka

Beauregard said:
You need to change the CSS for the #content box, removing the float:
right, and changing the margin-left to something about 15em or so.
Make the nav around the same 15em in width

Right idea, but 15em is too wide. At my larger-than-average text size,
it takes almost half the window, with a bunch of empty space between the
navbar text and the content. 10em is probably more than sufficient.
 
B

Beauregard T. Shagnasty

Dano said:
Yeah, I know there are still some (ugly) tables in it. But when is
it OK to use tables?

When you have .. tabular data. A bus schedule ... a table of coming
events ...
I see it a lot in FORM's (eg:
http://www.ltvborgharen.nl/contactformulier.shtml), is it "allowed"
then?

I wouldn't quibble if you used a table to line up form labels and
fields. They could be interpreted as "relational data".

kchayka pointed out that 15em is too wide for your menu; I agree. Try
changing it to 10 or 11em... (don't know why I thought of 15 when I
posted last <g>) Mine are mostly 10 or 11.
http://www.countryrode.com/
 
K

kchayka

Spartanicus said:
7) Floating and relatively positioning an element may work, but it's
something that doesn't fit the positioning schemes as laid out in the
specification, it defines 3 positioning models that are best kept
exclusive.

I agree that floats and relative positioning should be mutually
exclusive, but the exception is probably when dealing with WinIE bugs.

Adding position:relative to a floated element is a common way of
overcoming such atrocities as the peek-a-boo bug, though it needs extra
testing to ensure other browsers aren't negatively affected by it.
 
D

Dano

Beauregard T. Shagnasty said:
When you have .. tabular data. A bus schedule ... a table of coming
events ...


I wouldn't quibble if you used a table to line up form labels and fields.
They could be interpreted as "relational data".

kchayka pointed out that 15em is too wide for your menu; I agree. Try
changing it to 10 or 11em... (don't know why I thought of 15 when I posted
last <g>) Mine are mostly 10 or 11.
http://www.countryrode.com/

I noticed :) I've changed the #nav to 10em with #content to 12em and it
fits about fine.

I do notice that the tables that I use have a strange habit of putting an
empty space at the top. The text beneath is starting below the end of the
navigation-tree: http://www.ltvborgharen.nl/kalender2005.shtml. Any ideas
how this happened?

Dan
 
M

Mark Parnell

Previously in alt.html, Dano <[email protected]> said:

[Please attribute quoted text - corrected this time]
Spartanicus said:

I don't understand what you mean? I thought floating was good?

There's nothing wrong with using floats. There's also nothing wrong with
using relative positioning. Using both on the same element is what
Spartanicus is warning against.
 
B

Beauregard T. Shagnasty

Dano said:
I do notice that the tables that I use have a strange habit of
putting an empty space at the top. The text beneath is starting
below the end of the navigation-tree:
http://www.ltvborgharen.nl/kalender2005.shtml. Any ideas how this
happened?

Assume you mean the "Kalender 2005" does not line up vertically with
the "Home" link. Might be the default padding/margin on the <h2>.

Oh wait. You're talking about IE. Yes, there is a huge gap between the
<h2> and the top of the table. This does not show in Firefox. Try
removing all the widths from the HTML of the cells, and just use
td { padding: 0 0.5em 0 0 } instead.

These are errors. Visit http://validator.w3.org/
For example:
Line 39, column 14: there is no attribute "WIDTH"
<td width="150" > ...

There is an errant (misplaced) <br/> after the table.

I would use <th> for the column headings.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,733
Messages
2,569,439
Members
44,829
Latest member
PIXThurman

Latest Threads

Top