Hi anybody solve my problem with images hspace in <ul> <li>
When i use images with LI the bullet points are cannot see in IE and Overlapping in Firefox

To see http://www.goalsettingthatworks.com/demo/index.html

mycode:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beijing Attractions</title>
<style>
#IPbody {
    font-size: 11px;
    color: #444444;
    width:500px;
    font-family: verdana, Arial, Helvetica, sans-serif;
    line-height:14px;
    margin:0px;
    padding:0px;
    display:block;
    float:left;
    overflow:hidden;
}

#IPbody ul{margin:0px 0px 0px 30px;}
#IPbody ul li{padding:0px 0px 5px 0px; list-style:disc;}
</style>
</head>

<body>
<div id="IPbody">
<img src="beijin.jpg" alt="" width="205" height="215" hspace="10" vspace="3" align="left" />
The starting point in doing business in Singapore is usually a decision on the   type of entity that is best suited to the needs of the owners and other factors,   such as: <br />
<br />
<ul>
  <li>Ownership and control </li>
  <li>Taxation </li>
  <li>Legal exposure and risk </li>
  <li>Compliance </li>
  <li>Ease of formation and exit. </li>
</ul>
</div>
</body>
</html>

Recommended Answers

All 3 Replies

By making two separate divs and floating them left I was able to achieve the desired effect.

I did not adjust any of your other coding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beijing Attractions</title>
<style>
#IPbody {
	font-size: 11px;
	color: #444444;
	width:500px;
	font-family: verdana, Arial, Helvetica, sans-serif;
	line-height:14px;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
	overflow:hidden;
}

#IPbody ul{margin:0px 0px 0px 30px;}
#IPbody ul li{padding:0px 0px 5px 0px; list-style:disc;}
</style>
</head>

<body>
<div id="IPbody" style="width:235px; float:left;">
<img src="beijin.jpg" alt="" width="205" height="215" hspace="10" vspace="3" align="left" />
</div>
<div style="float:left">
The starting point in doing business in Singapore is usually a decision on the   type of entity that is best suited to the needs of the owners and other factors,   such as: <br />
<br />
<ul>

  <li>Ownership and control </li>
  <li>Taxation </li>
  <li>Legal exposure and risk </li>
  <li>Compliance </li>
  <li>Ease of formation and exit. </li>
</ul>
</div>

</body>
</html>

list-style-type: none;

Hi Jamison,

Thank you very much for your reply. I will try that.


By making two separate divs and floating them left I was able to achieve the desired effect.

I did not adjust any of your other coding.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Beijing Attractions</title>
<style>
#IPbody {
	font-size: 11px;
	color: #444444;
	width:500px;
	font-family: verdana, Arial, Helvetica, sans-serif;
	line-height:14px;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
	overflow:hidden;
}

#IPbody ul{margin:0px 0px 0px 30px;}
#IPbody ul li{padding:0px 0px 5px 0px; list-style:disc;}
</style>
</head>

<body>
<div id="IPbody" style="width:235px; float:left;">
<img src="beijin.jpg" alt="" width="205" height="215" hspace="10" vspace="3" align="left" />
</div>
<div style="float:left">
The starting point in doing business in Singapore is usually a decision on the   type of entity that is best suited to the needs of the owners and other factors,   such as: <br />
<br />
<ul>

  <li>Ownership and control </li>
  <li>Taxation </li>
  <li>Legal exposure and risk </li>
  <li>Compliance </li>
  <li>Ease of formation and exit. </li>
</ul>
</div>

</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.