At 7/9/2009 03:23 PM, Greg Wilker wrote:
>I just noticed that the top nav "tabs" are distorted on my laptop with IE8.
>
>They work fine on my desktop with a widescreen monitor and they are working
>fine in FF of the laptop.
>
>http://www.achildsdream.com/htn/design3/index.html
>
>Anyone know what might be happening?
>
>(They are dropping "off", or "below" the div)
I wouldn't think this would have anything to do with the type of PC
you're using, only the type of browser, its settings, and the window
dimensions.
The page initially came up fine for me in IE8 (on my laptop), but I
was able to get the menu to wrap by increasing text size beyond
Medium. It did not wrap when I increased zoom or decreased window width.
In Firefox if I turn on Zoom Text Only and increase the size, the menu wraps.
Also in Firefox if I turn off text zoom but increase zoom, the
rightmost menu tab ("View Order") wraps around, then flips back up,
then flips back down, etc., with successive increases of size. In my
experience this often results from rounding fractional widths and
might be cured if you allowed at least one pixel of free space in
which the menu can flex, so to speak, as it's enlarging.
I see from the source that you're couching your page elements in
table cells (ick), so the rounding in this case probably arises from
the browser's attempt to fit the table in the allotted space as zoom
increases. The menu might increase a fixed number of pixels per zoom
notch, but if the table cell width is computed as some fraction of
the total table width then any increase of table width that doesn't
divide evenly among the cells in the row may result in zero increase
in the cell containing the menu, forcing the menu to wrap.
Personally I would strip the table markup out of this page and rely
on simpler markup & slightly more complicated styling to arrange
things the way you want.
Regards,
Paul
__________________________
Paul Novitski
Juniper Webcraft Ltd.
http://juniperwebcraft.com
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
