Forum Moderators: not2easy
I have 2 menus on the same page - they work fine on every browser (even Mac IE 5) except Internet Explorer 6. Of course the pop-outs don't work on IE 5 or 6.
In 6 they look OK - although a little skewed to the left. But when I click on the second menu, the first menu disappears totally and the menu is now settled into the correct place.
Any ideas or should I post the css code?
Thank you for any help you can be!
Diane
Del
/* CSS Popout Menu - Sidebar-New Blue*/
#menu-side-new-blue{ font-size: 12px; font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; position:relative; border: solid 2px #c54abe; }
#menu-side-new-blue a{ font-size: 12px; font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; line-height: 13px; background-color: #edeef6; width: 120px; padding-bottom: 2px; padding-left: 5px; display:block; text-decoration:none; text-align: left; width: 145px; padding-top: 5px; }
#menu-side-new-blue a:visited{ color:#923cb2; font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; }
#menu-side-new-blue a:hover{ color:#5b0479; background-color: #ffc0ff; }
#menu-side-new-blue a:active{
color:#c54abe;
}
#menu-side-new-blue li{ font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; text-align: left; list-style-type:none; }
#menu-side-new-blue ul li{ text-align: left; position: relative; list-style-image: none; }
#menu-side-new-blue li ul{ text-align: left; position: absolute; top: 0; left: 150px; border: solid 1px #c54abe; display:none; }
/* Fix IE. Hide from IE Mac \*/
* html #menu-side-new-blue ul li{float:left;height:1%;}
* html #menu-side-new-blue ul li a{height:1%;}
/* End */
div#menu-side-new-blue ul{ width: 150px; margin: 0; padding: 0; list-style-image:none; }
div#menu-side-new-blue ul li:hover ul{ display:block; }
then the second one
/* CSS Popout Menu - Box*/
#menu-box{ font-size: 12px; font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; background-color: #edeef6; position:relative; border: solid 2px #c54abe; }
#menu-box a{ font-size: 12px; font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; line-height: 13px; background-color: #edeef6; text-decoration: none; text-align: left; width: 245px; padding-top: 5px; padding-bottom: 2px; padding-left: 5px; display:block; }
#menu-box a:visited{ color:#923cb2; font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; }
#menu-box a:hover{ color:#5b0479; background-color: #ffc0ff; }
#menu-box a:active{
color:#c54abe;
}
#menu-box li{ font-family: arial, geneva, "times new roman", times, georgia, verdana, Palatino, "trebuchet ms"; text-align: left; list-style-type:none; }
#menu-box ul li{ text-align: left; position: relative; }
#menu-box li ul{ text-align: left; position: absolute; top:0; left: 250px; border: solid 1px #c54abe; display:none; }
/* Fix IE. Hide from IE Mac \*/
* html #menu-box ul li{float:left;height:1%;}
* html #menu-box ul li a{height:1%;}
/* End */
div#menu-box ul{ width: 250px; margin:0; padding:0; list-style-image:none; }
div#menu-box ul li:hover ul{ display:block; }
Thank you any help you can give me!
Diane
Diane
;-)
perhaps this might be a good time for a gentle reminder,
a quote from our Charter [webmasterworld.com]
Posting CSS & HTML Code
- We are here to help one another, but we can not, and will not do site or sheet reviews.
- We understand that it is often necessary to provide code samples. Just keep them very short and simple please. (no more than 15 lines)
- If you need to provide sample styles, please also post the relevant HTML for the CSS you are trying to debug, as the layout is not always obvious by viewing the CSS alone.
- Please remove any specific details (such as domain names) or personally identifiable information (such as name, address, phone number) from your code before posting.
- Excessive code dumps will be edited.
- Code dumps provided in response to a question, with no explanations offered, will also be edited as these are no more than "I fixed your code" posts and add little to no educational value to the discussion.
- Please explain your problem/answer as best you can. Bear in mind that it will be read by others later who may have the same problem, but based on different code.
- Please read these guidelines [webmasterworld.com] for a good overview before posting CSS/HTML code in the forum.
- and finally if you're still unsure the these guidelines [webmasterworld.com] on troubleshooting your CSS both to find errors and to provide a "post ready" sample just might provide some further help.
sorry if that seems a bit harsh as I have let your earlier posts go, and I know that you've got some very good help going on here, however we're generally not a "debug my entire page" site.
Thanks
Suzy
sorry if that seems a bit harsh as I have let your earlier posts go, and I know that you've got some very good help going on here, however we're generally not a "debug my entire page" site.
Sorry Suzy, i didn't think when i suggested the code be posted in full. Thanks for the reminder.
Del
There are actually enough clues going on just with what you've posted so far. Search the forum for disappearing content IE6 [google.com]
Also if you all just take the CSS that's posted so far and create two divs with those IDs and stick a few blank links inside a <ul> in them you can see a layout error in IE6
<div id="menu-side-new-blue">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
<div id="menu-box">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
although other factors (floats?) on the page are probably contributing to the content actually disappearing, my guess would be that the cause of both errors is the same and can be fixed by adjusting the menu CSS alone.
alternatively Diane if you would like to post the HTML you could try stripping the page content bit by bit until you have a minimal sample of HTML code that demonstrates the actual problem
Suzy
[edited by: SuzyUK at 7:44 pm (utc) on Feb. 21, 2007]
first menu html
<div id="menu-side-new-blue">
<ul>
<li><a href></a>
<ul>
<li><a href=>Music CD Design</a>
<li><a href=">Brochures & Flyers</a>
</ul>
<li><a href=></a>
<ul>
</ul>
</div>
second menu
<div id="menu-box">
<ul>
<li><a href="></a>
<ul>
<li><a href=>Oils Gallery</a></li>
<li><a href=>Luminous Angles Gallery</a></li>
<li><a href=>Pastel Gallery</a></li>
</ul>
</div>
Hope this is helpful and that I have complied with agreement
thank you,
Diane
ps I had found one </div> missing and put it in and went to the neighbors to test - but it didn't fix disappearing menu and off-kilter
What I'm Good For
I have a Mac set up as a complete LAMP server. I also have over a dozen browsers, running on multiple Parallels VMs, that are all geared for testing on my laptop.
This means that I can test code against IE5/Win98, IE7/Vista, IE6/XP, FF2/XP, FF2/Vista, Opera6-9/Mac, Opera 7-9/XP, FF1.5/Mac, FF2/Mac, iCab3/Mac, etc. You get the idea.
I have two test files on my browser: test.html and test.php. These are bookmarked throughout the abovementioned browsers, so I can slap in some code and run tests against it from a dozen different directions.
I'm also a top-shelf debugger. I'm an engineer with over 20 years of heavy-duty software development background, network systems, hardware design, etc. I usually find my bug. Sort of a geek mountie.
Why Distilled Code is Good
1) If it interests me, and isn't a pain to test, I might look at it. If I see a whole page with a raw page dump on it, I'll usually give it a pass.
2) Distilling the problem is the first part of diagnosing it and fixing it. Divide and conquer. It's also a damn good way to design.
<soapbox>
You know what's the most stable support structure in the world? An equilateral triangle. It is also the minimal number of supports possible for a stable 3-dimensional support. Yet hundreds of engineers are absolutely CONVINCED that "more is better." They throw everything but the kitchen sink at a problem, then have a meltdown when it doesn't work.
Here's a secret: Every line of code you write is another opportunity for a bug to appear. In fact, it is usually an opportunity for more than one bug to appear. Josef Albers once said that "One plus one is three or more." He was referring to visual design, in which the whitespace between elements adds another, implicit element. With code, it can get a lot hairier than that.
Remember that almost every bit of active content on the Web is provided by interpreted and high-level code. This means a whole TON of layers between the code you write, and the execution engine that transmits and renders that code. When you write one line of JavaScript, PHP or HTML, it turns into hundreds, or thousands of lines of code, and the execution thread may pass through millions of bytes, coordinate with other threads through semaphores and handshakes, etc. I've designed digital circuits, and understand what happens, right down to the FET junctions. There's a lot going on under the e-hood. Modern technology has given us the completely necessary grace to ignore most of it. Our brains would explode if we tried to grasp everything that is going on in a given Web transaction.
This is why we need to KISS (Keep It Simple). This is also why it pays -BIG TIME- to learn to develop simple, clean, minimalist code.
</soapbox>
I don't see what Suzy is seeing about the code.
I do not believe I have any floats on the page. I don't use them.
The css menus are in different cells of a table on the page ...
I am sure I am just missing the obvious ...
but I am lost
Diane
Diane I would try some troubleshooting by adding:
#menu-side-new-blue {zoom: 1;}#menu-box {zoom: 1;}add it firstly to whichever one is disappearing
add it right at the end of the stylesheet (or on the page) for a quick check - does any combination of the above help?
It may be that it needs added to either or both rules to test, as both menus have a hasLayout weakness in them
Suzy
and I'm not particulary seeing anything in that code, it's the "disappearing content" on a mouse action that has my attention right now.
although when I tested that CSS with the the small sample of HTML I did see layout error, it wasn't disappearing content it was the fact that the first list was offset until the second one was hovered on - but disappearing content is also a symptom of a layout error so I'm troubleshooting in what I hope is a non mystic way, and may help others is all ;)
Suzy
cmarshall get off that soapbox now! wink
Okay, apologies for ranting. I just have a "simplicity" button. One of my favorite books ever is Scott Jenson's "The Simplicity Shift," which is really for marketing types, but has great lessons for us implementers as well.
CSS design, as anyone who has looked at one of <he who I have agreed not to keep mentioning />'s sites, knows, can get FIENDISHLY complex, with battling specificities, browser quirks, etc.
I really think that we all benefit from implementing and practicing Simplicity as a religion. It gives our users a better experience, our customers better value, and ourselves more time for optional sleep.
I noticed something as I am working away with changing my other pages ...
when the second menu is high enough in the page, and I click on the first menu with some pop-outs, the pop-outs go behind the second menu ...
maybe that is helpful.
Thank you for all your help!
The zoom on the end of the first style sheet solved the disappearing problem!
Thank you so much!
I know there is the problem you are talking about, Suzy, about the other layout problem.
I have been teaching myself about menu pop-out css, but mostly by trial and error. I make a change and upload it to see the effect. I am not even quite clear what some of the things are for - so I just keep trying to figure it out.
Any help would be appreciated!
Thank you,
Diane
Do you know anywhere where they say in English what the steps are? I have spent hours on many sites reading - but it is Greek to me - and all I know are the Greek letters of the alphabet from math.
li:hoverNo workee in IE6. IE6 only does :hover for a.
I added the other zoom to menu 2 but that didn't fix it.
Any ideas?
Thank you for ALL this help!
Diane
*,html,body{margin:0;padding:0}That should help you with your offset issue. You'll still need to deal with the borders.
*,html,body{margin:0;padding:0}
before each piece of the menus? plain, active, hover, visited and fiv and all?
thank you ...
Diane
Do you put*,html,body{margin:0;padding:0}
before each piece of the menus? plain, active, hover, visited and fiv and all?
Nah, just put one at the beginning of the file. What it does is set all elements to no margin and padding ("*", but not in all browsers -I believe that good ol' IE6 won't honor it), the html and body set these to page edge, which is important, because that's where some of the chief browser differences lie. It gives you a common "starting point" for enclosed block elements.
After you've used it for a while, especially for debugging CSS, you'll wonder how you ever lived without it.
The zoom on the end of the first style sheet solved the disappearing problem!Thank you so much!
You're Welcome!
did you need to add it to both or just one and which one?
Anyway that was only the troubleshooting fix. (to try and target the disappearing content problem) and what it is actually doing is setting hasLayout=true [webmasterworld.com] on that element hasLayout is an IE only thing and causes weird display bugs!
zoom is also an IE only CSS property and you can use/leave it on your CSS if you like, but the CSS won't validate if that's a concern to you (no biggie operhaps as it's just the validator doesn't recognize zoom.. ). There are other ways to help IE if you don't want to use zoom, but you might like to read up on that thread above some time and ask a seperate question if/when you want to, for now I think the original question is answered though?
just for info and nothing to do with question.. this:
/* Fix IE. Hide from IE Mac \*/
* html #menu-side-new-blue ul li{float:left;height:1%;}
* html #menu-side-new-blue ul li a{height:1%;}
/* End */
I know there is the problem you are talking about, Suzy, about the other layout problem.
No sorry if I wasn't clear there is no other "layout" problem as regards the original question - the "offset until hover corrected it" that I saw was just a different symptom of the same problem.
What I meant was that there was enough code here in the thread - i.e. your CSS and that small sample of HTML copied into a blank HTML document - to see that there was a layout or hasLayout problem with the code. It didn't matter, to me anyway, that it wasn't disappearing or it wasn't in a table or in situ on your full page. - Guess that means I need to get out more ;)
Do you know anywhere where they say in English what the steps are? I have spent hours on many sites reading - but it is Greek to me - and all I know are the Greek letters of the alphabet from math.
First though you should take note of encyclo's comment about checking your Doctype to make sure it's as IE friendly as possible, and then good news is when you get your menu working how you like you should also be able to get it (the popouts) working for IE6 and below (not IE/Mac though)
Just to let you know, in Firefor (so I assume everthing else too), there is still the problem when menu 2 is higher on the page, menu 1's pop-outs go behind menu 2.I added the other zoom to menu 2 but that didn't fix it.
as mentioned earlier zoom is IE only and will do nothing for FF. zoom should only be used as a troubleshooting test whenever something is not displaying how you expect in IE.
This is a different thing than your original post and sounds like a pure and simple z-index (stacking level) issue. Well not exactly an issue as it sounds like it's doing what you're asking it to.
Your use of
position: relative What you could do is make a fresh page with the correct doctype. Create a basic table which is the same layout as your page. Put the two menus in where they should go (in sample form like your above above will do) then put in some plain text (a few words will do we can fill it out) or other indicator of which bits of content will affect height/placement of second menu then ask another question
and finally OT but just for clarity
*,html,body{margin:0;padding:0}
actually if you want to use it, all you need is:
* {margin:0;padding:0;}
This is known as the "global reset", the '*' is the universal selector and selects all elements. (including html and body which is why they needn't be in the rule). In HTML there are a lot of elements (e.g. html, body, hn, p, ul, form ) which have default margins and/or padding. Browsers don't always apply those defaults consistently e.g. take <ul> elements some browsers use padding and some use margin to create the "indent". This can cause things to not appear quite how you'd like so the 'global reset' simply removes all padding/margin from everything allowing you to suggest your own values via the CSS, which is then applied much more consistently. Be Aware, that until you're aware of everything it might affect it might look a little disconcerting, e.g. it will remove indent and bullets from lists and cram all text together on a page!
phew!
Suzy
IE7 finally fixes it.
I noticed several li:hover instances in the CSS, and it looked like they were a fairly integral part of the operation to me. Maybe there was some more CSS in the background, or a .htc that I didn't catch.
I want the padding to be like this -
padding-bottom: 2px; padding-left: 5px;
to space the images out that are my links - rather than have lines between them.
Should I put those measurements everywhere and add 0 for the top and right? If so, which place should I put that - in just #menu?
I will look into the Firefox development tool - thank you.
Chagrined ... I have no idea what doctype unless this is what you mean - text/html;charset=ISO-8859-1.
How do I check what doctype I have?
I added the zoom to one and it fixed it. I did add it to the second and I decided I better take it out to not add problems. Yes, the original question is answered. Validation doesn't matter to me - though perhaps it should. I may read about haslayout later when I recover (joke).
So the zoom fixed the haslayout problem?
So I should be able to get pop-outs in IE 6? I still don't have them. I am unclear what to go with that. Is that the doctype thing?
so should I just put *{margin:0;padding:0} near the beginning of my css file and then in the menu file then I put the padding I want? Is this what this is saying?
About the li:hover ... supposedly this works with a csshover.htc file - but I am not even sure I have that right. I was supposed to download it from a page - and I got something - but not sure if I really got it.
Phew is right!
Thank you again for all your help. After this gets finished up, I amy ask a question about relative, absolute and z index. I took out the z index from the file ... maybe that is why it hides behind. And I changed the absolute to relative because I didn't want it up at the upper left corner.
Thank you everyone for all that you are teaching me!
Diane
How do I check what doctype I have?
You should have a doctype on the very first line of your HTML document, before the
<html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">What do you have on your page?
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
as I have been reworking stuff I am slowly converting to xhtml
on most pages (and the css file, I have nothing) ...
Diane
<?xml version="1.0" encoding="iso-8859-1"?>I keep forgetting to turn it off in my text editor.
It drives IE into "Quirks Mode."
XHTML 1.0 Transitional is a good DTD, although there has been some [webmasterworld.com] discussion [webmasterworld.com] as to it's ultimate benefits.
