Input Displaying Different than DIV with same Class

HTML & CSS
1

I have this class:

.page {
float:right;
background:url(/images/page.png);
width:40px;
height:22px;
text-align:center;
position:relative;
top:-4px;
font-weight:bold;
padding-top:8px;
color:#717462;

}

here is sample code on page:


<form style="padding:0px; margin:0px; height:30px; display:inline;" onsubmit="validate_page(tpage.value); return false;"><input value="'1'" class="page" style="outline:none; border:none; display:block;" name="tpage" type="text" /></form>
<div class="page">1</div>

I usually have div layer using hte class, but i recently applied it to a text input. The problem is when I have the text input floating next to a div layer of the same class, the value in the text input is not in the same location as the div. They use the same “page” class, so I’m lost on why the input is displaying different. I’ve added ‘display:block’ to the input, but that didn’t change anything.

What other CSS do I have to change or add to get the text input to display exactly like the DIV?

thanks
Ryan

2

Could you post a screenshot of what you are currently seeing (and say which browser) AND/OR a link (this would be extra helpful because maybe there’s other code/styles interfering)
and then a screenshot or image showing what you want to accomplish? I think I know what you want but not entirely sure.

Remember browsers exert more control over styling form controls than over plain elements like divs.

3

Hi,

Assuming I have understood correctly then you will need something like this;


.page {
    float:right;
    background: url(/images/page.png);
    width:40px;
    height:22px;
    text-align:center;
    position:relative;
    top:-4px;
    font-weight:bold;
    padding:8px 0 0;
    color:#717462;
}
input.page {
    border:none;
    padding:6px 0 0;
    height:30px;
}

The input type=“submit” uses the “content” box model and padding is included on the inside and does not increase the width or height. (Some browsers also add other proprietary properties which may result in minor differences though.)

4

Thank you both.

the input.page option seemed to be the trick for firefox, but IE doesn’t like it and keeps the value at the top of the area (and Safari shows about a pixel off)

.trailerpage {
float:right;
background:url(/images/poster-page.png);
width:40px;
height:22px;
text-align:center;
position:relative;
top:-4px;
font-weight:bold;
padding:8px 0 0;
color:#717462;

}

input.trailerpage {
border:none;
height:30px;
padding:0px 0 0;
}

the class is actually “trailerpage”, not “page,” which i used for example.

For example: http://bit.ly/9okhL1

Where it says “Trailers & Clips” 5 of 13. That first 5 is the input box.

I’m leaving it like that so you can see how IE shows it.

Thanks Ryan

5

Hi,

Try adding the line-height as follows:


input.trailerpage {
    border:none;
    height:30px;
    padding:0px 0 0;
 [B]line-height:29px[/B];
}
6

That worked perfect.

If you don’t mind me asking, how did you come up with that solution, meaning that specific px for the line-height?

Cheers!
Ryan

7

Trial and error :slight_smile:

It should have been 30px the same as the height of the line but IE has rounding errors so you usually end up adding or subtracting a pixel depending on font-size.