SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why bg image in <span> tag doesn't appear in IE?

    hi there

    check the code below. Firefox displays everything perfectly (the bg image appears as expected). In ie, there's just a blank space... why is that?



    css:
    Code:
    #header span {
        padding-left:10px;
        margin-right:10px;
        background-image:url(images/separation.gif);
        background-repeat:no-repeat;
        background-position:bottom right;
    }
    markup:
    Code:
              <a href="#" title="Plan du site">Plan du site</a>
                <span> </span>
                <a href="#" title="Aide">Aide</a>
                <span> </span>
                <a href="#" title="Recherche">Recherche</a>

  2. #2
    SitePoint Enthusiast Kiddeath91's Avatar
    Join Date
    Jan 2003
    Location
    Columbus, Ohio USA
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You need to declare a height and width.

  3. #3
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kiddeath91
    You need to declare a height and width.
    Actually - no. 'span' doesn't accept width or height values as it's an inline element.

    jjshell,
    It looks like you're marking up some kind of menu. Why not try a ul?
    I think something like this might work for you (I'm guessing that your 'separator' image is 10px-wide...?) :

    Code:
    <style type="text/css">
    ul {
    background-color:#663366;
    }
    li {
    float:left;
    list-style-type:none;
    background-image:url(images/separation.gif);
    background-repeat:no-repeat;
    background-position:bottom right;
    padding-right:10px;
    }
    </style>
    ...
    <ul>
    <li><a href="#" title="Plan du site">Plan du site</a></li>
    <li><a href="#" title="Aide">Aide</a></li>
    <li><a href="#" title="Recherche">Recherche</a></li>
    </ul>
    I hope this helps.

  4. #4
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    worked great Bon Rouge, thank you very much *must spread more rep*

    just one more question. I applied the same technique to a vertical list. The bg image is displayed properly everywhere but in ie.

    Code:
    #left ul {
        margin-top:30px;
    }
    
    #left li {
        font-size:120%;
        list-style-type:none;
        background-image:url(images/square.gif);
        background-repeat:no-repeat;
        background-position:bottom left;
        padding-top:10px;
        padding-left:10px;
    }

  5. #5
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi
    the holly hack should fix it:

    Code:
    * html #left li {height:1%;} /*holly hack for ie only, otherwise images won't appear*/

  6. #6
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    worked like a charm

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Without putting something between the <span> and </span> tags, span won't do anything, it's just a multi purpose tag.

    The way you have it, you're applying the #header span{ rule to nothing.

    <span> Theirs nothing in here for the rule to apply to</span>

    You might want to use <span class="yourrule">your element</span>

    You have to enclose the element you want the rule applied to within the <span> and </span> tags, else you're applying a rule to an empty tag.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •