SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
-
Jun 6, 2003, 07:37 #1
- Join Date
- Jul 2002
- Location
- Along the Wasatch Fault line.
- Posts
- 1,771
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Are px's measured differently between browsers?
I have noticed that the "px" measurement for positioning elements seems to be different between browsers.
For instance a px based position of two elements that are vertically next to each other in IE are slighly separated in Netscape/Mozilla and slighly overlapped in Opera.
Also horizontal alignment seems to be slightly skewed in Opera.
I posted a good example of this under the thread titled "Cross browser compatibility". (http://www.sitepointforums.com/showt...hreadid=112358)
Can anyone shed some light on this and show me how they overcome this seeming incompatibility?
Thanks!John
-
Jun 6, 2003, 08:03 #2
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
There are differences in how margins/paddings/borders are included/excluded in the width, so you should check that.
The only browser I know of where 1px doesn't allways equal 1 pixel is Opera 7 on the Mac where the screen's dpi is set to 72. Then it makes fonts slightly smaller. (and any browser when printing for example)
hth,
DouglasHello World
-
Jun 6, 2003, 08:23 #3
- Join Date
- Jul 2002
- Location
- Along the Wasatch Fault line.
- Posts
- 1,771
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Doug,
Thanks for the reply! This is still all very new to me.John
-
Jun 7, 2003, 10:00 #4
- Join Date
- Sep 2000
- Location
- Halmstad, Sweden
- Posts
- 7,400
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
I know (and find VERY annoying) that IE includes borders in the calculation of positioning. I'm not sure if this is specified in the standards or not, but it makes it totally impossible to use borders effectively, IMHO.
Mattias Johansson
Short, Swedish, Web Developer
Buttons and Dog Tags with your custom design:
FatStatement.com
-
Jun 7, 2003, 11:07 #5
- Join Date
- Nov 2001
- Location
- Bath, UK
- Posts
- 2,498
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by M. Johansson
The dimensions of the content area of a box -- the content width and content height -- depend on several factors: whether the element generating the box has the 'width' or 'height' property set, whether the box contains text or other boxes, whether the box is a table, etc. Box widths and heights are discussed in the chapter on visual formatting model details.
The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height.
The background style of the various areas of a box are determined as follows:
Content area: The 'background' property of the generating element.
Padding area: The 'background' property of the generating element.
Border area: The border properties of the generating element.
Margin area: Margins are always transparent.
And, probably more important:
Widths
DouglasHello World
-
Jun 7, 2003, 11:54 #6
- Join Date
- Feb 2003
- Location
- Linuxland
- Posts
- 2,788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
You can get around the padding problem by putting the padding in a separate div rather than including it in the div that you are trying to pad. Hope that's understandable.
-
Jun 8, 2003, 02:02 #7
- Join Date
- Sep 2000
- Location
- Halmstad, Sweden
- Posts
- 7,400
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
So it's actually IE which got it right, it seems.
Mattias Johansson
Short, Swedish, Web Developer
Buttons and Dog Tags with your custom design:
FatStatement.com
-
Jun 8, 2003, 06:22 #8
Originally Posted by earther
Originally Posted by M. Johansson
Understandable?
-
Jun 8, 2003, 06:29 #9
- Join Date
- Sep 2000
- Location
- Halmstad, Sweden
- Posts
- 7,400
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Ahhh.
Mattias Johansson
Short, Swedish, Web Developer
Buttons and Dog Tags with your custom design:
FatStatement.com
-
Jun 8, 2003, 06:51 #10
Originally Posted by M. Johansson
-
Jun 8, 2003, 07:29 #11
- Join Date
- Feb 2003
- Location
- Linuxland
- Posts
- 2,788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
It was just easier to do the extra divs rather than wrap my overworked brain around the Box Model Hack caculations. Are there any other reasons to do the hack rather than the divs (other than yours above and that I don't have access to IE 5x to check if I've got it right)?
-
Jun 8, 2003, 07:34 #12
Originally Posted by earther
-
Jun 8, 2003, 07:42 #13
- Join Date
- Feb 2003
- Location
- Linuxland
- Posts
- 2,788
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by vgarcia
-
Jun 8, 2003, 11:37 #14
- Join Date
- Jan 2003
- Location
- Calgary, Canada
- Posts
- 2,063
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, IE5/Win's Font-sizing and box-model are very annoying.
I enjoy designing in IE6 and Mozilla though, then work with my designs to get them to look correct in Opera (usually pretty good), and IE5 (sometimes more of a pain).Who walks the stairs without a care
It shoots so high in the sky.
Bounce up and down just like a clown.
Everyone knows its Slinky.
Bookmarks