Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2011
    Posts
    164
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Text going over image - only chrome browser



    In this image - which is a screenshot of Browser, (and windows 7) this simple code is placed on top of the images, which are buller points.

    Any idea why this is?

    The only happens in Chrome....

    Code:
    <img src="images/bulletpoint.png" align="left"/>Live Instructor Led Webinar <strong><span style="background: none repeat scroll 0% 0% rgb(253, 240, 1);">(Up To 100 Students)</span></strong><br />
    
    <img src="images/bulletpoint.png" align="left"/>Our Pass Guarantee<br />
    
    <img src="images/bulletpoint.png" align="left"/>Access to our Virtual Learning Environment, including a 200 Page <br />
    <img src="images/bulletpointblank.png" align="left"/>Course Presentation, Definitions Glossary and Calculator<br />
    Thanks!!

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    :facepalm: This is really why we have the <li> element.

    http://www.w3schools.com/html/html_lists.asp
    http://www.w3schools.com/css/css_list.asp

  • #3
    Regular Coder
    Join Date
    Mar 2011
    Posts
    164
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks

  • #4
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    No problem!
    Try this out:
    Code:
    .company_trainging {
        list-style-type: url('images/bulletpoint.png');
    }
    .company_training li.no_bullet {
        list-style-type: none;
    }
    Code:
    <ul class="company_training">
    	<li>Live Instructor Led Webinar <strong><span style="background: none repeat scroll 0% 0% rgb(253, 240, 1);">(Up To 100 Students)</span></strong>
    	<li>Our Pass Guarantee</li>
    	<li>Access to our Virtual Learning Environment, including a 200 Page</li>
    	<li class="no_bullet">Course Presentation, Definitions Glossary and Calculator</li>
    </ul>

  • Users who have thanked Nile for this post:

    listerdl (04-22-2011)

  • #5
    Regular Coder
    Join Date
    Mar 2011
    Posts
    164
    Thanks
    7
    Thanked 0 Times in 0 Posts
    thanks for that - in fact i think this is correct:

    Code:
     list-style-image:
    thanks all the same though!!

    (Please correct me if I am wrong though - but it does seem to render the images as a bullet)

  • #6
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Yeah - the bullet will be replaced with the given image.


  •  

    Posting Permissions

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