child position problem 2px lower than parent

[parbilo]

Hi,

I have a problem with the following CSS. I am trying it on WAMP and the seperator picture keeps comming up 2 pixels lower than the left middle and right pictures (all the png files are 16px tall, I already checked this)

I have the following menu.css:

table.user3_pill {
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
}

td.user3_pill_l {
background: url(../images/style/user3_pill_l.png) no-repeat;
width: 10px;
height: 16px;
margin: 0;
}

td.user3_pill_m {
background: url(../images/style/user3_pill_m.png) repeat-x;
width: auto;
padding: 0;
margin: 0;
}

td.user3_pill_r {
background: url(../images/style/user3_pill_r.png) no-repeat;
width: 11px;
height: 16px;
margin: 0;
}

#user3_pillmenu {
white-space: nowrap;
height: 16px;
float: left;
margin: 0;
padding: 0;
}

#user3_pillmenu ul {
margin: 0;
padding: 0;
list-style: none;
}

#user3_pillmenu li {
float: left;
background: url(../images/style/user3_pill_s.png) top left no-repeat;
height: 16px;
margin: 0;
padding: 0;
}

#user3_pillmenu a {
display: block;
padding: 0px 5px 0px 6px;
line-height: 16px;
}

#user3_pillmenu a:link {
text-decoration:none;
font-family: Arial Black, Gadget, sans-serif;
font-size: 14px;
text-align: center;
color: #000000;
}

and i have the following index.html:

Item One Item Two Item Three Item Four

the user3_pill_s.png image shows up 2 pixels below the pill_l, pill_m and pill_r images.

I simplified the problem to these two files and the four images

Can someone please tell me why the pill_s image is lower than the other images.

[parbilo]

html:

Item One Item Two Item Three Item Four

[karlpcrowley]

Hey, Can you highlight your code then press the code button to escape the HTML
looks like some of it is missing

[parbilo]

here is the html:

 








Item One





Item Two





Item Three





Item Four








 

[parbilo]

Here are the image files on FileSwap.com:

user3_pill_s.png

user3_pill_r.png

user3_pill_m.png

user3_pill_l.png

here is the complete index.html:

 








Item One





Item Two





Item Three





Item Four








 

the test site in in folder test under www in wamp

the images are in ./test/images/style

this menu.css is in ./test/css

that is the complete site.

for some reason I can not figure out, the seperator (pill_s.png) is two pixels below the other images.

Any help would be appreciated.

[karlpcrowley]

Woah, TBH that is a hell of a lot of code for just a simple list, is there any reason why the table is necessary?

[parbilo]

This is actually part of a larger generic template. other information goes into it but i just striped the part that is giving me trouble.

[parbilo]

the table is used to put end caps on the menu and have an expandable center. If you know of something better I am open to suggestions.

[karlpcrowley]

ok well add this to the table’s css

table.user3_pill { line-height: 16px;

[parbilo]

That did it. Thank you so much.

I was completely stumped – I’m not that good with html and css.

Again, I don’t know how to thank you.

[karlpcrowley]

No need to thank me, here to help :)
But if you’re new here you could keep this thread going :)
https://css-tricks.com/forums/discussion/16387/hello-my-name-is….#Item_32

[Author]

Posts