Suckerfish Menu not working in IE7

Discussion in 'CSS' started by mnymkr, Dec 13, 2008.

  1. #1
    mnymkr, Dec 13, 2008 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, first advice, don't use suckerfish. It puts too much 'crap' into your markup. Just write a flat CSS menu, then throw Peterned's csshover2.htc at it to get IE6 to play nice.

    In general you've got a lot of /FAIL/ in there - from what I'm seeing the #header and #header-nav div's serve no purpose, you've got cryptic nonsensical classnames abound inside your menus... some formatting to make your markup clear would certainly help, as would easing up on the number of pointless DIV. You've got inlined CSS, presentational table for no good reason, those silly IE conditionals in the header when there's nothing in the layout complex enough to NEED that nonsense, abuse of the title tag making it useless for what it's SUPPOSED to be for, hordes of unneccessary javascript, use of bloated libraries... You've got 13k of markup, 89k of javascript and 23k of stylesheets for 2k of content - a sure sign that MOST of the HTML needs to be pruned/pitched/reduced.

    ... and that's before we talk the accessability issues of the absurdly undersized fixed metric fonts, layout breakage on large font machines, etc, etc.

    I'd end up throwing it out and starting over before even trying to figure out why a suckerfish menu doesn't work in IE7... Though that is not exactly suprising given this one line right here:

    <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
    Code (markup):
     
    deathshadow, Dec 13, 2008 IP
  3. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #3
    First let me thank you for your reply.

    It was very productive.

    I noticed you didn't actually answer the question (couldn't?)

    Unfortunately I don't have time to write such a well thought out response as I pretty much follow up on diamond leads all day that I recieve from my "bad code" site and then relax with my family at night.

    However since you brought some things up I thought I might reply.

    1) you may have noticed the trailing /beta this is because i do not run ads to this site so i can have shoddy mark up

    2) there is nothing wrong with the title tag. actually if you read some of Google's latest literature on title tags (you can find it many places, such at google.com/webmasters) you will find my title tag is not only correct and useful but that it has helped me place in top 1-5 for all keywords I target that bring me high quality diamond leads even though there is little content on my site

    the Boston MA is actually recommended to help placement on Google maps which if you notice supercede any SERPs as they appear above them.

    3) Google has also stated that they understand good websites do not have to made by masters of css and layout and therefore it doesn't matter that much. Rubbish is ok with them , as long as the content is good and well organized

    4) div aren't just asthetic for layout and can be used for organization layout of a site so my header tag makes sense to be there since, well, after all , it contains the header

    5) the nonesene javascript comes from not me thinking it needs to be there but because the whole site is a port of a drupal theme where it was included. actually if i were to clean up the template and release it, you would probably find that this JOOMLA template uses much less php to make a flexible 3 column layout that many of the "professional" Joomla tempate gurus.

    I realize your repsonse may be some sort of self servicing way of promoting links in your signature. That's cool. That's your deal.

    Really I just need to know, why doesn't this suckerfish menu work in IE7.
     
    mnymkr, Dec 13, 2008 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Well, silly question, if you use a background-color instead of the alpha transparancy .png as the background, does it work?

    From here the menu itself appears to work, it's the transparent background appearance that's messed up (opaque.png)

    Even though IE7 supports alpha transparent .png, it's still generally a /FAIL/ when the layouts get complex. It could also be a haslayout issue - since I don't see any fixed widths being declared on the anchors... or any other triggers for haslayout that too could be the issue.

    I would first try replacing the

    background: url(../images/opaque.png);

    in #ja-mainnav ul.menu li ul with a flat background, #444 for example, to see if that works. If it does, then the alpha transparant .png is the cause... Just to make sure it's not a haslayout issue I'd then put that line back in, and then trip haslayout with zoom:1; - if zoom:1; makes no difference in that element, I'd apply it to it's parent.

    Though really this is a case of suckerfish and the markup being too complex for it's own good. For example your <div id="ja-mainnavwrap"> I'd axe the DIV immediately inside that, most of the spans (which should only be needed when you don't have an anchor for application of padding), and almost all of the classes as well... since from what I'm seeing for appearance NONE of that should be neccessary.

    Making the markup something like this:

    	<div id="mainMenu">
    		<ul>
    			<li>
    				<span>Community</span>
    				<ul>
    					<li>
    						<a href="http://www.bostondiamondexchange.com/blog">
    							Diamond Blog
    						</a>
    					</li><li>
    						<a href="http://www.bostondiamondexchange.com/forums">
    							Diamond Forums
    						</a>
    					</li>
    				</ul>
    			</li><li>
    				<span>Services</span>
    				<ul>
    					<li>
    						<a href="/beta/services/jewelry-a-diamond-quotes">
    							Jewelry &amp; Diamond Quotes
    						</a>
    					</li>
    				</ul>
    			</li><li>
    				<span>Education</span>
    			</li><li>
    				<a href="/beta/find-a-diamond">
    					Find a Diamond
    				</a>
    			</li>
    		</ul>
    	<!-- #mainMenu --></div>
    
    Code (markup):
    There's really no reason to have more than that for a simple single cascade menu.

    Hang on, I'll slap that into one of my standard templates and quickly toss together the appropriate CSS to show you how to do it the other way.
     
    deathshadow, Dec 13, 2008 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    Ok, here's just the menu how I'd code it, both the HTML and the CSS, tossed into a quick dummy template to test how it interacts with other elements.

    http://www.cutcodedown.com/for_others/mnymkr/menuTest.html

    As with all my examples the directory:

    http://www.cutcodedown.com/for_others/mnymkr/

    is unlocked so you can grab the bits and pieces. Tested working in IE 5.5, 6 & 7, Opera 9.6, Safari and Firefox 2 & 3. Valid XHTML 1.0 Strict, and would be valid CSS if not for the IE specific bits and pieces.

    Hope this helps...

    BTW - I wasn't trying to 'promote' the links in my signatures, which if you'll follow are simply links to posts that pretty much say the exact same thing, yet are NOT (unlike most of the signatures around here) trying to hock any sort of book, website or other product. Those are not 'promotional' links, apart from trying to promote GOOD coding habits so when I do get hired by a company to work on an existing site I end up having less of a mess to deal with cleaning up after others.

    If I come across as terse, it's just because I'm trying to HELP by steering people away from bad habits and bad code.
     
    deathshadow, Dec 13, 2008 IP
  6. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #6
    no hard feelings mate

    as i said

    all this code was ports of a drupal theme and the suckerfish came from a joomla theme i happened to have.

    I was just playing around and then noticed the suckerfish didn't work.

    I will roll your suckerfish into Joomla now and see how ti goes. Thanks!
     
    mnymkr, Dec 14, 2008 IP
  7. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #7
    ok as close as I could i did a direct port to a joomla template

    now of course we are stuck with certain markup do to the nature of joomla but i believe i have transported your cascading appropriately

    http://www.bostondiamondexchange.com/beta/



    To answer a previous post you had to, the problem was I could not click the links in IE7
     
    mnymkr, Dec 14, 2008 IP
  8. WestBoy

    WestBoy Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    If you want, I can add a very pretty navigation bar to your site. Just give me the content the navigation bar.

    Will cost $20, though.
     
    WestBoy, Dec 14, 2008 IP
  9. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #9
    I can write one myself, i am just interested in why the Son of Suckerfish menu doesn't work in IE7 correctly

    however it is a joomla issue

    i found a different menu outpu module and it works great!
     
    mnymkr, Dec 14, 2008 IP
  10. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #10
    Not so much a joomla issue as the output from the skin you are using - you SHOULD be able to change that markup from the skin I think...

    If not, then it lowers my opinion of joomla even further, since separation of output into /themes from your functionality code is supposed to be fairly standard practice these days.
     
    deathshadow, Dec 14, 2008 IP
  11. mnymkr

    mnymkr Well-Known Member

    Messages:
    2,328
    Likes Received:
    32
    Best Answers:
    0
    Trophy Points:
    120
    #11
    oh you don't need to lower your opinion you should have none

    despite my bad code you viewed i can template almost anything in either drupal or joomla

    (being a scientist i wanted to know WHY it didn't work)

    but anyway

    you can "rewrite" the module menu in the templating system but it is not easy for the average joe or jane

    I found an extension that is a module rewrite and it works well.
     
    mnymkr, Dec 14, 2008 IP