Re: [css-d] opera or FF rtl bug
Gunlaug Sørtun wrote: Ido Dekkers wrote: which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Before you go any further, consider the following... - Precise positioning of elements on top of a background-image by using em, is a flawed method - regardless of direction. Those elements are not anywhere near their intended position in any of my browsers, simply because their position - in em - rely on font-size. Font-size is not a factor you can control all that well. - Opera has a rounding-effect on large em margins and paddings. See... http://www.brunildo.org/test/emarg.pl - Firefox (2.0.0.1) offers no horizontal scroll, and I need at least a 1450px wide window just to see the entire page. That's the effect of 'minimum font-size: 14px'. It's the same in other browsers, apart from that they give me a horizontal scroll-bar. - Height in em on those anchors means I see both horizontal and vertical repetition of background-images. Pretty confusing link-text, I think. Again: it's the effect of uncontrollable font-size. So, when you want to position anything precisely on top of a fix-sized background, you'll be better of by using a fix-sized unit for positions and dimensions - like px. Also: especially IE tends to be a bit unpredictable when all 'top'/'left'/'right'/'bottom' values are left out and positioning rely on default-positions and margins. regards Georg thanks Georg fixed the em - px issue , but the problem with opera and FF is still there. i know what the problem is - opera always calculates the position from the left, even if it's a rtl page. FF calculates the position from the left on a regular page and from the right in an rtl page. the question is which of them has the bug (if it's a bug) and can it be fixed in css ? regarding IE - i always leave the css code breaking for the last in a separate file. Ido __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] opera or FF rtl bug
On Thu, 28 Dec 2006 15:52:30 +0530, Ido Dekkers [EMAIL PROTECTED]
wrote:
Gunlaug Sørtun wrote:
Ido Dekkers wrote:
which of the above has the bug : http://test.dekkers.net/test.aspx
the logo and 2 other images display correct in FF(2,3) but not in
Opera(latest)
..
thanks Georg
fixed the em - px issue , but the problem with opera and FF is still
there.
i know what the problem is - opera always calculates the position from
the left, even if it's a rtl page.
FF calculates the position from the left on a regular page and from the
right in an rtl page.
the question is which of them has the bug (if it's a bug) and can it be
fixed in css ?
It seems Opera does have a bug on absolutely positioned elements when
directionality is rtl and also left and right being 'auto'. Anyway, the
page looks good across browsers (Opera, Ffx2 IE7 atleast) with the
following style.
#logo
{
position:absolute;
left:80px;
top:5px;
}
If not for any other reasons, it would be better to specify left and top
values for an absolutely positioned element and place it w.r.t. to its
containing block.
Regards,
Hari.
regarding IE - i always leave the css code breaking for the last in a
separate file.
Ido
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
--
-H_K_G-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] opera or FF rtl bug
Ido Dekkers wrote:
which of the above has the bug :
http://test.dekkers.net/test.aspx
the question is which of them has the bug (if it's a bug) and can it
be fixed in css ?
Yes, it can be fixed in CSS, *if* you use proper *positions* as
starting-points for 'position: absolute'.
You're still positioning out of thin air with margins, which is not
how you should absolute position elements to go with a fix-sized
background.
In fact: I can not see any good reason for using 'margins' in
combination with 'position: absolute' at all in your case, as
'top:??px;' and 'left:??px;' will achieve pixel-perfect results for
absolute positioning across the entire browser-land - regardless of
dir=rtl vs. dir=ltr.
Example:
#logo
{
position:absolute;
/* margin:-80px 800px 0 0; */
top: 10px;
left: 100px;
}
...will position that logo in _exactly_ the same spot in _all_ browsers
that understands absolute positioning - which should cover all CSS1
capable ones. The margins are commented out - not in use, so you may as
well delete them before going on with similar positioning for the other
overlaid elements. Success is guaranteed.
regarding IE - i always leave the css code breaking for the last in a
separate file.
Fine, although I can't see any good reason for that either in this case,
as IE6 has just told me that there are 'collapsing margins' problems
in there, and they should be dealt with at an early stage if you want to
avoid covering up for designer-bugs instead of browser-bugs across
browser-land.
IE6' basic flaws and bugs can provide a lot of information about
design-weaknesses, although we cannot follow IE's lead when it comes to
solving them.
Add...
#header
{
padding-top: 1px;
}
...to see the 'collapsing margin' from...
#nav
{
margin: 10px;
width: 90%;
}
...in Firefox and Opera too. That's the 10px top margin that IE6 is
preventing from collapsing onto body because of the infamous
'hasLayout'[1] bug - resulting in 10px offset for the #nav in IE6.
You'll have to decide how that margin shall be handled across
browser-land, but you can't affect how IE6 is handling it since you
can't get rid of the 'hasLayout' bug.
So, you're definitely not fighting browser-bugs here - apart from in
IE/win. You just need to apply proper positioning.
regards
Georg
[1]http://www.satzansatz.de/cssd/onhavinglayout.html
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] opera or FF rtl bug
which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Thanks Ido __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] opera or FF rtl bug
Subject: [css-d] opera or FF rtl bug which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Only works in FF. IE doesn't work either. quick suggest is to define the left margin. That seems to fix the logo positioning. Also need to move all the links to centre of logo as they sit on top of image. IE6 doesn't render the images at all - no transparency. Happy Xmas!! Ian -- No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.432 / Virus Database: 268.15.28/604 - Release Date: 26/12/2006 12:23 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] opera or FF rtl bug
Ido Dekkers wrote: which of the above has the bug : http://test.dekkers.net/test.aspx the logo and 2 other images display correct in FF(2,3) but not in Opera(latest) Before you go any further, consider the following... - Precise positioning of elements on top of a background-image by using em, is a flawed method - regardless of direction. Those elements are not anywhere near their intended position in any of my browsers, simply because their position - in em - rely on font-size. Font-size is not a factor you can control all that well. - Opera has a rounding-effect on large em margins and paddings. See... http://www.brunildo.org/test/emarg.pl - Firefox (2.0.0.1) offers no horizontal scroll, and I need at least a 1450px wide window just to see the entire page. That's the effect of 'minimum font-size: 14px'. It's the same in other browsers, apart from that they give me a horizontal scroll-bar. - Height in em on those anchors means I see both horizontal and vertical repetition of background-images. Pretty confusing link-text, I think. Again: it's the effect of uncontrollable font-size. So, when you want to position anything precisely on top of a fix-sized background, you'll be better of by using a fix-sized unit for positions and dimensions - like px. Also: especially IE tends to be a bit unpredictable when all 'top'/'left'/'right'/'bottom' values are left out and positioning rely on default-positions and margins. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
