Forum Moderators: not2easy

Message Too Old, No Replies

Alignment problem with one line only mouseover ul > li ?

CSS alignment issue

         

we5inelgr

5:53 pm on Jun 21, 2014 (gmt 0)

10+ Year Member



Hello all,

I've got a situation where I have 1 line (shown below in 2nd image) that doesn't want to line up correctly (should be part of the padding-right:5px):

HTML

<div id="sign_in_out">
<ul><li><b>Barney Rubble</b> &#9662;<ul><li>Signed In With: barney@rubble.flintstones</li><li><span class="basicLink"><a href="http://www.mysite.com/so.html">Sign Out</a></span></li></ul></ul></div>


CSS

#sign_in_out { width:100%;padding:0; }
#sign_in_out ul{ width:100%;margin:0;padding:0;list-style:none;font: 12px Verdana; }
#sign_in_out > ul > li { margin:0;padding:4px 10px;height:20px;position:relative;float: right;line-height:20px;z-index: 200; }
#sign_in_out > ul > li > a { display: block;text-decoration: none;margin: 0; }
#sign_in_out li > ul { visibility:hidden;position: absolute;top:0px;right:10px;padding-right:5px;border-right:1px solid #000; }
#sign_in_out > ul > li > ul { top:28px;right:10px; } /* Controls sub menu position relative to top of main ul */
#sign_in_out > ul > li > ul a { display: block;text-decoration: none;margin: 0; }
#sign_in_out > ul > li > ul > li:hover a { display: block;text-decoration: none !important;margin: 0;color: #FF0000; }
#sign_in_out li:hover { background-color: #ffffff; }
#sign_in_out li:hover > ul { visibility: visible; }


How can I get that line with the email address moved to the left, in line with the "Signed In With:" and "Sign Out" lines? :confused:

Without mouseover:
[oi61.tinypic.com...]

With mouseover, showing email line out of alignment:
[oi58.tinypic.com...]

lucy24

7:19 pm on Jun 21, 2014 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yikes! I must say, tinypic's notion of "images you may also enjoy" is somewhat at variance with my own :(

My first thought was width constraints, either on one of the nested li's or ul's or on the containing div. If there isn't room, then things have to move.

we5inelgr

10:16 pm on Jun 21, 2014 (gmt 0)

10+ Year Member



lol, no kidding huh!

you were right, I added an additional width statement (within the existing):
#top_siso > ul > li { width:100%;margin:0;padding:4px 10px;height:20px;position:relative;float: right;line-height:20px;z-index: 200; }

and now it works as expected.

many thanks!