Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink
    Hi,

    I've got a CSS issue with Firefox (works fine in IE) I'm having trouble resolving. I'm using a little round "i" icon in my information sections, setting it using the CSS background-image property. For some reason the one at the top of this page [link removed] repeats below the text in Firefox when it shouldn't.

    If you expand some of the other sections / headings on the page you'll see that the problem doesn't occur anywhere else when the same style is applied.

    Any help, pointers, advice would be greatly appreciated.

    Cheers,
    Gavin.
    •  
      CommentAuthorbenjitastic
    • CommentTimeApr 9th 2008 edited
     permalink
    Hi Gavin,

    It might be caused by wrapping the list within the <span> tag.

    Try changing this line:
    <div class="in"><span class="info"><p>Please be aware [....] a few hours.</p>
    To this:
    <div class="in"><span class="info"><p>Please be aware [....] a few hours.</p></span>
    and remove the </span> tag after the list

    That may fix it visually. But, you shouldn't be wrapping block-level elements within a <span> tag.

    Hope that helps,
    Ben
  2.  permalink
    Hi Ben,

    Swapping out the spans for divs did the trick. I wasn't aware of limitations with span tags.

    Cheers for that,
    Gavin :)

    P.S. Change isn't live, but tested in dev environment successfully.
    • CommentAuthorjz1108
    • CommentTimeApr 10th 2008
     permalink
    Another solution:
    Remove any whitespaces between </ul> and </span>.
Add your comments
    Username Password
  • Format comments as (Help)