Interactive button displays in wrong location

[BobBob]

I've learned a lot about absolute and relative positioning through some
recent posts. Thanks.

Here's a problem that I can't seem to figure out even with my newfound
knowledge. Check out www.drbova.com with Navigator or Mozilla. The row of
interactive buttons displays about 20 pixels south of where it displays in IE
and Opera. When I set the layer background to yellow so I could tell what
was goin on, it was clear that its the buttons, not the layer to which
they're assigned, that are displaying too low.

Also, there are three dropdown boxes attached to that menu that are supposed
to have rectangular drawing objects associated with them. I did this so that
the dropdown buttons would have a semitransparent shadow. When I look at the
page with IE, the boxes are behind the dropdowns and look fine. However, all
three of the other browsers show the objects far below and to the right of
their assigned layers.

Any ideas on what's causing these problems?

 

[Mark Fitzpatrick]

Part of it is, you used the drawing tools for part of the page. The Drawing
Tools use VML, which aren't supported in Navigator or FireFox. The Drawing
Tools are typically disabled by default in FP 2003 I believe just for this
reason. Absolute positioning also isn't as absolute as we would all like due
to browsers interpreting the rules slightly differently (which is normal).
The menu items would probably locate better if placed into tables. It's an
artform to get the tables down exactly right, but your design is very clean
and shouldn't be too difficult. Try recreating the effects using tables and
no Drawing Tools. Always use an external image program for drawing graphics
and text as the drawing tools are sure death for compatibility.

The site though is very nice and very clean, making it highly useful. Great
office shot on the front though, that's definitely a seller.

 

[BobBob]

Thanks for your suggestions and your comments. I had originally done the
whole thing with tables, but it's my understanding that dropdown menus
created with layers and behaviors would not work within a table layout.

I'm willing to just skip the drawing elements and do without the shadows,
but that doesn't address the matter of the horizontal row of buttons (home,
our staff, etc) dropping down by 20 pixels in Mozilla and Netscape. Any idea
why that's happening?

 

[Murray]

but it's my understanding that dropdown menus

created with layers and behaviors would not work within a table layout.

Here are two problems that may lead to your misunderstanding:

1. When layers are used with centering (or fullscreen) content, then as the
browser's viewport width changes, the content will recenter, causing it to
move with respect to the absolute positioning of the layers. This is
relatively easily solved with some CSS modifications.

2. When layers are placed within table cells, some browsers can become
confused about how to position the layer. This, too, can be relatively
easily solved by either never putting absolutely positioned elements into
table cells, or by putting them into a relatively positioned div, which is
put into the table cell.

To summarize, there is no insoluble problem with using dropdown menus with
tables.

 

[chris]

I think this is being cause by the paragraph tag you placed your menu
images in. see the code that starts here;
<p> <a href="index.htm"> <img id="img1" src="button24.jpg".... </p>

You should be able to fix it by replacing the paragraph tags <p> </p>
with span tags. <span> </span> or by inserting the images in a span
instead of a paragraph.

 

[chris]

But you should also consider what Murray had to say re absolute
positioning in relation to relatively positioned elements. Make sure to
test your pages not only in different browsers but in different screen
resolutions. Even with the span tag fix I suggested you may not like
what happens in resolutions other than what you designed in.

 

[Murray]

span tags. <span> </span> or by inserting the images in a span instead of
a paragraph.

Definitely not.

 

[Murray]

Screen resolution is an irrelevant variable with regard to this issue. The
relevant consideration is browser viewport size, which, obviously is only
dependent on screen resolution in a practical way - meaning that it's
difficult to set your browser viewport to a size that is larger than your
screen resolution....

 

[chris]

Murray- you are obviously more expert at this than I. Still I
think<????> maybe there is some way to fix this easily? The span tag
definitely fixes the gap issue for me in my view in Firefox. And from
that. I'm assuming that paragraphs and linebreak protocols for tags such
as paragraphs between browsers are causing the gap I see in Firefox. I
am certainly not savvy enough to explain it.

I *did* try viewing this page in several resolutions and the effect was
a blank box way outside and to the right of the page contents proper.
But with the addition of the span tag "fix" the gap or drop down of that
nav layer was corrected in Firefox.

I'm also thinking that there should be a way to autocenter any content
so that absolutely positioned content would place itself relative to an
encompassing table of fixed width???

Maybe I'm just dreaming lol

 

[Murray]

The <span> tag would not be valid as a container for the entire line of
text. Using it the way you recommend would cause your page to not validate.
You could easily fix things *and* allow your pages to validate by just using
CSS to manage the top/bottom margins on the <p> tags -

p#navigation { margin-top:0; margin-bottom:0; }

and then -

<p id="navigation"> <a href="index.htm"> <img id="img1"

I *did* try viewing this page in several resolutions and the effect was a
blank box way outside and to the right of the page contents proper. But
with the addition of the span tag "fix" the gap or drop down of that nav
layer was corrected in Firefox.

Resolution has almost nothing to do with this, in that it only affects how
wide you can practically make your browser viewport. You would not need to
change your resolution to see the effect.

I'm also thinking that there should be a way to autocenter any content so
that absolutely positioned content would place itself relative to an
encompassing table of fixed width???

There would be. Place the entire page into a fixed width, centering
wrapper -

#wrapper { width:760px; margin:0 auto; position:relative; }
....
<body>
<div id="wrapper">
....
</div>
</body>

and now, any layer placed within that wrapper will autmatically hold its
position relative to the wrapper, not relative to the upper, left-hand
corner of the browser viewport.