Re: [css-d] Why does IE 7 render div margin wrongly?
On 12/24/06, francky [EMAIL PROTECTED] wrote:
H(o)i Jeroen,
While the question is answered yet, I've some other css philosophical
remarks.
Translating a painted design (illustration) to css has it's pitfalls,
because paper and screen are 2 ways of thinking!
* See: 'The Graphical Designer and the CSS Zen Guru' story
http://home.tiscali.nl/developerscorner/guru-1.htm
In your case, there is a fixed area for the content part by means of the
background image http://www.home.intellit.nl/np/test/background.jpg.
No way to escape from this area! - This will have disadvantages for the
greater screen resolutions (and/or for browser sidebars turned on/off).
If the visitor has a 800x600px resolution, the content is about 60% of
the available screen.
If the visitor is viewing the page with a 1280x1024px monitor, the used
'message part' of the screen is only ... 16%.
* See annotated screenshot 1280x1024
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-intellit.png
So I should strongly advise to start with a more flexible model, letting
the screen of the visitor determine the width and/or height.
This will invoke new questions to solve! For instance:
* Q: what to do with the background?
A: I should make a background without the transparent part in
it, and make it seamless repeatable. Then at large reso's there is
no white around. Compressing the jpg can save 52 of the 66kB's,
which is downloaded 4.5 times faster: example of 14kB
http://home.tiscali.nl/developerscorner/css-discuss/images/intellit-background-new.jpg
* Q: how to make the top bar 'playing now:' flexible and extending /
shrinking if needed?
A: this can be done with a Sliding Doors technique, for instance
the method of Liquid Round Corners
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
The same image can be used for the left and right part: recycled
by css! See new top bar
http://home.tiscali.nl/developerscorner/css-discuss/images/nowplaying_xbmc-new.gif
* Q: how to get transparency in the content part?
A: I see 2 ways: (1) using a small semitransparent white png image
as background image; then there has to be added the rather bits
eating IE png hack; example: test page
http://home.tiscali.nl/developerscorner/transparency/png-gradient-proefje.htm.
Or (2) using the css3-property opacity, which is supported
already by almost all modern browsers. Exception is ... IE, but IE
can be made happy by using an IE-only filter. - old IE5.0 and
Konqueror are degrading to a white background.
If you want the content part to have rounded corners, the same (1)
or (2) has to be applied to them. The top and bottom parted can be
glued as well in one image
http://home.tiscali.nl/developerscorner/css-discuss/images/corners-intellit2000x10.gif
* Q: how to get the sidebar scrollable too?
A: by giving the sidebar the {overflow:auto} property too, or,
what I should prefer, canceling the overflow of the #content, and
putting it to the container of the sidebar and the content; then
they are scrolling together.
As a Dutch proverb says More ways are leading to Rome.
To illustrate:
* Horizontal css flexibilized testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-intellit-a.htm.
:-)
* Some comments inside.
* Link to screenshots: in the page.
Hi Francky,
Thanks a lot for your insight. It was very interesting to read your
CSS Zen Guru article (nicely written ;)) although this design does
actually what it should do, because the content area is actually more
then big enough for the content that will be placed there (I.e.
year/genre/link to lyrics etc). When i would use your scaled layout,
my opinion is, ithere will be too much room for this little content.
But i definitely learned from your comments, thanks!
I use actually a resolution of 1680x1050, and it was designed for
1024x768 and up. But still i agree, when using a large resolution
normally the empty space would be a waste, but in this case is as
designed.
About the JPG compression, true, i could do a bit more. I think around
40kb would still have a reasonable quality.
Thanks again, and happy holidays!
--
Jeroen
__
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] Why does IE 7 render div margin wrongly?
Jeroen wrote:
I've been learning CSS for a while and am now translating a
photoshop/illustrator design to CSS.
[...]
Example: http://www.home.intellit.nl/np/test
[...]
BTW: If someone has IE5.5 handy, i would love to hear if it renders
correctly with the fix in place. (or a mac for that matter).
Thanks!
H(o)i Jeroen,
While the question is answered yet, I've some other css philosophical
remarks.
Translating a painted design (illustration) to css has it's pitfalls,
because paper and screen are 2 ways of thinking!
* See: 'The Graphical Designer and the CSS Zen Guru' story
http://home.tiscali.nl/developerscorner/guru-1.htm
In your case, there is a fixed area for the content part by means of the
background image http://www.home.intellit.nl/np/test/background.jpg.
No way to escape from this area! - This will have disadvantages for the
greater screen resolutions (and/or for browser sidebars turned on/off).
If the visitor has a 800x600px resolution, the content is about 60% of
the available screen.
If the visitor is viewing the page with a 1280x1024px monitor, the used
'message part' of the screen is only ... 16%.
* See annotated screenshot 1280x1024
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-intellit.png
So I should strongly advise to start with a more flexible model, letting
the screen of the visitor determine the width and/or height.
This will invoke new questions to solve! For instance:
* Q: what to do with the background?
A: I should make a background without the transparent part in
it, and make it seamless repeatable. Then at large reso's there is
no white around. Compressing the jpg can save 52 of the 66kB's,
which is downloaded 4.5 times faster: example of 14kB
http://home.tiscali.nl/developerscorner/css-discuss/images/intellit-background-new.jpg
* Q: how to make the top bar 'playing now:' flexible and extending /
shrinking if needed?
A: this can be done with a Sliding Doors technique, for instance
the method of Liquid Round Corners
http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm
The same image can be used for the left and right part: recycled
by css! See new top bar
http://home.tiscali.nl/developerscorner/css-discuss/images/nowplaying_xbmc-new.gif
* Q: how to get transparency in the content part?
A: I see 2 ways: (1) using a small semitransparent white png image
as background image; then there has to be added the rather bits
eating IE png hack; example: test page
http://home.tiscali.nl/developerscorner/transparency/png-gradient-proefje.htm.
Or (2) using the css3-property opacity, which is supported
already by almost all modern browsers. Exception is ... IE, but IE
can be made happy by using an IE-only filter. - old IE5.0 and
Konqueror are degrading to a white background.
If you want the content part to have rounded corners, the same (1)
or (2) has to be applied to them. The top and bottom parted can be
glued as well in one image
http://home.tiscali.nl/developerscorner/css-discuss/images/corners-intellit2000x10.gif
* Q: how to get the sidebar scrollable too?
A: by giving the sidebar the {overflow:auto} property too, or,
what I should prefer, canceling the overflow of the #content, and
putting it to the container of the sidebar and the content; then
they are scrolling together.
As a Dutch proverb says More ways are leading to Rome.
To illustrate:
* Horizontal css flexibilized testpage
http://home.tiscali.nl/developerscorner/css-discuss/test-intellit-a.htm.
:-)
* Some comments inside.
* Link to screenshots: in the page.
Happy Days!
francky
PS: For seeing the (static) result in a browser/OS I don't have, I use
the online Browsershots.org http://browsershots.org/
__
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] Why does IE 7 render div margin wrongly?
Hey! This was my first IE bug, too. Have fun with the rest. (If you
read around positioniseverything you'll be prepared for most of them.)
On 12/20/06, Jeroen [EMAIL PROTECTED] wrote:
I've been learning CSS for a while and am now translating a
photoshop/illustrator design
to CSS. It renders correctly in Firefox/Opera/IE 7 but does not in IE
7 without having a dirty fix. (* html trick).
Example: http://www.home.intellit.nl/np/test
Although i have it fixed, and it works now. I don't know why IE
behaves this way.
Can someone shed some light on this, since i don't understand why IE does
this,
i won't learn from 'my' mistakes ;)
If you remove this code:
* html div.albuminfo {
margin-left: 18px; /* Fix for IE, Why does IE 7 render it wrongly?
*/
}
you'll see what i mean with rendering incorrectly; the DIV is placed
too far to the right, it looks like IE doubles the margin-left: value,
which should actually be 35px.
BTW: If someone has IE5.5 handy, i would love to hear if it renders
correctly with the fix in place. (or a mac for that matter).
Thanks!
--
Jeroen
__
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/
--
Chris Ovenden
http://thepeer.blogspot.com
Imagine all the people / Sharing all the world
__
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] Why does IE 7 render div margin wrongly?
I've been learning CSS for a while and am now translating a
photoshop/illustrator design
to CSS. It renders correctly in Firefox/Opera/IE 7 but does not in IE
7 without having a dirty fix. (* html trick).
Example: http://www.home.intellit.nl/np/test
Although i have it fixed, and it works now. I don't know why IE
behaves this way.
Can someone shed some light on this, since i don't understand why IE does this,
i won't learn from 'my' mistakes ;)
If you remove this code:
* html div.albuminfo {
margin-left: 18px; /* Fix for IE, Why does IE 7 render it wrongly? */
}
you'll see what i mean with rendering incorrectly; the DIV is placed
too far to the right, it looks like IE doubles the margin-left: value,
which should actually be 35px.
BTW: If someone has IE5.5 handy, i would love to hear if it renders
correctly with the fix in place. (or a mac for that matter).
Thanks!
--
Jeroen
__
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] Why does IE 7 render div margin wrongly?
On 20/12/2006 16:56, Jeroen wrote: you'll see what i mean with rendering incorrectly; the DIV is placed too far to the right, it looks like IE doubles the margin-left: value, which should actually be 35px. It does double the margin in the direction an element is floated: http://www.positioniseverything.net/explorer/doubled-margin.html A common fix is to apply display: inline; to the floated element, which fixes the margin, as mentioned at the bottom of the linked article. IE6 is a pain, certainly. :) __ 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/
