Steve Swanson

Email conversation

From	Steve Swanson
To	Me
Subject	CSS Menus and IE difficulties
Date	4 February 2004 17:57
Attachment	page demonstrating the problem

First, let me say how much I appreciate your website.  I have learned a
lot from it, and I continue to do so.

Now, to the heart of things.  I have been working with the beginnings
of the menu system you created with CSS, and I have hit an impass. 
Everything was going great, but then for some reason the menus started
acting a bit flaky in IE 5.5 (I am uncertain if this behavior persists
in IE 6).  I have modified your original CSS considerably, but I thought
I hadn't removed or added anything that would be causing my problem. 
Obviously I'm doing something, but I don't know what.

Ok, yes I realize I haven't mentioned what's happening, but that's
because it's difficult to explain.  But I'll try.  Basically, when you
hover over a child menu, it is veeeery touchy about when it will
dissapear.  Often, I can't get to sublinks in the menu because of it. 
Now something very odd is going on, because this happened when I started
to put text into the page.  Whenever the menus started moving over the
text, they started acting this way.  

I have zipped up all the files that I'm using for this particular page,
and I hope that you can give me some guidance as to what's going on,
cause I'm stumped.

Steve S.

p.s. If you could please respond to both at my work and home emails,
I'd appreciate it.

From	Me
To	Steve Swanson
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 08:25

Hi Steve,

Glad you like the site.

The answer to your problem is simple. Its something that Brother Cake
noticed
http://www.brothercake.com/scripts/navmeister/page.php
In IE 5.5 and IE 6, you MUST assign a background-color to child ULs. If you
don't, the mouse movement falls through the LIs wherever there is no text
in the LI, but there is text on the page behind it. This means that for no
good reason, the LI no longer detects the mouse, and closes the menu.

I like your design, but I am afraid you will have to make a small sacrifice
to make this work. You can minimise the damage by adding:
ul.makeMenu ul { background-color: #fff; }
to your mainsheet.css. Unfortunately, using 'transparent' does not fix the
problem, you must use a real colour.


I'm afraid that is the only fix, so I hope it is one you can accept. Hope this helps.

Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/

From	Steve Swanson
To	Me
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 14:29

Mark,

I feel pretty stupid, because I remember now that this was in your
comments at one point and I probably deleted it.  Thank you very much
for your help, I was able to come up with a fairly simple solution that
didn't compromise my design that much.

Steve

From	Me
To	Steve Swanson
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 14:45

Steve,

No need to feel stupid ;)

I did indeed have a comment, on
http://www.howtocreate.co.uk/tutorials/testMenu.html
However, the comment was not in the source of the CSS, so it is easy to
miss. I will add a comment into the CSS as well.

Brother Cake recommends a transparent GIF/PNG for the background, but you
need to make sure you CSS precache by attaching the image as a background
to another element.

From	Steve Swanson
To	Me
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 14:53

I hate to bother you again, but I've encountered a problem that I've
never noticed before, and I swear it didn't exist till I was futzing
with the code yesterday (I only noticed it just a minute ago).  2nd
child elements in the menu (In other words, sub-sub menus) are appearing
1pixel farther away from its parent element than it should be.  Again,
I'm not seeing why this would be the case since the 1st child element is
correctly positioned.

I should mention that it seems that this problem only occurs in browsers
other than IE.  I'll keep messing with the page to see if I can figure
it out, but if you could offer any help I would certainly appreciate
it.

I wish I could figure this stuff out totally on my own, but this more
advanced CSS is a bit daunting.

Steve

From	Me
To	Steve Swanson
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 15:20

I'd spotted that rendering bug. I was going to leave it because I only saw
it in Opera, and trusted it was just a minor problem.

