Moving <li> onto new line

HTML & CSS
1

Site in question

Can someone see a quick & easy way of moving the ‘Design & Print’ option in the <ul> onto a new line, so it sits under ‘home’? Is there a tidier way of wrapping the top/bottom lines in seperate divs?

Thank you.

2

havn’t tried this… but if you float all the li’s to the left you may be able to add a clear:left to the deign & Print li, dropping it onto the new line

3

Yes - remove the display: inline and replace it with float: left - then you can clear that item (or alternatively, apply a width to the UL so that the items have to wrap).

4

Ok now I’m confused.

Home Page

I tried that and it seemed to work fine in Firefox, then looked at it in IE and the promotion <li> seems to have shifted order!

Can anyone please help again…:blush:

5

Hi,

Although you have cleared one list item IE doesn’t agree that following list items should also be cleared and will stack as many as it can on the line above. IE needs a 100% width clearer to make it start on a new line.

Therefore instead just break it into 2 lists as follows.


#header ul.sub{margin:0!important;}



        <ul>
            <li class="no-bg"><a href="index.html" title="Home">Home</a></li>
            <li><a href="contact-us.html" title="Contact Us">Contact Us </a></li>
            <li><a href="links.html" title="Links">Links </a></li>
       [B] </ul>
        <ul class="sub">[/B]
            <li [B] class="no-bg"[/B]><a href="design-print.html" title="Design &amp; Print">Design &amp; Print </a></li>
            <li><a href="promotion.html" title="Promotion">Promotion</a></li>
            <li><a href="web.html" title="Web Solutions">Web Solutions </a></li>
        </ul>
6

Thats fixed it. Paul, you’re a star. THANKS.

:drinky: