Forum Moderators: not2easy
I'm trying to setup a list, where there is an image with text next to it (Item Name), and under that text is a sub-list (Item Features). I want the sub-list to be under the text (Item Name) and not to wrap around the image.
The problem is that in Firefox 2 the first 2 elements of the sub-list are double indented and the remaining are indented only once.
Other browsers (Firefox3, Safari, IE6, IE7) show the sub-list in a vertical straight line.
Here is my code:
<!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>
<STYLE type="text/css">
#list img {
float: left;
padding: 0px;
margin: 0px 8px 0px 0px;
border: 1px solid #000;
width: 48px;
height: 35px;
}
#list ul li {
padding: 1px 0px 0px 0px;
margin: 20px 0px 0px 0px;
2border: 1px solid #FFFF00;/* Yellow */
}
#list ul li ul {
padding: 0;
margin: 0px 0px -20px 0px;
}
#list ul ul li {
list-style-type: disc;
font-weight: normal;
font-size: 9pt;
color: #000;
padding: 0px;
margin: 0px 0px 0px 80px;
}
</STYLE>
</head>
<body>
<div id="list">
<ul>
<li><img src="img.jpg">Item 1 Title
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
<li>Feature 4</li>
</ul>
</li>
<li><img src="img2.jpg">Item 2 Title</li>
<li><img src="img3.jpg">Item 3 Title
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Welcome to WebmasterWorld!
First, you might wish to validate your document. I loaded up your code to create a test page, and your page isn't validating.
<style type="text/css">...</style>
In the above, your word style should not be in caps, but in all lower case letters.
Also, your img tag is what is called a self closing element. You haven't closed it. to do so you will need to do this:
<img src="img.jpg" alt="imgjpg"/>
See how there is a space then the closing bracket?
Next, you need to put the alt attribute in your image code. The alt stands for alternative text. If a browser can't see the image, or someone is using a screen reader, this will let them know what the image is.
These are just a few things that showed up on the validator.
Fix these issues and see how your page works, and if you have any questions after you validate, please post them for us to see.
4~css~
