Alignment issues (resolved)

[jester48]

I have my WP plugin dropdown set for right alignment inside a table cell, I had it in a div with relative positioning but the ie6 mimic code didn’t like that, worked fine in every other browser tho,, now that i have taken out the div the sub-menu
left aligns to the parent text, any ideas on how i can get teh mimic code to work inside the div or set teh css to right align rather than left align the sub menu?

before – with the div – IE7, FF, Opera, Safari(Win and Mac) not working at all in ie6
                    main menu text
        long text sub menu item 1
        long text sub menu item 2
        long text sub menu item 3
        long text sub menu item 4

now – no div tag – all browsers
                    main menu text
                    long text sub menu item 1
                    long text sub menu item 2
                    long text sub menu item 3
                    long text sub menu item 4

my CSS
#suckerfishnav {
    font-size:10pt;
    font-family: Verdana, Arial, Helvetica, Sans-Serif;
float:right;
width:280px;
text-align:right;
    }
#suckerfishnav, #suckerfishnav ul {
    float:left;
    list-style:none;
    padding:0;
    margin:0 3px 0 0;
    }
#suckerfishnav a {
    display:block;
    color:#0096c0;
    text-decoration:none;
    padding:0px;
    }
#suckerfishnav li {
    float:right;
    padding:0;
    }
#suckerfishnav ul {
    position:absolute;
    left:-999em;
    height:auto;
    width:285px;
    font-weight:normal;
    margin:0;
    border:0;
    border-top:1px solid #666666;
    }
#suckerfishnav li li {
    width:283px;
border-bottom:1px solid #666666;
    /*border-left:1px solid #666666;
    border-right:1px solid #666666;*/
    font-family:verdana,sans-serif;
    }
#suckerfishnav li li a {
    padding:4px 3px;
    width:277px;
    font-size:10pt;
    color:#0096c0;
    }
#suckerfishnav li ul ul {
    margin:-21px 0 0 100px;
    }
#suckerfishnav li li:hover {
    background:#f0ffff; /*sub menu background colour on hover */
    }
#suckerfishnav li ul li:hover a, #suckerfishnav li ul li li:hover a, #suckerfishnav li ul li li li:hover a, #suckerfishnav li ul li li li:hover a {
    color:#0096c0;
    }
#suckerfishnav li:hover a, #suckerfishnav li.sfhover a {
    color:#0096c0;
    }
#suckerfishnav li:hover li a, #suckerfishnav li li:hover li a, #suckerfishnav li li li:hover li a, #suckerfishnav li li li li:hover li a {
    color:#0096c0;
    }
#suckerfishnav li:hover ul ul, #suckerfishnav li:hover ul ul ul, #suckerfishnav li:hover ul ul ul ul, #suckerfishnav li.sfhover ul ul, #suckerfishnav li.sfhover ul ul ul, #suckerfishnav li.sfhover ul ul ul ul {
    left:-999em;
    }
#suckerfishnav li:hover ul, #suckerfishnav li li:hover ul, #suckerfishnav li li li:hover ul, #suckerfishnav li li li li:hover ul, #suckerfishnav li.sfhover ul, #suckerfishnav li li.sfhover ul, #suckerfishnav li li li.sfhover ul, #suckerfishnav li li li li.sfhover ul {
    left:auto;
    background:#f0f8ff; /* sub menu background color */
    }
#suckerfishnav li:hover, #suckerfishnav li.sfhover {
    background:transparent; /* main menu background colour on hover */
    }

thanks

[imported_Ryan]

Hi Jester48,

I’m a little baffled as to what you are trying to do here.

Perhaps you just want to have the top level menu items right aligned inside their containing block? If so, the #suckerfishnav li {float:right … code you have above should achieve that.

A link to an example of your problem would be helpful.

[jester48]

Ryan, thanks for teh response.
unfortunately the code is not published so a link is not availble, i know that will make working on this hard, my apologies

in looking at the alignment sample above you can see that with a div around the menu i get the right alignment effect i am looking for
<div style="position:relative;">
<ul id="suckerfishnav">
<li><a href="#" onclick="return false;">MAIN MENU</a>
<ul>
<li><a href="/index.php">link one</a></li>
<li><a href="/index.php/link one">link one</a></li>
<li><a href="/index.php/link one">link one</a></li>
<li><a href="/index.php/link one">link one</a></li>
<li><a href="/index.php/link one">link one</a></li>
<li><a href="/index.php/link one">link one</a></li>
<li><a href="http://www.google.com&quot; target="_blank">link one</a></li>
</ul>
</li>
</ul>
</div>
but the sfHover does not like that format for the menu and does not work in IE6
if i remove the div the dropdown works in ie 6 and all other browsers but rather than being right aligned to the parent the dropdown left aligns to the first letter in ‘main menu’, that is the left margin of the sub ul aligns to the text, if i use left somevalue; in place of left:auto; from the second last block in the of the css the sub menu goes to the left hand side of the screen

thanks

[jester48]

i was able to solve this by adding a width property to
#suckerfishnav a {
…
width:280px;
}

thanks

[Author]

Posts