...

View Full Version : <ul> bullet won't align properly



canadianjameson
05-18-2005, 05:16 PM
I'm using this CSS to display a <ul> with bullets



#descriptions ul {
list-style:none outside url(images/bull.gif);/* a relative path would be better -- I had to use an absolute path while playing with it */
padding:1px 0px 1px 15px;
margin:5px 0px 2px 0px;
}


the issue is that for some reason the bullet doesnt seem to align vertically with the text... it appears slightly raised. is there a CSS way to fix this or should I just edit the bullet-graphic to make it look right?

you can see it at www.enviromark.ca/english/products.html --> onmouseover a Company name and view the bullets corresponding to the products

if you notice, the bullets for the company's are aligned properly... but I didnt use CSS for those just tables..

MattyUK
05-18-2005, 07:34 PM
#descriptions li,#descriptions ol {
vertical-align: middle;
}

Should give you a head start.

Check out the vertical align CSs property for the list elements. Can even use % values. Lots of control with other preset values too.

I think the url problem is in the shortcut order:

Try specifying them seperately to avoid this:

list-style-position: outside;
list-style-type: none;
list-style-image: url(images/bull.gif);

If you must use a shortcut then double check the order, I think that the url has to go first then none then the outside value.

list-style: url(images/bull.gif) none outside;
Worked for me but I could be wrong. Google for the specs.

Hope that helps.

MattyUK

canadianjameson
05-18-2005, 08:03 PM
I tried doing this but it didnt work:



#descriptions ul ul {
list-style: url(images/smallBull1.gif) none outside;
margin:0px;
vertical-align: middle;

should i somehow be doing this:


#descriptions ul ul {
list-style: url(images/smallBull1.gif) none outside vertical-align: middle;
margin:0px;

?

i was using this as my reference: http://www.htmlhelp.com/reference/css/text/vertical-align.html

MattyUK
05-18-2005, 08:28 PM
Nope the CSS is being applied to the wrong tag.

You are/were applying it either to the UL tag or a UL tag within a UL tag.

A list is made up of <ul> tag containing either <li> tags OR <ol> tags. All properly closed as you'd except.

Use this:

#descriptions li,#descriptions ol {
vertical-align: middle;
}
OR

#descriptions ul li,#descriptions ul ol {
vertical-align: middle;
}
OR

li,ol {
vertical-align: middle;
}
OR

ul li,ul ol {
vertical-align: middle;
}

Do you see what I am getting at? Use CSS to apply the vertical-align value to LI or OL tags not the UL tag. The refference link you posted tells you that it is not inherited. Meaning whatever you set for UL is ignored by the LI/OL and the default value is used insted.

The code you posted above was also missing its closing } bracket.

So on a plate assuming an unordered list:


#descriptions ul {
list-style:url(images/bull.gif) none outside;
padding:1px 0px 1px 15px;
margin:5px 0px 2px 0px;
}
#descriptions li {
vertical-align: middle;
}

Hope that helps but more importantly: do you understand why now? ;)

MattyUK

