[css-d] question on small spacing differences between FF/ IE8 vs. Safari/Chrome

[Debbie Campbell]

I've encountered this before - hopefully someone can give me an answer 
so I know how to fix this next time.

I'm seeing very small (1px to just a few pixels) of difference in 
spacing in two places in this page:

> http://www.redkitecreative.com/projects/habitat/ways-to-give/

First is the main horizontal menu. In FF/IE8 the menu items are where I 
want them to be, but in Safari/Win, Chrome and Opera they're moved up 
1px higher. I tried adjusting margins and padding for the ul, li and a 
tags but the difference remains.

Second is the Join Now button and the text below the green 'Sign up for 
our Email Newsletter' box in the sidebar. Again, I can't get the 
locations of those two elements to be the same in those 4 browsers. 
What's showing in FF/IE8 is what I'd like to have happen in the other 
browsers.

Can someone point out what I need to do to either fix or reduce the 
problem, if possible?

-- 
Debbie Campbell
www.redkitecreative.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] question on small spacing differences between FF/ IE8 vs. Safari/Chrome

[Jason Oakman]

I gave ul.navlist li a fixed top and bottom padding and it appears to  
clear up the nav issue.

ul.navlist li {
margin: 0;
padding: 9px 24px;
float: left;
display: block;
font-size: 13px;
width: auto;
}

As for the other, I would just place a   after the form.


On Jan 25, 2010, at 5:06 PM, Debbie Campbell wrote:

> I've encountered this before - hopefully someone can give me an answer
> so I know how to fix this next time.
>
> I'm seeing very small (1px to just a few pixels) of difference in
> spacing in two places in this page:
>
>> http://www.redkitecreative.com/projects/habitat/ways-to-give/
>
> First is the main horizontal menu. In FF/IE8 the menu items are  
> where I
> want them to be, but in Safari/Win, Chrome and Opera they're moved up
> 1px higher. I tried adjusting margins and padding for the ul, li and a
> tags but the difference remains.
>
> Second is the Join Now button and the text below the green 'Sign up  
> for
> our Email Newsletter' box in the sidebar. Again, I can't get the
> locations of those two elements to be the same in those 4 browsers.
> What's showing in FF/IE8 is what I'd like to have happen in the other
> browsers.
>
> Can someone point out what I need to do to either fix or reduce the
> problem, if possible?
>
> -- 
> Debbie Campbell
> www.redkitecreative.com
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Jason Oakman
Xsalta, LLC.
129 Kavas Circle
Bellefonte, PA 16823
814.574.3146 (cell)
814.353.4037
www.xsalta.com



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] question on small spacing differences between FF/ IE8 vs. Safari/Chrome

[Chris F.A. Johnson]

On Mon, 25 Jan 2010, Debbie Campbell wrote:

> I've encountered this before - hopefully someone can give me an answer 
> so I know how to fix this next time.
> 
> I'm seeing very small (1px to just a few pixels) of difference in 
> spacing in two places in this page:
> 
> > http://www.redkitecreative.com/projects/habitat/ways-to-give/
> 
> First is the main horizontal menu. In FF/IE8 the menu items are where I 
> want them to be, but in Safari/Win, Chrome and Opera they're moved up 
> 1px higher. I tried adjusting margins and padding for the ul, li and a 
> tags but the difference remains.
> 
> Second is the Join Now button and the text below the green 'Sign up for 
> our Email Newsletter' box in the sidebar. Again, I can't get the 
> locations of those two elements to be the same in those 4 browsers. 
> What's showing in FF/IE8 is what I'd like to have happen in the other 
> browsers.
> 
> Can someone point out what I need to do to either fix or reduce the 
> problem, if possible?

   A 1px difference is not a problem. You cannot expect a page to look
   identical for all users. They have different window sizes,
   different font sizes, etc..

   Far more serious is the cutting off of a column (the line after
   "Email Marketing by" is missing) and the overlapping of the input
   box on the next column. See this screenshot:
   .

-- 
   Chris F.A. Johnson  
   ===
   Author:
   Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
   Pro Bash Programming: Scripting the GNU/Linux Shell (2009, Apress)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/