I am not sure if am allowed to post links but I am having a lot of trouble putting a CSS dropdown on my site. I have the "Free CSS Drop-Down Menu Framework" website menu but for some reason I can't format it correctly and despite being a cross browser menu still doesn't work in IE8. I have always avoided putting a dropdown menu on my site before hence my inexperience in the matter. I really want to "implement and forget"! Anyway, not much use without an example of the faulty website! Oh just realised it is in my sig!!
Most of your problem simply seems to be no background being declared on the dropdown -- though that seems to be a very broken method for putting together a menu since it appears to be 100% reliant upon javascript to even function; this isn't 1998. Though your example page is by itself having it's head wedged firmly up 1998's backside what with the use of a tranny document, tables for layout, inaccessible forms, and elements and attributes like FONT, CENTER and TARGET that have no business being used on websites written any time after the turn of the last century. The use of 'advanced' selectors and visibility:hidden only further complicate what should be a fairly simple page. I'm on the laptop at lunch at the moment, but when I get back to my workstation I'll show you how I'd approach doing that using the technique I came up with for using overflow:hidden instead of visibility or display... as well as cleaning up your markup to drag it into THIS century. (or at the very least the last century)
Here's what I came up with: http://www.cutcodedown.com/for_others/static1635/template.html as with all my examples the directory: http://www.cutcodedown.com/for_others/static1635/ ... is wide open for easy access to the bits and pieces. Valid XHTML 1.0 Strict, tested working perfect IE7/newer and the latest flavors each of Opera, Saffy, Chrome and FF... should work in IE6 except for the dropdown menu being non-functional. If you actually care about IE5 and 6 it should be simple enough to add peterned's whatever:hover to it. I added a H1 since pages should have one (and not more than one) under which all content of the page is a subsection -- allowing those H2 in the footer to behave as expected for heading navigation. I opened it up semi-fluid -- the 95% width gives a bit of padding at our intermediate resolutions to make it pretty, the 768px min-width is a fallback to make sure the layout doesn't break when it gets too narrow -- good trigger point BTW for media queries -- while the EM max-width lets the page expand as needed, more so for large font/120dpi or higher default font size users (like myself). Fixed the form markup so it has the proper element around it -- a fieldset, and simplified the left/right bits so as to use as few floats as necessary and to get rid of those tables. I also swung an axe at a lot of pointless classes you had in there since that's, well... semantic markup's job. Admittedly, the advert in the footer isn't entirely designed for a fluid layout, so at narrow widths it's busting out... That could take a bit of rewriting, or just swing an axe at it; It's a fat bloated slow script, though no more so than the 'comments' one that sends Opera off to never-never land for 30 seconds. In the CSS you'll see I start out with a reset -- it's a small one. There are larger ones like Eric Meyer's "reset reloaded", but that fat bloated pig is damned near a framework, and wastes time setting values that are already the same across browsers or are so rarely used, there's no point to using it. Likewise there are smaller resets, like the "universal reset" of "* { padding:0; margin:0; border:0; }" but that can cause layout issues across browsers with form elements, so I avoid that one. The one I use is what I consider the sweet spot in the middle -- it's only a quarter of a K and usually prevents me from having to say margin and padding over and over again until it's 2-3k of pointless margin/padding/border setting. You'll notice I hide all HR. They are there for semantics, NOT to draw lines on the screen, indicating changes in topic where we aren't using a numbered heading to indicate the start of a subsection. I treat HR like they were empty H2 in that regard. The real part you'll care about though is the menu -- I didn't match your colors since the contrasts were below accessibility norms, but I tried to stay true to your intent. This system simply absolute positions them in relation to the parent LI, then uses overflow:hidden and overflow:visible on hover to hide/show them. This has the advantage that unlike display:none, visibility:hidden or even left:-999em that if you try to tab through the links, the parent LI will 'scroll' inside itself to show the link meaning keyboard and screen reader navigators aren't left out in the cold.
Thanks for this, I am currently in Singapore airport heading for Medan, but I will download the code and have a good look, not sure what internet I will get in Medan. Thanks
Hi Deathshadow I have been pouring over the examples and your explanation. It's lovely to see my site reduced from the bloated code I had, and looking better than ever. Being a code fiddler since 1998 (when I did actually first start fiddling with webdesign) the pages have been fiddled with so many times and it wouldn't surprise me if there was some old Netscape code still lurking in there. A real shake up was long overdue. Recently the site had been vastly simplified and the dropdown was the beginning of sorting it all out finally, without your help it would have taken me, say, two years maybe! I can see I am going to be working out your code for sometime. I mostly pull the code out of the pages and include the header, menus and footer with php. Which makes for a confusing time, my site has several different areas but with universal bits called into every page. The front end is a three column layout and the personal site a two, with a universal stylesheet and a separate one for the sections. I know it's clumsy but I started programing in Apple Basic in the 70's and never really moved on! I had a look at your site which I think is rather cool and think I may be linking to it from mine pretty soon. Regards Justin
Hi Deathshadow I have been pouring over the examples and your explanation. It's lovely to see my site reduced from the bloated code I had, and looking better than ever. Being a code fiddler since 1998 (when I did actually first start fiddling with webdesign) the pages have been fiddled with so many times and it wouldn't surprise me if there was some old Netscape code still lurking in there. A real shake up was long overdue. Recently the site had been vastly simplified and the dropdown was the beginning of sorting it all out finally, without your help it would have taken me, say, two years maybe! I can see I am going to be working out your code for sometime. I mostly pull the code out of the pages and include the header, menus and footer with php. Which makes for a confusing time, my site has several different areas but with universal bits called into every page. The front end is a three column layout and the personal site a two, with a universal stylesheet and a separate one for the sections. I know it's clumsy but I started programing in Apple Basic in the 70's and never really moved on! I had a look at your site which I think is rather cool and think I may be linking to it from mine pretty soon. Regards Justin
Hand assembling machine language on a Cosmac Elf here, so just a few years ahead of you curve-wise ... and still writing software for late 70's and early 80's systems... Was going to comment on that as some of your pages had a number of systems I've owned as well... and still own. I've got a working Apple IIe platinum set up out in the garage, and a tandy 1000 SX at the next desk over -- so we're basically from the same 'world'. As to your mixing and matching with PHP, that's often called a "poor man's CMS", I have my own system of doing that just because I prefer to work with the HTML instead of having some goofy WYSIWYG that results in poor accessibility, though I've also written my own (non-public) CMS that a number of websites are still using. One nice thing about the 'new' way of writing markup (if 1998 can be considered new) is that it's simpler -- since you're just using tags to say what things are there's a lot less you have to have for code in with your content... Makes converting old sites filled with presentational tags not all that hard -- I often find it faster to just cut/paste the text from the browser and add the markup than try to deal with the old code at all; in fact, that's how I built the above rewrite.
Hi Death Shadow My other part of my site is a 3 column layout with no dropdowns (just a copy of the Google style) is there an easy way to have the both running together? The layout is very similar. Can I just have another id to make the page 3 or 2 column? I have toyed with the idea of dumping the 1st column used for navigation but with the front end part of the site I want to keep total acsesability. http://justintuijl.com/blog/indonesia3.php I keep thinking there must be a funky php way of building the pages rather than all this HTML.... Thanks Justin