[CSS] 1px difference

dannylister · 13 Nov 2007 at 22:00

Hi all,

I've hit a brick wall with regards to a layout I am coding. The page in question is http://www.waiger.com/temp/.

You'll notice a sort of play/submit button on the right hand. In IE6 and IE7, the button and text box align perfectly. But the submit button is 1 pixel higher in Firefox and Safari.

I was wondering if anybody could possible help with the situation. Thanks in advance.

Danny.

Deleted User 234324 · 13 Nov 2007 at 23:26

Im no expert but looking at the code for it (not sure why it does it) your input box has a margin of 8px and the play/submit button is padded 9px both from the bottom, that might be whats causing the difference of 1 pixel.

dannylister · 13 Nov 2007 at 23:31

Yeah that's what I would have thought.... but if i alter the submit button to have a padding-bottom of 8px, the button moves up one pixel in every browser.

There seems to be a single pixel difference between the 4 browsers and how it positions the controls.

unwashed potato! · 13 Nov 2007 at 23:48

dannylister said:
Yeah that's what I would have thought.... but if i alter the submit button to have a padding-bottom of 8px, the button moves up one pixel in every browser.

There seems to be a single pixel difference between the 4 browsers and how it positions the controls.

try changing the margin-bottom to 9px and then add the following code, _margin-bottom: 8px;

should make it so it shows proper with 9px for firefox, and then wonderful ie can have its own 8px which only ie reads. not sure if this will fix ie7 but will wait and see

paulsheff · 14 Nov 2007 at 00:41

You should be able to do the same thing for IE7 with #margin-bottom: 8px;

Dj_Jestar · 14 Nov 2007 at 10:03

or use:

Code:

<!--[if IE]><style type="text/css">.someClass { margin-bottom: 8px !important }<[endif]-->

LazyManc · 14 Nov 2007 at 14:35

I haven't looked at the example code, so I may be barking up the wrong tree here.

Sometimes if you're using odd-values for pixel widths/heights, and percentages elsewhere, FF and IE do the rounding differently and you end up with 1px displacement between the browsers. Generally if i'm using a fixed width/height I try to stick to even values.

Dup · 14 Nov 2007 at 14:52

Set all the other padding and margins to 0, that tends to work for me.

Sic · 14 Nov 2007 at 15:00

Dj_Jestar said:
or use:

Code:



+1

LazyManc · 14 Nov 2007 at 15:23

Dj_Jestar said:
or use:

Code:



Did you miss a closing </style> tag or have you left it out intentionally for some reason?

Dj_Jestar · 14 Nov 2007 at 15:34

Missed it, it should have one

unwashed potato! · 14 Nov 2007 at 15:53

Sic said:
+1

-10, i don't like stlying your stylesheet like that as i find having your stlying for each class and id together much better as you can see it all in one area, compared to half one place, then another half somewhere else, just doesn't make sense to me atleast

Dj_Jestar · 14 Nov 2007 at 16:19

Mammalian said:
-10, i don't like stlying your stylesheet like that as i find having your stlying for each class and id together much better as you can see it all in one area, compared to half one place, then another half somewhere else, just doesn't make sense to me atleast

You're using a hack. I'm not. Mine won't suddenly stop working one day, as a number of them did when IE7 came out but we were still having the same issues that the hacks were there for!

Sic · 14 Nov 2007 at 16:23

Mammalian said:
-10, i don't like stlying your stylesheet like that as i find having your stlying for each class and id together much better as you can see it all in one area, compared to half one place, then another half somewhere else, just doesn't make sense to me atleast

it helps you keep all your nice CSS up together - the CSS that I care about (in my root CSS file) will validate - your hacked one might not.

that, coupled with the fact that it's just easier for me to have all my IE6 stuff called last and overwriting where it needs to makes it the best solution (although a bit dirty - don't get me wrong, I'd prefer if IE6 just worked, but it never will).

also, you can't -10 - you're just one person

unwashed potato! · 14 Nov 2007 at 22:54

very true sic and dj_something, well i guess it just comes down to each persons prefered way of doing. I like to have the hacks with the css so if a problem occurs say on the update from ie6 to ie7 i can just go straight to the part in css having problems, add/remove/modify the code and done.

Dj_Jestar · 15 Nov 2007 at 00:48

and so can we.. in the ie6/7 block, oddly enough

ultim · 15 Nov 2007 at 21:44

im having similar problems, is the way to solve this is hack? i prefer not to use browser specific css