Re: [css-d] Why does IE < 7 render div margin wrongly?

[Jeroen]

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
>   
>
> In your case, there is a fixed area for the content part by means of the
> background image .
> 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
>   
> 
>
> 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
>   
> 
> * 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
>   
> 
>   The same image can be used for the left and right part: recycled
>   by css! See new top bar
>   
> 
>
> * 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
>   
> .
>   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
>   
> 
> * 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
>   
> .
>   :-)
> * 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?

[francky]

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
  

In your case, there is a fixed area for the content part by means of the 
background image .
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
  


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
  

* 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
  
  The same image can be used for the left and right part: recycled
  by css! See new top bar
  


* 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
  
.
  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
  

* 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
  .
  :-)
* 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 



__
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?

[Chris Ovenden]

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/

Re: [css-d] Why does IE < 7 render div margin wrongly?

[Bradley Wright]

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/

[css-d] Why does IE < 7 render div margin wrongly?

[Jeroen]

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/