canadianjameson
05-18-2005, 09:37 PM
heheh. well i understand what i was doing wrong... unfortunantly the result hasnt changed :(

i tried all the codes you provided and much to my chagrin... no luck

maybe you can determine whats goin wrong:
www.enviromark.ca/english/products.html

#descriptions is the <div> that the onmouseover links get loaded into

canadianjameson
05-18-2005, 09:51 PM
on a complete whim i'll ask you this... if you onmouseover the companies Strongwell and Misc. you'll notice that the link to "Page 2 >" shifts up and down by a few pixels.... is there any way to "pin" it to the bottom... because right now i'm using multiple <br>'s... but they dont always align properly

MattyUK
05-18-2005, 11:24 PM
It's too messy.

You have a text size of 10pts, the image is 6x6pixels and the li has default margins on it. The bullet is lined up relative to the line height and your margins, paddings and font sizes determine that. You specify pixels in some places and points in another. They all influence each other. Thus I am not too surprised the middle attribute isn't lining up perfectly first try. My goal was to let you know that was the bit to start playing with.

I've had this problem before when I was learning.

I suggest you copy the code for this page
http://www.realworldweb.co.uk/canadianjameson.htm
and tinker. set the font sizes up and down, remove the margins/padding alter the values. Discover how it works. It always works until you put an image in. The image however starts displaying where it is supposed too. if you set it at top the top of the image starts at the top if at 50% the top of the image starts at 50% the line height. So it can be fine tuned with experimentation.

So thinking about it. 10 points equals #?# pixels?
It makes it hard to position a image in pixels by a using percentage, when the percentage is relative to the line height, which is determined by mixture of points, pixels a, margins and paddings values.
Its kinda hard, so I won't try.

On that sample page you can set the line height and other attributes to default values (remove them) then start adding them in and see where it goes.

If the line height value was known and you have the image value the logic I guess would go something like this:
work out the percentage of line height value to each pixel. times this by 50% of the bullet height (in this case 3 pixels) and subtract that percentage value from 50 to get the percentage value to get it to line up at that line height with that bullet. At least in theory.
Confusing??.... yup it is. Hence a tidy up might be in order. Perhaps try to get it right on a single page with nothing else going on first.

However you will find it is a lot of hassle. I did.

I suggest. Using a standard font size and line height for the li or cheating and making the image the same height as the line you need it to display in or not expecting pixel perfect rendering when mixing it up like this.

As it is the page defines multiple font sizes and of different values px to pts and so on. the padding and margins can also effect line height in some browsers. Best to strip out the bits you want to work get them working in isolation then put back into your main page and work out what is effecting it.


Sorry it is not an easy answer for you.

(I also suspect the browsers are rounding up percentage values to the nearest ten, kept annoying me.)

Hope this input helps. Hope someone can correct me if I am wrong.

MattyUK
05-18-2005, 11:29 PM
I'll leave the page 2 point to another kind soul. I need sleep now. The CSS/page is very mes**.. I mean very busy and would take some treading through to pick up. It;s not a simple layout you are attempting but I suspect it could be done with simplier code. Good luck.

canadianjameson
05-19-2005, 12:36 AM
Thanks for all the explanations. I will rework my code when i have a minute... for now i just decided to up with height of the images in photoshop :D

hey, it worked :p

MattyUK
05-19-2005, 10:10 AM
Hi

I have to smile, thats the exact same thing I did to get them to work when I did my first CSS heavy site. Kind of a standard cheat. I've seen it around a lot.

It's all a learning curve. Sometimes its fun too.

One other trick I've used in the past was to remove the bullet alltogether. Set padding on the li and use the graphic as a background, no repeat, placed left and vertically centered.

Perhaps that is a neater way that the image resize. I used the 2nd approach when I needed the bullet to be used elsewhere and was never going to have two images of the same image just different sizes.

Glad the input helped you tread a learning curve. I was half hoping someone was going to ride to our rescue and let us know of a better solution.

MattyUK

canadianjameson
05-19-2005, 04:28 PM
Hehe Matty, there was no need for anyone else to chime in... you gave me all the information I needed and then some. You're a very good teacher and I appreciated being your students for that breif glimmer.

you should consider teaching, you seem to have the disposition for it.

Thanks again,

Jameson

MattyUK
05-19-2005, 06:14 PM
Hi

Thanks for your kind words. I'd like too but have no idea where to start on that front. For another time I think.

Cheers. Feel free to post/PM me if you get stuck again. A thank you makes all the difference.

MattyUK

canadianjameson
05-19-2005, 06:25 PM
You are now the newest addition to my Buddy list (you know, for those late night CSS C-R-A-V-I-N-G-S :D)

Thanks, I'll definitely send some questions your way.

Cheers. Oh, and good advice rarely comes cheap; I hope you start paying yourself more!

heeeehehe, had to - sorry :p

Jameson



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum