Forum Moderators: not2easy
I was wondering if someone could help me with
joining bullets closer to div start....
now it's like this....
li{ list-style-type: bold; padding: 0; margin-left: 36px;}
DIV.p { font-family: verdana; font-size: 10pt; color: #9c9c63; text-align: left; text-indent: 20px;}
no matter what values i put in - they stay away and apart from each other.
[edited by: swa66 at 11:24 am (utc) on Oct. 8, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
It could be any of several things working against each other.
My recommendation is to strip the HTML and CSS down to the problem itself. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
..................
That said:
Without the HTML markup, it's hard to know exactly what factors to account for.
1) Usually best practice to remove margin and padding from lists and list items, then style to your needs. Browsers have their own defaults for these, so best to zero out, and start fresh.
ul, ol, li {
margin: 0; padding: 0;
}
..................
2) DIV.p {
This is declaring a class named p within a <div> container. I'm not saying that it can't be done, and would not work, but it is a bright red flag of potential trouble. The HTML would have to be:
<div class="p">
Yadda, yadda, yadda
</div>
I am concerned that the HTML and CSS both have problems. Have you validated the the markup for each?
[w3.org...]
Find the HTML Validator and CSS validator links.
..................
3) You have not specified a valid value for list-style-type: property. Bold is not acceptable.
W3C - Lists [beta.w3.org]
4) joining bullets closer to div start....
The sample below validates and works. A couple of notes:
A) You cannot, with this markup, put {margin: 0;} on the <ul>, or IE will blow up the list-style-type: - You can however, manipulate the margin for the selector.
B) To move the positioning of the bullets (squares in this sample), simply manipulate the padding-left: on <li>. I have moved the text away from them, so that you can play with moving them in.
C) Note that this is but one option to address the question that I think you are asking. I may not have enough information, but there should be enough information for you to proceed.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.list-container {
margin: 6em; padding: .4em; width: 50%; font: 1em; Verdana, sans-serif; color: #9c9c63; border: .1em solid #000;
}
.list-container ul {
}
.list-container ul li {
list-style-type: square; padding-left: 2em;
}
</style>
</head>
<body>
<div class="list-container">
<ul>
<li>
LIST ITEM 1
</li>
<li>
LIST ITEM 1
</li>
<li>
LIST ITEM 1
</li>
</ul>
</div>
<!--##########
joining bullets closer to div start....now it's like this....
li{ list-style-type: bold; padding: 0; margin-left: 36px;}
DIV.p { font-family: verdana; font-size: 10pt; color: #9c9c63; text-align: left; text-indent: 20px;}no matter what values i put in - they stay away and apart from each other.
-->
</body>
</html>
Thank you once again.
