Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    lists and nested spans? (floating some text right)

    I have a vertical list that I want to have some text and then a little character (such as an ! or a $ or a *) floated to the right of the list. I've tried it different ways but it doesn't seem to line up in IE or FF correctly. It staggers the right side if I set the span to float: right, or it just doesn't match up if set to align-right. Here's the code:

    CSS:
    Code:
    #navlist
    {
    padding-left: 0;
    margin-left: 0;
    width: 200px;
    }
    
    #navlist li
    {
    	list-style: none;
    	margin: 0;
    	border-top-width: 1px;
    	border-top-style: dashed;
    	border-top-color: gray;
    }
    
    #navlist li a { text-decoration: none; }
    .redX {
    	color: red;
    	text-align: right;
    	right: 0px;
    	float: right;
    	clear: right;
    	position: fixed;
    }
    HTML:
    Code:
    				<div id="navcontainer">
    				<ul id="navlist">
    				<li>in the same sentence <span class="redX">/s</span></li>
    				<li>in the same paragraph  <span class="redX">/p</span></li>
    				<li>within "n" terms of <span class="redX">/n</span></li>
    				<li>root expander <span class="redX">!</span></li>
    				<li>universal character <span class="redX">*</span></li>
    				<li>both words appear in a document <span class="redX">AND or &amp;</span></li>
    				<li>either word appears in a document <span class="redX">OR</span></li>
    				</ul>
    				</div>
    Can anyone help me figure out how to get them to align right and stay inline? Thanks!!!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Keep in mind that you cannot simultaneously float and specify position: fixed for an element. That may be why it isn't working the way that you expect. You probably don't want fixed positioning.

    Read more: CSS 2.1 Working Draft, 9.7 Relationships between 'display', 'position', and 'float'

    I think that you may get better help if you provide a link to the live page. For example, from the code you have pasted, we don't know what document type you have specified.

  • #3
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply... unfortunately, I can't post it live anywhere. I can however include the entire html here. I have made some change and I'm getting closer, but I still can't get it to line up height wise correctly. I need each line to be a tad bit smaller and to be good in both IE and FF but cant seem to get the right line-height or height combo. Here's the code:

    Code:
    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body {padding: 0; margin: 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
    #left_box {
    	float: left;
    	width: 207px;
    }
    #left_box .title {
    	color: #FFFFFF;
    	font-size: 11px;
    	font-family: Arial, Helvetica, sans-serif;
    	font-weight: normal;
    	background-image: url(img12.jpg);
    	background-repeat: no-repeat;
    	height: 19px;
    	vertical-align: middle;
    	line-height: 19px;
    	padding-left: 10px;
    }
    #left_box .content_corner {
    	color: #000000;
    	background-color: #F4F4F4;
    	background-position: right top;
    	background-image: url(leftFrame_TLcurve.jpg);
    	background-repeat: no-repeat;
    	font-size: small;
    	border: none;
    }
    #left_box .content {
    	border-left: 1px solid #CCCCCC;
    	border-right: 1px solid #CCCCCC;
    	border-top: 1px solid #CCCCCC;
    	border-bottom: 1px solid #CCCCCC;
    	position: relative;
    }
    #navlist
    {
    	padding-left: 8px;
    	margin-left: 0;
    	font-size: 10px;
    	padding-top: 5px;
    	width: 190px;
    }
    
    #navlist li
    {
    	list-style: none;
    	margin: 0;
    	border-bottom: 1px dashed gray;
    	clear: both;
    	vertical-align: middle;
    	padding-bottom: 3px;
    	width: 190px;
    	height: 10px;
    	line-height: 10px;
    }
    #navlist .last {border-bottom: none;
    }
    .search_keys {
    	color: red;
    	float: right;
    	position: relative;
    	top: -10px;
    	right: 5px;
    	line-height: 10px;
    	vertical-align: top;
    	width: 25px;
    }
    
    -->
    </style>
    </head>
    
    <body>
    
    <div id="left_box">
    		<div class="title">Search Connectors</div>
    			<div class="content_corner">
    				<div class="content">
    				
    				
    				<ul id="navlist">
    				<li>in the same sentence <span class="search_keys">/s</span></li>
    				<li>in the same paragraph  <span class="search_keys">/p</span></li>
    				<li>within "n" terms of <span class="search_keys">/n</span></li>
    				<li>root expander <span class="search_keys">!</span></li>
    				<li>universal character <span class="search_keys">*</span></li>
    				<li>both words appear <br /> in a document <span class="search_keys">AND <span style="color: #000;">or</span> &amp;</span></li>
    				<li class="last">either word appears <br /> in a document <span class="search_keys">OR</span></li>
    				</ul>
    				</div>
    			</div>	
    </div>
    
    </body>
    </html>
    
    Thanks again!  Oh and I realized that position: absolute issue right after I had posted this message.  I was just messing around trying to see if *anything* would work.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    To get the appearance that you want try this:
    Code:
    #navlist li
    {
    	list-style: none;
    	margin: 0;
    	border-bottom: 1px dashed gray;
    	clear: both;
    	vertical-align: middle;
    	padding-bottom: 3px;
    	width: 190px;
    	/* height: 10px; */
    	line-height: 10px;
    	overflow: hidden; /* float containment */
    }
    .search_keys {
    	color: red;
    	float: right;
    	position: relative;
    	/* top: -10px; */
    	margin-right: 5px;
    	display: inline; /* IE 6 double float margin bug fix */
    	/* right: 5px; */
    	line-height: 10px;
    	vertical-align: top;
    	width: 25px;
    }
    while changing the order in the markup from this:
    Code:
    <li>in the same sentence <span class="search_keys">/s</span></li>
    to this (all places):
    Code:
    <li><span class="search_keys">/s</span>in the same sentence</li>
    With that said, a definition list may be more appropriate to use than a plain unordered list.

  • #5
    New Coder
    Join Date
    Aug 2005
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by koyama View Post
    With that said, a definition list may be more appropriate to use than a plain unordered list.

    .....well, I'll be a monkey's uncle. *smacks self in forehead*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •