Floating menu position wrong in IE6 (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

spinningjennie -> Floating menu position wrong in IE6 (8/16/2007 8:55:53)

In IE6 my floating horizontal menu, based on lists, won't align with the #container and the menu wraps into 2 'rows'. Its alignment is fine in IE7, Mozilla Firefox and Opera 9.1.

Here's the page.
Here's the stylesheet.

Any thoughts much appreciated.
spinningjennie




Tailslide -> RE: Floating menu position wrong in IE6 (8/16/2007 9:25:07)

This - Test Page - seems to be working slightly better except for a slight shift in IE6 when you mouseover the links. That's usually a haslayout issue - couldn't see anything off hand. If I get a chance I'll see if I can fix it.

Edit: fixed it - it was because of the % on the content div - IE sometimes has "issues" with redrawing % margins. I've replaced them with ems and it seems to work ok on FF, Opera IE7 and IE6 down to a pretty small width.



spinningjennie -> RE: Floating menu position wrong in IE6 (8/20/2007 2:32:24)

Many thanks Tailslide for unravelling this one for me, plus the mouseover shift! I'm very grateful.

I’ve tried to carefully work through each change Tailslide made to see the effect it had. It seems to me that the changes that were key to the menu aligning correctly and not going to 2 ‘rows’ were as follows:

In the Stylesheet you:

1. changed % width of #menuh-container from 80% to 100% and removed width of 10% allocated to margin-right and margin-left. The containing div was already 80% width, which was all that was required.

2. removed absolute positioning and left and top measurements for #menuh-container, which was critical for FireFox.

3. removed margin-left 3.75% for #menuh and added background colour of black to #menuh

Note: I found that if I changed #menuh margin-left: 3.75%; to: padding-left: 4%; and made the width: 96% that I was able to space my menu a little away from the left edge. This worked fine in IE6, Firefox and Opera. I am puzzled as to why this worked, however, because I thought that it was usually best to use margins rather than padding, which is handled differently by the browsers.

Q: Does it have something to do with the widths being successfully controlled by the containing div width?

To correct the slight shift in the links on mouseover in IE6, you:

* changed margin width from % to ems

This was a great discovery for me, because noticing this shift required careful observation.

Question:

1. I notice you thoughtfully made the link paths to my thumbnail and related larger images absolute, so that they included the precise location on the live website. What advantage does this provide?

Changes that didn’t seem to be critical to menu positioning but perhaps there were other reasons for them:

1. 2 sniffer code changes (just before the closing head tag). (FYI: The code for this I got from Sperling

2. Added to #container {position: relative}

I guess the above is my analysis of your insights, in case it helps someone. It helps me to jot things down.

Many thanks yet again! spinningjennie



Tailslide -> RE: Floating menu position wrong in IE6 (8/20/2007 3:04:47)

In general I find it safer to control the width of the containing element and let the child elements just do their thing within it.

The more widths, padding, margins etc you have (I find anyway) the more likely you'll get "issues" with inheritence when some element or other inherits a rule from somewhere else on the page. This is why it can sometimes be difficult to give definitive answers and why often trial and error work better than logic!

The stuff in the conditional comment probably work fine on their page but it might just pick up some unwanted rule in yours that's enough to screw things up.

Far as the % thing goes - it's ok for margins when things don't have to be too precise, but I'm not keen on using % for margins when you do want some precision - it's difficult for browsers to calculate especially IE.

The absolutely referenced images was just me linking your photos directly from your server rather than me bothering to copy them and have local references as you did. Ideally you wouldn't use full references like that on a live site. I tend to reference stuff from the root of the site to make it easier so all image will be referenced like this "/images/whatever.jpg" that way I don't have to think too hard (which I'm not good at).

If you've got something which you position absolutely relative to it's containing div then you have to give that containing div a position:relative rule otherwise the Absolutely positioned item takes it's reference from the viewport (i.e. the body element).

As far as margins and padding goes - generally I stick to margins as it's then just easier to keep track of stuff but as long as you're using a proper DOCYTPE then you should be fine adding padding into the mix too.

IE shifting stuff on mouseover of links is usually either a haslayout issue (please don't ask me to explain it, I barely understand it myself) or a redraw issue. haslayout issues can be tested for by adding zoom:1 to various rules in the stylesheet until you find the one that stops the problem - then remove the zoom rule (it's invalid) and fix the problem by either adding a width if possible or sticking a height:1% rule in an IE conditional comment. Redraw problems can be solved various ways but the easiest is to remove the confusion (in this case %).

I'm rambling again aren't I?

In conclusion - most problems with CSS stuff are either poor browser rendering of perfectly correct rules or inheritence issues (made worse by the previous issue!). I find that the best thing to do is to employ a CSS reset in your stylesheet (* {margin:0;padding:0;} ) which puts you back to a level playing field - then just keep things as simple as possible rule-wise.



spinningjennie -> RE: Floating menu position wrong in IE6 (8/22/2007 0:04:24)

Pretty useful ramblings! Tailslide, I appreciate your thoughtful answers, which are making a huge difference to my understandings.

Q1: For the zoom:1 device, would this code work?

#menuh-container {margin-left:10%;zoom:1;}

Q2: In Opera the font is very small for the page.
I haven't come to grips with conditional comments, which I guess I have to use here. Do you or anyone else have any suggestions here?

Regards
spinningjennie



Tailslide -> RE: Floating menu position wrong in IE6 (8/22/2007 2:44:08)

Usually I find that I run into haslayout issues with stuff like lists and links although I have run into it with divs too - couldn't get my skip links to work in IE on my own site because the anchor was in a div that apparently had no layout. In the end I had to this: 

 <span class="haslayout"><a name="styles" id="styles"> </a></span>


and make that class absolutely positioned to force haslayout in IE.

A ridiculous amount of effort frankly.

Here's more about the delightful issue of haslayout: http://www.satzansatz.de/cssd/onhavinglayout.html

If I suspect haslayout issues then I'll zoom:1 element by element until I either rule it out or find the problem. I would then remove it and add another solution in Conditional Comments (so that they don't effect other browsers).

Conditional comments are truly wonderful things for targeting IE browsers. Here's a useful link to a list of the various options: http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Far as the Opera font size goes - I think (and I could be wrong) that browsers don't seem to have the same sequential rate of increase/decrease in font size. What I mean is that it seems to me that in this example 80% on the main div is definitely smaller in Opera than FF. I usually use 76% on the main div which looks pretty much the same. Also, oddly 82% looks, to me anyway, pretty much the same. I could be completely wrong but that's my impression anyway - so try upping it a bit to 82% or decreasing it slightly and see if you get a better result. Weird eh?



spinningjennie -> RE: Floating menu position wrong in IE6 (8/25/2007 3:51:41)

Many thanks Tailslide for the useful links, and the good hint re. Opera font-sizing. Yes, your Opera font-size peculiarity matched my findings. 76% and 82% were good size matches cross-browser, but 80% wasn't!

May I ask:

Question 1: why is it that with your suggested styling as per your test page I can't get equal space above the 2 headings: 'Join in' and 'Bridge Contacts'. The space above the 'Join in' heading is much smaller than for the 'Bridge Contacts' heading. IE is fine, but not FireFox or Opera.

(Aside: I suspect for your #content tag you meant to have: margin: 0 1em 0 1em; rather than margin:1em 0 1em 0; which I've changed in http://www.crcl.org.au/template1.htm, but that still doesn't even up the spacing above the 2 headings.)

Question 2: since I don't have access to a Macintosh computer I don't know if the Macintosh browser (Safari?) font-size matches fairly closely with FireFox, IE and Opera. Any tips on this?

Regards,
spinningjennie




Tailslide -> RE: Floating menu position wrong in IE6 (8/25/2007 5:04:15)

Try adding clear:left; to your sidebar div - seems to help un-collapse the top gap in FF - don't know what it does in IE though.

You can now get a PC version of Safari to download so have a go at that.





spinningjennie -> RE: Floating menu position wrong in IE6 (8/28/2007 9:02:00)

Wow Tailslide. Magic!

1. The clear:left on sidebar div works in all browsers tested: IE6, IE7, FireFox, Opera & Safari to stop the collapsing of the top gap above heading in the sidebar div.

2. I loaded the Beta PC version of Safari, and made an extremely useful discovery about one of my sites, which saves me from being discovered with 'egg on face'. Not being able to check sites on Macintosh or in Safari has bothered me for some time. Thankyou!!

Using this Beta version of Safari, it seems I need to publish a page before I can view it in Safari. I don't seem to be able, within Dreamweaver, to successfully checkmark Safari to 'Preview Using Temporary File'. I can live with this however!

Kind regards from a very grateful spinningjennie



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.078125