/    Sign up×
Community /Pin to ProfileBookmark

2 questions, lists and fonts

Copy linkTweet thisAlerts:
Aug 05.2004

I have 2 seperate issues here.

1) I am creating an unordered list with an image as the bullet. I have everything working except that there is about a 10px margin between the text and the bullet.

the code looks like this

<ul style=”padding-left: 10px; margin-left: 10px; list-style-position: outside; list-style-image:url(‘images/personal_carat_small.gif’);”>
<li style=”margin-top:3px;”><a href=”#”>list Content</a></li>

Any suggestions on crowding the “list Content” to the bullet?

2) Which font-size properties work across browsers for 508 resize compatibility. I know mozilla will enlarge regardless of using px,pt, or relative fonts (small, medium, etc). Which ones work in IE? I need to be able to control the default size of the layout to try and match the design but need to account for 508. The relative fonts are not that friendly to control layout.

Thanks

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@johndoe190Aug 05.2004 — Use em's they usually are the best in my opinion i havent looked great at your code but you say you have a 10px margin thats probably bacuase of the <ul style="padding-left: 10px; margin-left: 10px; change it to less.
Copy linkTweet thisAlerts:
@MalasauthorAug 05.2004 — I changed the code to

<ul style="padding:0 0 0 1em; margin: 0 0 0 1em; list-style-position: outside; list-style-image:url('images/personal_carat_small.gif');">

according to a link posted on one of the other forums, the 1 em is supposed to align the bullet to the left of the UL bounding area. I am still getting about 3 pixels of indentation on the bullet and still have about 10px of space between the bullet and the content. Is there anyway to get rid of those spaces, particularly the space between the bullet and the text?
Copy linkTweet thisAlerts:
@MalasauthorAug 05.2004 — another question on the list elements.

Since I am using a graphical bullet, is there a way to have that image centered with the text instead of aligned top?
Copy linkTweet thisAlerts:
@LJKAug 05.2004 — Hi -

I usually use external styles, so that's how I'll show it -

Think if you tweak the image w/ css, you should be able to get what you want:

ul#leftnav{

existing styles:here;}

#leftnav li{

ditto:existing;}

#leftnav li img{

vertical-align:text-middle;

margin:0; padding-right:-5px;}

  • - - on the last, just change a padding length to increase or decrease spacing -

    at least I think so!


    • Good luck,

    El
    Copy linkTweet thisAlerts:
    @ray326Aug 05.2004 — DaveSW and I fiddled with this a few months ago so you can probably search for that thread. You can get very tight control of your graphical "bullet" by making it the background of the li.
    Copy linkTweet thisAlerts:
    @MalasauthorAug 05.2004 — I went looking for the post you mentioned and was unable to find it, could you point me in the right direction?
    ×

    Success!

    Help @Malas spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.16,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...