2 replies [Last post]
Anti-Ventura
Anti-Ventura's picture
Offline
newbie
Last seen: 15 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-05-22
Posts: 2
Points: 0

I'm pretty new to styling forms, but I'd like to know what I'm doing wrong here. I've got an input field that will display a timer surrounded by 3 images (top, left, right) and a submit image (bottom). I tried to strip all the padding, margin and border values and use exact pixel dimensions to get everything to line up correctly. While it does line up correctly in Firefox, IE 6 and 7 display it incorrectly (much worse in IE 6). IE 7 puts about a 3-pixel gap between the bottom of the top image and the top of the input field, which I can get around by just making the input background white. IE 6 just expands everything out, which is the big problem (apparently, it "needs its space"). Can someone tell me what I'm missing here, or if there's a better way to accomplish this?

BTW - I stripped a lot from the input code, so if those tags look like they won't work, that's ok. I didn't want you guys to have to go through all my other BS to see what would be causing this alignment issue.

Here are the links: HTML, CSS

Thanks,
-Paul

DanA
DanA's picture
Offline
Elder
Last seen: 12 years 8 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Try

Try
img{vertical-align:bottom;}
#stopwatch_mid input{height:20px;}

Anti-Ventura
Anti-Ventura's picture
Offline
newbie
Last seen: 15 years 4 weeks ago
Timezone: GMT-5
Joined: 2007-05-22
Posts: 2
Points: 0

That'll work just fine for

That'll work just fine for my purposes. There's still a white gap at the top of the input, but change the input background to white and voilĂ  - it's visually pleasing again. Thanks for the reply. That was driving me nuts!

-Paul