The MU forums have moved to WordPress.org

CSS and a suckertree menu (8 posts)

  1. gr33nman
    Member
    Posted 16 years ago #

    Greetings:

    The blog is here:
    http://blog.greenman.us
    The header file is here:
    http://blog.greenman.us/wp-content/themes/greenthorn/header.php.txt
    The css is here:
    http://blog.greenman.us/wp-content/themes/greenthorn/style.css.txt

    I've been adapting kubrick, though it looks very different and is still not ready for prime time.

    I'm adapting the stylegala method for sorting out some of the wonky browser differences, as seen in the header.php.

    I've gotten modern browsers like IE7, FF and Safari to look good. However, I'm still having trouble with IE6.

    It's all because of the suckertree pulldown menus in the header. Suckertree works in all four browsers when constructed correctly, but I've lost site of something here.

    Here's an image of what I see when I look at IE6:
    http://blog.greenman.us/wp-content/themes/greenthorn/images/IE6_example.gif

    The transparent yellow bar is part of the background image and is where the menu lives in other browsers. The lighter yellow surrounding "Home" is the hover action. You can see the menu is high above it's home in the yellow bar. Also the green background behind the headerimg image shows that the menu is pushing the whole page down about 10px.

    I suspect one change will rectify the entire situation, but I cannot find it.

    Any help will be greatly appreciated.

    Chris

  2. Radecki
    Member
    Posted 16 years ago #

    Hey, who uses Ie6 anyways...lol

    I would look into:

    <div id="header">
    <div id="headerimg">
    <h1><a href="http://blog.greenman.us/">Greenman Design</a></h1>
    <div class="description">
    <strong>Reflections of an underslept webmaster.</strong>
    	</div>
    	<div class="suckertreemenu">
    <ul id="treemenu1">
    <li><a href="/">Home</a></li>
    <li class="page_item page-item-2 current_page_item">
    <a href="http://blog.greenman.us/about/" title="About">
    About</a></li>
    <li class="page_item page-item-22">
    <a href="http://blog.greenman.us/archivepage/" title="Archives">
    Archives</a></li>
    <li class="page_item page-item-3">
    <a href="http://blog.greenman.us/contact/" title="Contact">
    Contact</a></li>
    </ul>
    <br style="clear: left;">
    	</div>

    You'll notice that .suckertreemenu is a class and the css file has no positioning attached to it.

    Basically this is inside of the header div 200px high with greenman image new browsers recognize that .sukertreemenu ul has a 49px margin but IE6 ignores this as it often does.

    My proposal would be to create a class or div that surrounds the menu (.suckertreemenu) and then position that at the bottom of the header and then do all the ul . li code as it will already be postioned by the containing div.

    I also noticed that there are no drop downs to your menu. If this is going to stay like this I would simply delete suckertree and start with a simple css list menu (tutorials are easy to find) and you'll save a lot of headaches.

  3. jackiedobson
    Member
    Posted 16 years ago #

    Please remove your code or place it within backticks. The forum can not take it.

  4. gr33nman
    Member
    Posted 16 years ago #

    Radecki,

    Thanks for the suggestion. Instead of creating a whole new div, I used the existing id 'treemenu1' and gave it the following coding in the stylegala difference engine.

    #treemenu1 {
    	margin-top: 41px;
    	width: 740;
    	height: 28;
    }

    However, now I find that my pulldowns - you guessed it - start 40 pixels below the menu, making them unusable in the modern browsers. It works fine in IE6. Fix one problem and find another...

    I really appreciate the help.

    Chris

  5. Radecki
    Member
    Posted 16 years ago #

    If you remove your padding, and simply add:

    bottom:0px; position:relative;

    it should place your div (treemenu1) opx from the bottom of the div it's in (header)

    I try and stay away from multiple padding divs for these wonky error reasons.

  6. gr33nman
    Member
    Posted 16 years ago #

    Radecki,

    I gave up. After I got it to do as you say, it broke in other places. I think it has to do with the javascript.

    I'm going to try a different solution.

    Thanks for your help though.

    Chris

  7. Bike
    Member
    Posted 16 years ago #

    Hi Gr33nman, I only have FF and IE7, but your menu seems to work, did you fix it, if so, how?

  8. gr33nman
    Member
    Posted 16 years ago #

    Yes, I changed it to use a different situation altogether, using the csshover.htc fix created by this guy:
    http://www.xs4all.nl/~peterned/hovercraft.html

    Also, I'm using this method adapted in header.php to tidy up css for each browser:
    http://www.stylegala.com/articles/no_more_css_hacks.htm

    IE6 behaves like I installed a plugin that makes the hover class work properly.

    The stylegala thing is just a bonus for making it so the csshover.htc only shows for IE6. All other browsers show css as valid. I don't care if it's not valid in IE6, becaues it won't be supportable much longer.

    Chris

About this Topic

  • Started 16 years ago by gr33nman
  • Latest reply from gr33nman