As usual, works in Firefox, Safari, etc. but not in IE (although frustratingly some of it was working in IE earlier). In the top nav only “Careers” is supposed to have a submenu. This used to show up in IE but now doesn’t. On the side nav the submenus appear but not in the correct positioning. If it means anything CSS3 Pie is being used here to create rounded corners but initial tests don’t show it to be the problem. If anybody can find an answer/solution before I can it’ll be much appreciated.
Some bits kind of work, and then as you play around with the left-hand menu, it all gets shot to pieces, boxes appear in the wrong place and soon it stops working at all.
Unfortunately the mash of scripts, stylesheets and hacks galore makes it quite difficult to debug. This is what happens pretty much without fail when people use boilerplate stylesheets and scripts without understanding them. I’m also struggling to see what’s going on with your semi-commented images - are they code, or are they comments? There really is no need to make it that complicated - simple HTML with simple CSS will do a far more effective job.
Not to mention working for everyone. Your use of images in the menus is shocking. The most obvious error is that the ‘Investors’ image isn’t loading the natural state, so you only see what it is on hover. But have you tried to look at the page with images turned off? Nothing - no menus at all! Because you’ve put alt=“” on every image, which is inexcusable. That means “this image can be ignored if it cannot be displayed”, which is just not true when it forms part of the navigation. The alt text on each image must give the same text as appears in the image, or some people and all search engines will struggle to find their way round your site. But quite honestly, I don’t understand why you’re using images at all. It’s text content, so just make it text.
Let me just clarify first that I fought tooth and nail (trust me on this; I can’t emphasize this enough) to use text in the navigation and got overruled at every turn. It was extremely frustrating to not be able to especially since others will now think I don’t know what I’m doing.
Also, I may not have all the alt text correct yet but I’m not entirely sure that relates to the trouble IE is having displaying the submenus properly.
I didn’t personally implement any hacks myself, although some may have come with the boilerplate. I don’t mind cleaning them out but my initial tests don’t show them affecting the present problem.
Actually… that is sort of right. The value of the ALT attribute should be what you want displayed in case the image can’t or won’t or doesn’t display (i.e., “alternate” text). In many cases that value will match whatever text might be in the image. In some cases it will be different text. But in some cases if a particular image doesn’t appear you don’t want any text to appear in its place. The project I am currently work on has a number of such instances.
Anyways, I’m a little surprised that nobody can solve the navigation problem I presented. I might have to take the whole thing apart and put it back together again. And hope it works…
finding the culprit is the same with who’s to blame about global warming you have so many css styles and js frameworks for styles only god knows what were you thinking.
your are spicing up your code like you want to sell road kill in the meat market! come up with a sensible mark-up and we’ll help. but don’t expect us to untangle your weird page
Some of it comes from HTML5 Boilerplate (a lot of it) and some of it comes from the company demanding lots and lots of stuff. The only JavaScript framework, per se, is jQuery. Yes, that crazy CSS at the end was necessary to accomplish what the client insisted on (although there might be a way to compact it). But the submenus did work at one point with all this stuff in.
You people act like you’ve never been forced into ridiculous code by others and you think every nutty thing you see must be a product of my crazy mind. Maybe you’ve been lucky to always have absolute say over your code.
who do you think would willingly follow every twist and and turn in your mark-up?
Far from necessary to look at all the markup. Only some of it pertains to the nav. This can’t be the only time somebody has asked here to have one problem looked at in an entire site.
how can somebody be forced into volunteer work here? this is what you’re trying here?
to quote you: Anyways, I’m a little surprised that you can’t solve the navigation problem you presented. since you know you don’t have to look at all the markup, i assume you already know the answer, but you’re trying to compete with Paul’s CSS tests?
isn’t it that this contradicts a little the above?
anyhow, you won’t catch many flies with vinegar you should respect the forum even if you don’t get your answer.
You’re funny. Sorry that I asked a question. I respect the forum which is why I presented the question here. But maybe I’ve inadvertently presented a problem the web development world has no answer for.
isn’t it that this contradicts a little the above?
No, not at all. Let’s put our logic cap on here. I didn’t say that to solve the problem that the entire site must be looked at, only that there must’ve been other times in the history of the forum here that somebody gave a link to a website and posed a question that only had to do with one aspect of it.
Thanks. I’ll work with those. Those are funny because they are supposed to make IE work. But maybe I can tell the HTML5 Boilerplate creators that their efforts are backfiring.
a simple test: if you disable js in the other UAs: ff, op, ch, saf you’ll see that “Careers” submenu still works. this leaves you with the css. at least for ie8 it should work w/o js. if not, there is something wrong there. so remove any ie class related from css also: .ie6 etc.
True. But there is some JavaScript that is needed so that when a submenu appears (on the side navigation) its parent element shows a green arrow that overlaps it (although I might be able to find a way around that, and I’m also not sure that effect shows up right in my test page).
I didn’t say that alt=“” was always wrong, or that you shouldn’t have used it at all, I said it was wrong for you to use it on every image on the page, given that some of them are essential parts of the navigation structure … and with alt=“” on all images in the navigation, the navigation is unusable.
Anyways, I’m a little surprised that nobody can solve the navigation problem I presented. I might have to take the whole thing apart and put it back together again. And hope it works…
That is what I would recommend, and what I was trying to hint at earlier. The problem is that with so many stylesheets and scripts, it’s very difficult to track down exactly what is causing the problem, because there are so many places to look, and so much potential for conflict. And with off-the-shelf frameworks, there is usually so much unused cruft clogging it up that isolating the problem code is even more difficult.
If you start from scratch and build up to the code you want, you’ll get something that is much more streamlined, more efficient and easier for you and us to troubleshoot if it doesn’t work entirely as intended.
Stevie, thanks for responding again. Three important points to remember:
[INDENT]1. Every single bit of code in the site has a purpose. I can’t show the whole site now so I ported some of it over to a temporary staging site and got rid of some of the code that didn’t pertain to the one example page but not all of it; you are also catching this in the middle of the project, so, yes, some parts won’t be complete; I’m getting absolutely zero benefit of the doubt here :injured:
For the real site I have been tweaking some of the code that came with the boilerplate and even deleting some of it and the people that created it have said to feel free to do so (right on their site - http://www.html5boilerplate.com) so I am fine with using it and modifying it how I see fit; there is no pathology here of a framework creator telling people to not change/delete their code
There’s really only one main style sheet here and a print one with very little to it; there’s also only one JavaScript framework[/INDENT]
The code in question is:
#container NAV UL UL
{
display: none;
list-style-type: none;
margin-left: 0em;
padding: 0px 0px 9px 0px;
width: 190px;
position: absolute;
left: 229px;
top: 0px;
overflow: auto;
z-index: 10;
}
#container NAV UL LI:hover UL
{
display: block;
}
It simply tells the submenu to stay hidden until its parent item is hovered over. Works in good browsers. Used to work in IE, now doesn’t.
UPDATE: At the moment the top navigation seems to be behaving and the left one is doing better but still has positioning issues. Continuing to work on this on my own while dealing with a looming deadline and having a million other things thrown at me. It was brought up here in case anyone could find the solution first.
you have so many css styles and js frameworks for styles only god knows what were you thinking.
Let’s put our logic cap on here. I didn’t say that to solve the problem that the entire site must be looked at, only that there must’ve been other times in the history of the forum here that somebody gave a link to a website and posed a question that only had to do with one aspect of it.