Ok, so I found this great little dynamic javascript/css menu on dynamic drive: http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm and had only one problem fitting it to my page (It's the top horizontal menu that says: Home, Software, Articles, Contact). For some reason, IE displays the div #chromemenu .chromestyle 1 pixel higher than FF, making the top part of my little black arrow slightly visible when the mouse is not hovering. I tried messing with margins/padding but have had no luck. For some reason there is always a different interpretation with IE/FF. I know it doesn't seem like a big deal, but I am OCD about this sort of stuff ... plus I am very curious as to what is being interpreted differently.
To Illustrate what is happening here is some pics: What happens in FF In IE it is 1 pixel higher making the arrow visible, which I don't want:
What you could do is add a conditional statement, telling IE to move the menu down but leave it the same for firefox. Add this to the bottom of your head tag: <!--[if IE]><link rel="stylesheet" type="text/css" href="chrometheme/ie.css" /><![endif]--> Code (markup): ie.css .chromestyle ul{ margin-top: 1px !important; } Code (markup): That should sort it. It's untested but it's always worth a shot. Seems to be the best solution offered so far . Good luck.
I was trying to avoid using the classic IE CSS hack, but I may have to. No one can figure out what is being interpreted differently?
My advice, STOP GOING TO DYNAMIC DRIVE. Their fat bloated javascripted bull for cutesy animations is more code and effort than they are worth. It's bad enough you have to throw .js at IE to make a cascading menu, without exacerbating the problem further by making ALL browsers reliant upon it. That you've saddled yourself with nonsensical heading orders, endless needless wrapping elements, paragraphs on non-paragraph elements - it's time to chuck and start over.
eh? what's wrong with my headings ... I wasn't aware of the fat I had to have a particular "order", and what needless wrapping elements are you referring to? *sigh* I've started over about 6 times designing the layout of this site because people have different opinions of how the html should look.
1) it's gramatically incorrect to 'skip over' heading levels. 2) if you use a lower 'level' heading it should be a subsection of the heading before it... 3) Headings should 'fan out' like a tree starting with the H1 first on the page... which is usually why I make the site name and/or logo the H1, since where some people advocate using the H1 makes EVERY other heading a subsection of it, which rarely makes sense. (check your WCAG guidelines) Pretty much I'd take an axe to logo-top, header-right, header-block-top - those would all become a H1 with a glider-levin image replacement applied to it so that images off (and search engines) have something to look at. Menu-left, menu-right, chrome-style would all get axed, BOTH of the drop-down menus would be UL inside their respective LI for a strictly CSS dropdown menu (probably with csshover3.htc for IE6/earlier support), curve-top would become borderTop inside the column. navbar-right would probably be applied to the header for that column, which would ALSO be a H2. navgradient-right would be axed outright since it's a fixed width layout, while mid-content and homecontent-wrapper would likely be just #content and .borderSides. The H3 would become h2, and there's no good reason for that div around that first content section (unless you were going to put a class on it and use it as a styling hook, in which case each section should probably have that) The H3 of course become H3 since they would be preceeded by a H2. That list of 'quick links' I'd probably make into a... well, list. If I was writing it 'navwrapper-right' would become #sideBar with it's heading moved into it as a H2... I'm assuming you are going to have PHP generate a UL in there? contentfooter-bottom and curve-bottom would be condensed to a single .borderBottom div, Assuming footerlinks-bottom is going to generate a list I'd not even bother wrapping it in a DIV and instead put a class on that list, and that's really about it for the changes (well, I'd call 'copyright-bottom' #footer, but that's cosmetic) You also have a few breaks inside your headings that serve no purpose apart from inconsistant appearance... and being it's a NEW page I'd be working in Strict not Tranny. So my markup for that would be something like this. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="blogging,blog,software,tools,themes,guides,articles" /> <meta name="description" content="Useful blogging software and tools for the everyday blogger." /> <link type="text/css" rel="stylesheet" href="screen.css" media="screen,projection,tv" /> <title> Home - Blogtap.net - Blogging Software, Tools and Themes </title> </head><body> <!-- empty tags like SPAN and B below are image sandbags for sliding doors or glider-levin replacement - do not remove!!! --> <div id="pageWrapper"> <h1> Blogtap.net<br /> <small>creative tools for bloggers</small> <span></span> </h1> <ul id="mainMenu"> <li><a href="home3.shtml">Home</a></li> <li class="hasKids"> <a href="software.shtml">Software</a> <ul> <li><a href="product_reviews.shtml">Product Reviews</a></li> <li><a href="software.shtml">Blog Software List</a></li> <li><a href="templates.shtml">Blog Templates</a></li> </ul> </li> <li class="hasKids"> <a href="articles.shtml">Articles</a> <ul> <li><a href="articles.shtml">Blogging Guides</a></li> <li><a href="articles.shtml">WordPress Tutorials</a></li> </ul> </li> <li><a href="contact.shtml">Contact</a></li> </ul> <div id="content"> <div class="borderTop"></div> <div class="borderSides"> <h2>Blogtap.net</h2> <p> Welcome to Blogtap.net, a collection of blogging tools, software, guides, articles and more! <a href="newsletter.html">Click Here</a> to join the Blogtap.net newsletter. </p> <hr /> <h2>Product Spotlight</h2> <img src="images/bttb32.jpg" alt="Blogging to the Bank Packaging" class="leadingPlate" /> <p> Discover the secrets that earned a man, literally, thousands of dollars per month from a single blog. </p><p> Rob Benwell's <a href="http://cscott5288.bttb1.hop.clickbank.net/?tid=B1">Blogging to the Bank 3.0</a> is widelly considered the most successful guide to making money at home from blogging. </p><p> Don't continue to pour your money into unsuccessful AdWords campaign, learn how to market your blog the smart way. </p><p> Set up your blogs to run on auto-pilot, investing zero dollars and yeilding unthinkable returns. From the underground of a true blog money-maker, this guide is sure to bring you success in your blogging endeavors! </p> <hr /> <div class="quickLinks"> <h2>Quick Links</h2> <ul> <li><a href="../blogtopicgenerator.php">Blog Topic Generator</a></li> <li><a href="../custom_post_background_plugin.shtml">Custom Post Background</a></li> <li><a href="themes.shtml">Themes</a></li> <li><a href="../articles/blogging_for_money_part1.shtml">Blogging for Money</a></li> <li><a href="../articles/blogging_for_money_part2.shtml">Frequent Blog Posting</a></li> <li><a href="../articles/blogging_for_money_part3.shtml">Blog SEO</a></li> <li><a href="http://cscott5288.bttb1.hop.clickbank.net/?tid=B1" rel="nofollow">Blogging to The Bank 3.0</a></li> <li><a href="http://cscott5288.bookdemon.hop.clickbank.net/?tid=B4" rel="nofollow">Bookmarking Demon</a></li> </ul> <!-- .quickLinks --></div> <div class="recentUpdates"> <h2>Recent Updates</h2> <h3>Custom Post Background Plugin Updated v1.2.0.0 Released</h3> <p> The plugin now allows you to select (from a drop down menu) a background image from your wordpress uploads location. </p> <h3>Released Wordpress Custom Post Background Plugin v.1.1.0 - 2/26/09</h3> <p> This new version incorporates pagination so you can view your posts on multiple pages in the edit menu. </p> <h3>Site Design Modification - 2/19/09</h3> <p> Blogtap.net is not fitted with a larger content panel, and slimmer sidebar menu. </p> <h3>Added Custom Post Background Plugin - 02/17/2009</h3> <p> The <a href="custom_post_background_plugin.shtml">custom post background plugin</a> for Wordpress 2.7+ allows you to easily customize post/page backgrounds on your blog. </p> <h3>Site Redesign - 02/12/2009</h3> <p> Blogtap.net has been re-designed hopefully for the last time today. The site now has a skeleton, all it needs is flesh (content)! </p> <!-- .recentUpdates --></div> <!-- .borderSides --></div> <div class="borderBotttom"></div> <!-- .content --></div> <div id="sideBar"> <h2>Navigation</h2> [an error occurred while processing this directive] <!-- #sideBar --></div> <div id="footer"> © 2008-2009 Blogtap.net <!-- #footer --></div> <!-- #pageWrapper --></div> </body></html> Code (markup): Everything else goes into your CSS... I have time later I'll work up a demo to show you what I mean (CSS + image remastering for my approach shouldn't take more than 30 minutes) Well, that's called learning... I feel your pain as I went through the same thing a few years ago, but really there are better ways of doing things now and it is a lot simpler than it used to be - once you wrap your head around some of the basics. The problem is there's a lot of bad "ain't it neat" nonsense out there which can quickly lead you down the garden path - Dynamic Drive is filled to the brim with such things. Javascript to do CSS' job, Javascript that has no accessability fallbacks, hover techniques with no caching models, graceful degredation and require three to ten files to do what a single image should be able to - etc, etc... Though, for all I've said, I've seen FAR FAR worse. At least you weren't trying to use tables for layout with presentational markup - that means you've either dodged that bullet or been broken of those ugly habits - and that's a good thing.
... and here's how I'd be writing that page: http://www.cutcodedown.com/for_others/cscott5288/template.html As with all my examples the directory: http://www.cutcodedown.com/for_others/cscott5288 Is unlocked so you can grab the gooey bits. I remastered the images, though the background behind the header if you have the original of that I'd be handling that a wee bit differently (using transparencies). Valid XHTML 1.0 Strict, would be valid CSS if not for the IE workaround properties of 'zoom', 'behavior' and the one !IE, as well as the handful of -moz properties for FF 2.x... tested working 100% in IE 6, 7, & 8, FF 2 & 3, Opera 9.64 and 10beta, and the latest iterations of Safari and Chrome. It also works to a degree in IE 5.5, the only major issue being the borders on the drop-downs don't line up with the content (ooh). Hope this helps. Oh, one thing - might I suggest having a white arrow there when un-hovered, switching the image (sliding background good as always) to the black one when hovered?
Holy **** you sure have done a lot of work for me here. God bless retired people! I will study your changes and make them habit. I wholeheartedly thank you for taking all the time. Any yes, at one point I did have a run-in with a table based layout ... and I thought my newb days were over!