Thanks Philippe, Ha yes I omitted font family oops. Firefox seems to still position them different to the others I have tested (Webkit on OSX, IE 7 & 8) which is interesting.
As you say I'll have to find another way around it with the layout/design. Regards, Alex From: Philippe Wittenbergh <[email protected]> Date: Mon, 20 Feb 2012 19:18:59 +0900 To: Alex Creedy <[email protected]> Cc: <[email protected]> Subject: Re: [css-d] slider with a pager - browser inconsistent On Feb 20, 2012, at 9:46 AM, Alex Creedy wrote: > [] The pager uses '•' bullets for the dots. > > http://www.alexcreedy.com/slider/slider_v2.html > > The bullets have a font size: 2em and line-height:1em > > The position of the bullets is slightly different in browsers, I have only > tested on Mac: firefox, safari, chrome so far. Short answer: specify a font-family Longer answer: as you don't specify a font-family anywhere, you depend on the browser defaults (which maybe user set) - and on the intrinsic line-height of said font. On OS X, this is usually Helvetica and Times. Now, WebKit on OS X (still) has a build-in hack to force the line-height of those two fonts to match Arial and Times New Roman hence the difference you see between Gecko (Firefox) and WebKit (Safari, Chrome). If you specify both font-family and font-size, then position your bullets vertically, they'll be positioned correctly in all browser on a given platform. There might be small variations between platforms, but that is out of your control (font-smoothing, etc). Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [[email protected]] 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/
