...

View Full Version : Text going over image - only chrome browser



listerdl
04-21-2011, 11:59 PM
http://www.georgedalziel.com/imageissue.png

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....


<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!!

Nile
04-22-2011, 01:19 AM
: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

listerdl
04-22-2011, 01:21 AM
thanks

Nile
04-22-2011, 01:30 AM
No problem!
Try this out:


.company_trainging {
list-style-type: url('images/bulletpoint.png');
}
.company_training li.no_bullet {
list-style-type: none;
}



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

listerdl
04-22-2011, 03:33 PM
thanks for that - in fact i think this is correct:


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)

Nile
04-24-2011, 03:30 AM
Yeah - the bullet will be replaced with the given image.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum