...

View Full Version : Browser-specific CSS (example inside)



BlackReef
05-29-2012, 11:23 PM
Hello,

I have an issue where the input button is slightly misaligned from the search box, about a 1px discrepency.

I've gotten it to appear fine in IE and Chrome, but Firefox & Safari is off by about 1px. (which is strange, its typically IE that is the odd one out).

Anyways, if somebody could take a look at this - its driving me nuts! lol

It's the e-mail signup form on the right:

http://dev.electrabike.com/electra/

Thank you in advance,
-Joe

Here is the CSS:


.image {
border-bottom-width: 0;
border-top-width: 0;
bottom: 0;
position: relative;
border: none;
bottom: 0;
height: 19px;
left: -6px;
top: 6px;
width: 30px;
}
#signupemail {
bottom: 47px;
height: 7px;
position: relative;
right: 3px;
width: 133px;
}

.inputtext {
color: #00aec6;
font-size: 10px;
font-style: normal;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
background-color: #fff;
}

BlackReef
05-30-2012, 06:28 PM
any help on this would be greatly appreciated,

chrisf
05-30-2012, 06:31 PM
Are you talking about the blue arrows next to the email input box? Because it is looking fine for me.

EpicWebDesign
05-30-2012, 06:50 PM
When I viewed your site, it was off in FF, Safari AND IE. In IE, the arrow image is larger by 1 px (both top and bottom) than the input text box. (IE isn't recognizing the padding assigned to the input box.) In FF and Safari, the arrow image was like you said, kind of 1px below where it should be. I changed this part:


.image {
border-bottom-width: 0;
border-top-width: 0;
bottom: 0; // removed a duplicate instance of this line
position: relative
border: none;
height: 19px;
left: -6px;
top: 5px; //used to be 6px
width: 30px;
}

Now it appears just fine for me now in both FF and Safari. However, it's still off in IE. The bottom now aligns just fine in IE, but it's still about 1px taller than the input text box. Will update if I can find a solution for the IE issue.

BlackReef
05-30-2012, 06:56 PM
When I viewed your site, it was off in FF, Safari AND IE. In IE, the arrow image is larger by 1 px (both top and bottom) than the input text box. (IE isn't recognizing the padding assigned to the input box.) In FF and Safari, the arrow image was like you said, kind of 1px below where it should be. I changed this part:


.image {
border-bottom-width: 0;
border-top-width: 0;
bottom: 0; // removed a duplicate instance of this line
position: relative
border: none;
height: 19px;
left: -6px;
top: 5px; //used to be 6px
width: 30px;
}

Now it appears just fine for me now in both FF and Safari. However, it's still off in IE. The bottom now aligns just fine in IE, but it's still about 1px taller than the input text box. Will update if I can find a solution for the IE issue.

Thank you for the help.

Ya I switched it back to 5px;, and now it appears fine in FireFox and Safari, but it is off 1px in Chrome and IE (as you mentioned). driving me nuts lol



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum