Repositioning bullets in CSS? 1

[danielh68]

Hi,

I have this site I'm designing and I ran into this little irksome problem. When I create a list the list will indent 10 or more pixels. I wish to change this so that it is more closer to the left side of the box. Here's a visual:

This like is a snapshot of what it looks like now,

http://www.allrightinc.com/images/allright1.jpg

This is a Photoshop doctored file depicting the way I want it to look like,

http://www.allrightinc.com/images/allright2.jpg

This is my CSS code:

.testimonialBox {
list-style-position: outside;
width: 185px;
background-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 20px;
color: #003366;
list-style-type: disc;
padding: 0px 0px 0px 0px;
}

Any possible solutions? I really appreciate anyone's expertise in the matter.

Thanks,
Dan

 

[ChrisHirst]

margin:0px 0px 0px -10px; would work




Chris.

Indifference will be the downfall of mankind, but who cares?

 

[danielh68]

Thanks for your input, I appreciate it.

Although, it seems like it should work, it's somehow failing on my end. The bullets refuse to move from their current position. I've tried 2px to 20px and everytime I preview, they're still in the same spot. Any other suggestions will be greatly appreciated. Thanks.

.testimonialBox {
width: 185px;
background-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 20px;
color: #003366;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px -10px;
}

 

[danielh68]

This is just an observation I made, it may or may not be worthy of mentioning. In DW, after I create the CSS, I generally select the text from the .testimonialBox and then click the "unordered lists" from the properties palette. I'm beginning to think this isn't necessary, because this is what I'm telling CSS to do. Perhaps, the propertied palette is over-riding the CSS settings? It seems like that maybe true, although when I deactivate the "unordered lists" from the properties palette, there are no bullets present...even when previewed through a browser. Hmmm, still don't know what I'm doing wrong.


.testimonialBox {
width: 185px;
background-color: #CCCCCC;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 20px;
color: #003366;
padding: 0px;
margin:0px 0px 0px -10px;
list-style-position: inside;
list-style-type: disc;
}

 

[ChrisHirst]

No idea, I don't use the WYSIWYG errmm 'Feature' but it's quite likely. Any in-line styles will override the style sheet

check in the code view, all that should be in the tag should be the class.

e.g.
<ul class="testimonialBox">
<li class=testimonialBox">
etc

post a link to the problem page rather than a screen shot it will be easier to diagnose.



Chris.

Indifference will be the downfall of mankind, but who cares?

 

[danielh68]

Hi Chris,

Thanks again for your help. You can view the pages here:

http://www.allrightinc.com

The "in the news" section on the home page uses the testimonialBox style. I've made sure there are no inline stuff happening.

The style sheet itself can be found at:

http://www.allrightinc.com/pages/css.htm

Bare in mind, I'm fairly new to CSS. I've just started using them recently. They've helped a great deal, despite this one little nagging problem, which is probably to do with my inexperience in the matter. Anyhow, any ideas are sincerely welcomed. --Dan

 

[ChrisHirst]

Ok confused me for a while as the text was in <p> tags in a cell.

you need to add the style to the <ul> tag rather than to the containing <td>.
It's all down to 'block' and 'in-line' elements and inheritance. Because <ul> is a block element, the style of a <td>(in-line) will not cascade down to it.
But the style of a block element as a container will cascade in both block and in-line elements inside it. So had the container been a <div> it would have worked ok.

<ul class="testimonialbox">
     <li>adfasdf asdfasdf adfasfd asdfasdf adfa dfadsf adfadsf adfasdf
     <li>afdafds adfgasdg agfdhg adfa a adfasdfa afdga
</ul>

simplest way is if in doubt set the style directly to the tag you want it to apply to.



Chris.

Indifference will be the downfall of mankind, but who cares?

 

[danielh68]

Chris,

That did the trick! Thank you, immensely. That issue gave me tunnel vision, I couldn't focus on anything else until it was resolved. Thanks again for your expertise!