CSS style hover is causing a line break

Hello there,

I have a system in CSS that does show a rollover drop down menu when you roll over an image.

It works fine, but the text 'previous page' is causing a line break every time you rollover it.

Can someone help me with this ? this is live on our website www.joe-cool.co.uk/EN/home/home.cfm

You need to browse a couple of pages to display the rollover history.

Many thanks to anyone that can help me there.

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sudhindra A NCommented:
try changing code
<ul id="navPreviousPages">

<ul id="navPreviousPages" style='width:158px;'>

adam1hAuthor Commented:
Hi Ansudhindra,

Thanks for your quick reply. Not sure which line you are talking about, can you descibe a bit or give me a line number ?

Sudhindra A NCommented:
when you view source in the chrome the line number is 445

below the code, check this in your source file(s)....

<table width="910" align="center">
              <td class="Informal_text_dynamic" colspan="3">
                  <ul id="navPreviousPages" style='width:158px;'>
                        <li class"topfirst">
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

adam1hAuthor Commented:
hI AGAIN aNSUdhindra,

Mmhh, tried it, doesn't seem to work...

ANy ideas ?

Kim WalkerWeb Programmer/TechnicianCommented:
Firebug is reporting that there are 51 stylesheets attached to this page, all of which are named joecoolstyles.css from the same directory as the page. It appears that you have a <link> tag for each product item. I recommend you remove all but the one in the head.

There are also two separate <html> elements, each a complete page, in the source code. Only the last page is being displayed.

However, (back to the initial problem) all of those stylesheets contain a style for all the children of the <li> tag when it is in hover state and a similar style for all the children of any <a> tags in the <ul>. See below:
ul#navPreviousPages li:hover > * {
    cursor: pointer;
    display: block;
    visibility: visible;
    z-index: 30;
ul#navPreviousPages a:hover > * {
    cursor: pointer;
    display: block;

Open in new window

These style sheets are changing the left arrow <img> to a block element when you hover over the <a>. I'm not sure what you were after here, but I doubt this was intended. Be very careful when using the "all" (*) selector. I'm also not sure you can apply the hover pseudo selector to a <li> tag but that is beside the point.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
adam1hAuthor Commented:
Thanks a lot, it worked like a charm !

Many thanks again...spaghetti code was indeed the cause of this...

It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.