Aligning text with icons in inline lists?

programming web dev
1

Edit: Solved (refer to post #5)

I can’t figure out which pseudo class or any class/id for that matter to make my text position a little higher with my icons (centered horizontally)… Does anyone know if this is easily remedied? I’ve looked through a couple tutorials on it and a ton of forum posts but they never mention this for some reason.

Temp:
http://webs.ashlandctc.org/csimmons/sites/PRetty/pages/clean_help.htm
http://webs.ashlandctc.org/csimmons/sites/PRetty/pages/pretty_default.css


#nav {
    font-size:12px;
    letter-spacing:2px;
    font-weight:bold;
    text-transform:uppercase;
    padding:5px;
}
#nav ul {
    padding:0px;
    margin:0px;
}
#nav li {
    display:inline;
}
#nav ul li a {
    margin-bottom:25px;
}

Thanks in advance.

@Nobody/Simp - (don’t beat me!)

2

The easiest way to fix this is to just add a few pixels of padding to the tops of your images…

3

I assigned all those icon images to the class “nav_icons” and padding-top:5px; their ***. Nada. :frowning:

4

No no, add padding to the images themselves… in Photoshop (or whatever image editting software you use).

5

Nah, I want text and icons.
I’ve wanted to know how to do this forever anyway.

I figured it out. If you add a class to your icons (“nav_icons”), positive:relative; top:5px; works.
:slight_smile:

The best part was, my boss came in to help me, sat down and started doing it and it came to me, I suggested he tried that, he tried two other things and ignored me, then tried that and it worked. :lol:

6

W1sh,

Just wondering if your solution is working on all (new) browser and IE 6?

7

[QUOTE=thats all folks;2352046]W1sh,

Just wondering if your solution is working on all (new) browser and IE 6?[/QUOTE]
I don’t know. I’m working on another site now, when I get back to that one I’ll figure out a better way to do that which will be compatible with all browsers.

As far as IE6 goes, I don’t care what it does. Screwy thing… I’m gonna start redirecting people to mozilla if that browser sees my page. :asleep: