Positioning Problem - IE good, Mozilla/Netscape bad!

SWE

Hi all,

I'm new to using style sheets for laying out my web pages. I have a
horizontal navigation menu that is split into two sections - three buttons
on the left and a submenu on the right that changes depending on which
button you select. The menu looks good in Internet Explorer 6, but in
Mozilla Firefox 0.8 and Netscape Navigator 7.1 the submenu positions itself
further down the page instead of right next to the buttons. I don't know how
to adequately explain the problem, so if anyone has the time to check it
out, please use the link below. Any thoughts as to what I'm doing wrong and
more specifically, how to fix it?

http://www.jlshapiro.com/test/

Thanks in advance for any help you may be able to provide.

Jul 20 '05 #1

Steve Pugh

"SWE" <me@privacy.net> wrote:

I'm new to using style sheets for laying out my web pages. I have a
horizontal navigation menu that is split into two sections - three buttons
on the left and a submenu on the right that changes depending on which
button you select. The menu looks good in Internet Explorer 6, but in
Mozilla Firefox 0.8 and Netscape Navigator 7.1 the submenu positions itself
further down the page instead of right next to the buttons. I don't know how
to adequately explain the problem, so if anyone has the time to check it
out, please use the link below. Any thoughts as to what I'm doing wrong and
more specifically, how to fix it?

http://www.jlshapiro.com/test/

The DOM Inspector is a great tool for debugging web pages, especially
if you're having problems with Mozilla.

The divs are positioned correctly, but then the content is moved
downwards because of teh default top margin on the <p> elements.
Either set margin-top: 0 for these or get rid of the altogether -
these aren't paragraphs so it's not really the best mark-up.

You need to think about how users who do not have JavaScript enabled
are going to use your site. And as ever validating your code would be
a good idea.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

Jul 20 '05 #2

Stephen Poley

On Fri, 2 Apr 2004 12:35:13 -0500, "SWE" <me@privacy.net> wrote:

I'm new to using style sheets for laying out my web pages. I have a
horizontal navigation menu that is split into two sections - three buttons
on the left and a submenu on the right that changes depending on which
button you select. The menu looks good in Internet Explorer 6, but in
Mozilla Firefox 0.8 and Netscape Navigator 7.1 the submenu positions itself
further down the page instead of right next to the buttons. I don't know how
to adequately explain the problem, so if anyone has the time to check it
out, please use the link below. Any thoughts as to what I'm doing wrong and
more specifically, how to fix it?

http://www.jlshapiro.com/test/

Well, you aren't really using style sheets for layout, are you? You're
using Javascript, with a bit of CSS as a fig-leaf. Both IE and Opera
just give me the three buttons on the left.

Usual advice (given here I don't know how many times per month): FIRST
validate your page and fix your mark-up errors; THEN if your problem
doesn't go away as a result come here for assistance.

And ask yourself how visitors without Javascript are going to navigate
your site.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

Jul 20 '05 #3

SWE

> The divs are positioned correctly, but then the content is moved

downwards because of teh default top margin on the <p> elements.
Either set margin-top: 0 for these or get rid of the altogether -
these aren't paragraphs so it's not really the best mark-up.

You're a life-saver, thanks so much for your feedback. I successfully tried
both your margin suggestion as well as removing the paragraph mark-up
(FrontPage did that without my consent!).

Jul 20 '05 #4

Neal

On Fri, 2 Apr 2004 13:21:13 -0500, SWE <me@privacy.net> wrote:

The divs are positioned correctly, but then the content is moved
downwards because of teh default top margin on the <p> elements.
Either set margin-top: 0 for these or get rid of the altogether -
these aren't paragraphs so it's not really the best mark-up.

You're a life-saver, thanks so much for your feedback. I successfully
tried
both your margin suggestion as well as removing the paragraph mark-up
(FrontPage did that without my consent!).

Two quick comments:

1) Whenever IE does something that no other browser does, it's IE getting
it wrong. I can't think of a single example of IE getting it right in
isolation.

2) Friends don't let friends use FrontPage. The only users who can produce
reasonably browser-independent pages with FrontPage are quite capable of
doing a better job by hand.

Jul 20 '05 #5

Alan J. Flavell

On Fri, 2 Apr 2004, Neal wrote:

1) Whenever IE does something that no other browser does, it's IE getting
it wrong. I can't think of a single example of IE getting it right in
isolation.
IE seems very good at guessing what misguided authors intended. It's
much worse at doing what the interworking specifications require it to
do.

Hence or otherwise deduce that in a WWW context it's better to start
by designing for the WWW, and then (for those who care about the
unthinking masses) downgrading the result (within the interworking
specifications) so that it doesn't upset the "industry standard" (i.e
WWW non-standard).
2) Friends don't let friends use FrontPage. The only users who can produce
reasonably browser-independent pages with FrontPage are quite capable of
doing a better job by hand.

Well said.

Jul 20 '05 #6

Colin McGarry

"SWE" <me@privacy.net> a écrit dans le message de news:
c4*************@ID-206398.news.uni-berlin.de...

Hi all,

I'm new to using style sheets for laying out my web pages. I have a
horizontal navigation menu that is split into two sections - three buttons
on the left and a submenu on the right that changes depending on which
button you select. The menu looks good in Internet Explorer 6, but in
Mozilla Firefox 0.8 and Netscape Navigator 7.1 the submenu positions itself further down the page instead of right next to the buttons. I don't know how to adequately explain the problem, so if anyone has the time to check it
out, please use the link below. Any thoughts as to what I'm doing wrong and more specifically, how to fix it?

http://www.jlshapiro.com/test/

Thanks in advance for any help you may be able to provide.

I couldn't see your page /test/ error 403
But your idex page has no doc type

add
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

as the first line then IE and Mozilla will do the same thiongs. Not
necessarily what you want but the same.

Jul 20 '05 #7