Hi, Looking for a bit of help with this one: http://www.crowncurrencyexchange.com/design/index.php in the box on the right, the bullets of the unordered list are coming out of the border! Why is this? I have fiddled with the padding and margins. What else could I try? CSS file: http://www.crowncurrencyexchange.com/design/style.css in particular: #details { font-size: 12px; border: 1px #645D41 solid; padding: 4px; } Thanks in advance Notting
Well first, I have no idea why, but I always need to reset my list margins and paddings even after the * reset... After that, looking at the page in m y crappy old browser with no fonts, it looks like there really isn't enough room for the bullets. Like, you'd have to make #details wider, or the font smaller (which you don't want). In the meantime, you could try list-style-position: inside; which moves the bullets right up against the first word (no matter what padding you set... this can look pretty bad in IE I think it is... too close to the first word I think). Next trick could be to set the text-align to the right, to help make room for the bullets. Otherwise, setting the padding and margins on the li's to zero... you really have to look at them in all browsers, cause it always looks okay in one and crap in another. I usually have this in my css: * { margin: 0; padding: 0; } ul, li { margin: 0; padding: 0; list-style: none; } Of course since you want the bullets you wouldn't have the list-style:none thing. But it's the only way I can guarentee no margins or paddings left on the lists.
Well now wait a minute, the ul was the better idea... with the br's, you don't have the bullets... so, why not just keep the (more semantic) ul and remove the bullets? ul, li { list-style: none; } Viola.