Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    <ul> bullet won't align properly

    I'm using this CSS to display a <ul> with bullets

    Code:
    #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..
    Last edited by canadianjameson; 05-18-2005 at 05:21 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    Code:
    #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:
    Code:
    	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.
    Code:
    list-style: url(images/bull.gif) none outside;
    Worked for me but I could be wrong. Google for the specs.

    Hope that helps.

    MattyUK

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I tried doing this but it didnt work:

    Code:
    #descriptions ul ul {
      list-style: url(images/smallBull1.gif) none outside;
      margin:0px;
      vertical-align: middle;
    should i somehow be doing this:
    Code:
    #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/cs...cal-align.html
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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:
    Code:
    #descriptions li,#descriptions ol {
    	vertical-align: middle;
    }
    OR
    Code:
    #descriptions ul li,#descriptions ul ol {
    	vertical-align: middle;
    }
    OR
    Code:
    li,ol {
    	vertical-align: middle;
    }
    OR
    Code:
    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:

    Code:
    #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
    Last edited by MattyUK; 05-18-2005 at 08:31 PM.

  • #5
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #7
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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.

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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

    hey, it worked
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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

  • #11
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #12
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    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

  • #13
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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 )

    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

    Jameson
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •