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=http://www.webdeveloper.com/forum/archive/index.php/"#">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.
ThanksUse 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.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?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?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,
ElDaveSW 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.I went looking for the post you mentioned and was unable to find it, could you point me in the right direction?http://www.webdeveloper.com/forum/showthread.php?s=&threadid=23955
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=http://www.webdeveloper.com/forum/archive/index.php/"#">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.
ThanksUse 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.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?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?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,
ElDaveSW 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.I went looking for the post you mentioned and was unable to find it, could you point me in the right direction?http://www.webdeveloper.com/forum/showthread.php?s=&threadid=23955