New line instead of <br/>

Discussion in 'CSS' started by DylanM, Oct 22, 2009.

0
  1. #1
    Hi all,

    This is a fairly straight forward problem but I cannot for the life of me figure it out. Ive tried everything.

    I would like to separate text on two lines using css. Its for a jquery menu that uses javascript to produce sub categories when hovered over... so here is all the css relating to the menu..

    /* Dropdown Category Navigation */
    .sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;font:normal 14px Arial,sans-serif;text-transform:uppercase;}
    .sf-menu {line-height:1.0;height:31px;background:transparent;}
    .sf-menu ul {;position:absolute;top:-999em;width:10em; /* left offset of submenus need to match (see below) */}
    .sf-menu ul li {width:100%;}
    .sf-menu li:hover {visibility:inherit; /* fixes IE7 'sticky bug' */}
    .sf-menu li {float:left;position:relative;}
    .sf-menu a {display:block;position:relative;color:#666;}
    .sf-menu li:hover ul,.sf-menu li.sfHover ul {left:120px;top:0px; /* match top ul list item height */z-index:150;}
    ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {top:-999em;}
    ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:0;}
    ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {top:-999em;}
    ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */top:0;}
    .sf-menu {float:left;margin:0;width:100%;}
    .sf-menu a { border-right:1px dotted #d7d7d7;padding: 8px&#160; 10px;text-decoration:none;color:#666;} /* Design for the dropdown links */
    .sf-menu a, .sf-menu a:visited&#160; { /* visited pseudo selector so IE6 applies text colour*/color:#0066cc;}
    .sf-menu li {background:transparent;color:#666;}
    .sf-menu li li {background:#fff;}
    .sf-menu li li li {background:#fff;}
    .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {background:#d7d7d7;outline:0;color:#0066cc;} /* Background = Link background colors when the mouse is over them */
    .sf-menu li.current-cat a{background:#070707;color:#0066cc;}
    .sf-menu li.current-cat a:hover{background:#666;color:#ccc;}    ​

    I have no idea why it is so much, but there it is. Its a drop down menu.

    Any help would be appreciated. Thanks
     
    DylanM, Oct 22, 2009 IP
  2. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Sorry but i'm a bit confused on what exactly you are looking for here? You would like to seperate what text on 2 lines, do you have any HTML to post?
     
    wd_2k6, Oct 23, 2009 IP