It's because you are using
ul.makeMenu li:hover > ul { width: 100%; }
This does not effect the first level because
ul.makeMenu ul { width: 220px; }
is more specific for the first level (don't ask!)

Simply remove the width: 100% line and it will work properly as it will
inherit the correct width from the other declaration.

Tarquin (Mark)

From	Steve Swanson
To	Me
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 15:35

Seriously, thanks.  That is a very odd rendering bug, but at least
there is a workaround.  Thanks to you, I actually have improved the look
of the page and it works as intended.   You can't ask for much more than
that.

It seems like some of this you can only start to pick up with
experience.  In that regard, I don't feel so bad.  I don't know if there
is anything I can offer you in exchange for your help, but I don't suck
too much when it comes to graphics.  If you ever want a pretty picture
of some type, let me know.

Steve

From	Me
To	Steve Swanson
Subject	Re: CSS Menus and IE difficulties
Date	5 February 2004 15:56

The bug is due to box models, which are changeable in some browsers using
CSS 3. In fact, IE gets it wrong, and the other browsers get it right, but
that is another story.

The specificity thing still goes over my head at times. I understand the
basics of it, but with things like that, it's just trial and error.

I don't need anything in return. I like to help. But I may take you up on
the offer at some point ...

From	Steve Swanson
To	Me
Subject	different browsers different sizes
Date	6 February 2004 15:29

Hey, I have a quick question for you if you don't mind.  It seems as if
Mozilla/Netscape7/Opera handle padding differently than IE does.  For
example, if I put a padding value of padding:30px; and a width value of
width:200px; for a class, IE will create a box that is 200pixels wide
and the contents inside of it will be 30 pixles from the edges.  The
other browsers will increase the box size by 30 pixles all around.  It's
kinda annoying, I much prefer the way IE handles it.  Have you ever run
into that, or am I just special?

From	Me
To	Steve Swanson
Subject	Re: different browsers different sizes
Date	6 February 2004 16:54

Welcome to horribly in-depth CSS! That is about box models again.

The traditional model:
width is the with of the content of the box, plus the width of the left
and right padding, plus the width of the borders. This is the more
intuitive model.

The W3C standards compliant model:
width is the with of the content of the box. This is a bizzare model, that
unfortunately is the standard. It does make width: 100% for inner elements
better, so it does have a purpose.

Safari & konqueror always use w3c
Mozilla and Internet Explorer on Mac always use w3c unless you use
  -moz-box-sizing: border-box; box-sizing: border-box
Opera uses traditional unless you use a strict doctype or
  box-sizing: border-box
Internet Explorer on Windows always uses traditional except in IE6 
when you use a strict doctype.

PPK has some good docs about this:
http://www.quirksmode.org/css/box.html

It's basically a mine-field, and I suggest you leave well along. Just
accept that things look different. OK, there is a way to fix it: IE does
not understand the > selector, so you can specify a w3c width in there,
and a traditional width without using a >


Tarquin

From	Steve Swanson
To	Me
Subject	Re: different browsers different sizes
Date	6 February 2004 17:01

Mine field is putting it lightly.  Wow.  Thanks for the link though,
very handy.  I really don't like w3c's interpretation of the box model, to
me it is not intuitive.  I really don't even understand how it is the
standard- for once Microsoft is doing what makes sense and everyone else
is doing it the complicated way.  I feel like the world might implode.

Steve

From	Steve Swanson
To	Me
Subject	Positioning Child Elements in your CSS Menus
Date	13 February 2004 20:48

Hey Tarquin,

Got another question for you.  You had helped me a couple weeks ago
with modifying your CSS Menus, but I need some more help if you're
willing.  Is there anyway to position a child element in a different
position other than slightly below it's parent?

For example, I have a menu system right now that has very long link
names (I have no choice in the matter), with submenus for nearly every
item.  It sucks.  At any rate, I am developing this page for 800x600 and
these submenus get lower, and lower and lower on the page the further down
you go.  Eventually some of the options in a sub-sub menu are no longer
visible on the page.  You have to scroll down and then go through the
whole menu to get back to what you wanted.

Basically I want to tell certain child elements not to appear so low on
the page, but I am not having much luck.  I've tried creating classes that
have a different top and left attributes and assigning them to specific
child elements, but nothing ever happens.  I hope all of this makes sense,
if not I can always include a zip file of my work.

Steve

From	Me
To	Steve Swanson
Subject	Re: Positioning Child Elements in your CSS Menus
Date	13 February 2004 21:17

> I need some more help if you're willing.

sure, no problem

> Is there anyway to position a child element in a different
> position other than slightly below it's parent?

yes. You started on the right path.
Assign a class to the element. But, that is not all. You need to make sure
that the line that targets that element class is more specific than the
normal line that sets the position.

Remember that at all times, the position of the UL relates to the 
position of its parent LI, so you will need to use negative positioning,
and I suggest you use em instead of px, as it relates to the font size.

Watch out for what happens if you adjust the browser's font size so that
the text in each cell needs even more lines. This is a problem that arises
from using CSS instead of JavaScript, as JavaScript can readjust according
to the available space on the window.

instead of
ul.newClass { top: -10em; }
try something like:
body ul li ul.newClass { top: -10em; }
and if that doesn't work, you will need to make it even more specific
until it finally targets it properly.

Note that one of the most specific things to do is to use inline styles:
<ul style="top:-10em;"> so if nothing else works, you may need to resort
to that.

If you still can't get it to work, send me an example, and I will try to
work it for you so it repositions it properly.

Tarquin

From	Steve Swanson
To	Me
Subject	Re: Positioning Child Elements in your CSS Menus
Date	13 February 2004 21:23

Well I'm not a big fan of inline styles, but that did the trick.  I can
live with it though, I doubt I will have to use them very often.  Thanks a
lot for the assistance.

Steve

From	Steve Swanson
To	Me
Subject	Re: Positioning Child Elements in your CSS Menus
Date	17 February 2004 19:18

Turns out using body ul li ul.class worked very well, thanks a bunch. 
I, of course, have a new question.  It seems like every time one problem
gets solved another one pops up. 

This time I'm experiencing a strange behavior in IE 5.5+ (possibly
lower version too, but there's no way for me to test it).  Every time
the page loads, IE is loading each link in the navigation almost like it
is a graphic.  So at the bottom of the screen, it starts out saying
loading (100 items remaining) and goes all the way down to 0, just like
graphics.

The problem is, it does this every single time and it delays the entire
page from loading for 3 seconds.  I imagine that I can get more elements
of the page to show up if I declare them before the nested UL links, but
I'd rather not have to do that since NS4.78 doesn't render the page well
if I move things out of order (it likes it best when the title is the
first thing on the page, and the rest appears below it).

Any clue what may be going on?  I'm guessing IE is loading each Element
in the page into it's cache, but that seems awfully odd to me.

Steve

From	Me
To	Steve Swanson
Subject	Re: Positioning Child Elements in your CSS Menus
Date	18 February 2004 08:17

> Every time the page loads, IE is loading each link in the
> navigation almost like it is a graphic.

do you use background images on the links or ULs? because this is the other
problem that BrotherCake noticed. IE always reloads the images for every LI
or link, every time.

> This time I'm experiencing a strange behavior in IE 5.5+ (possibly
> lower version too, but there's no way for me to test it).

what operating system are you on? if you are using windows NT, 2000, XP, 98
(second edition) or ME, you can install multiple versions of Internet
Explorer at the same time. Basically you start by installing IE6, then you
download standalone versions of the other browsers. Currently, this works
with IE5.5, IE5.0, IE4, IE3. (3 and 4 only work on NT, 2000 and XP)

A description of the process and the downloads for NT, 2000, XP are
available on PPK's site
http://www.quirksmode.org/index.html?/browsers/multipleie.html

http://www.insert-title.com/web_design/?page=articles/dev/multi_IE
also has versions that should run on 98 (SecondEdition) and ME

From	Steve Swanson
To	Me
Subject	Re: Positioning Child Elements in your CSS Menus
Date	18 February 2004 14:48

Thanks for the heads-up on installing multiple versions of IE, hopefully
my IT department won't have a problem with me trying it.

I did have a background image in each cell, but even with that part of
the code commented out it exhibits the same behavior.

Steve Swanson

Navigation

Search

Site navigation

Email conversation