• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 247
  • Last Modified:

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.

Adam
0
adam1h
Asked:
adam1h
  • 3
  • 2
1 Solution
 
ansudhindraCommented:
try changing code
<ul id="navPreviousPages">

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

0
 
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 ?

thanks
Yves
0
 
ansudhindraCommented:
when you view source in the chrome the line number is 445
or

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

<body>
<table width="910" align="center">
 
            <tr>
              <td class="Informal_text_dynamic" colspan="3">
                        
                  <ul id="navPreviousPages" style='width:158px;'>
                        <li class"topfirst">
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
adam1hAuthor Commented:
hI AGAIN aNSUdhindra,

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

ANy ideas ?

Thanks
Adam
0
 
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.
0
 
adam1hAuthor Commented:
Thanks a lot, it worked like a charm !

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

Adam.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now