Re: [css-d] IE 6 layout issues

[David Bailey]

On 08/05/2009, at 3:51 AM, Alan Gresley wrote:

 David Laakso wrote:

 Alan,
 I wonder if he is referring to the white space beneath Tobias in
 compliant browsers in an 800 window, or in any width window when the
 fonts are scaled; and that this white space also appears beneath  
 Tobias
 in IE/8 and down, regardless of the widow width? In other words, is
 Tobias supposed to resting at the bottom bar regardless of window  
 size
 or user font preference?


 Oh I see now (not a IE6 bug). Thank you David.

 It's collapsing margins from the list at the bottom of the content.  
 They
 collapse through to div##rightColumn_hp since the image of Tobias is a
 float. The fix is to zero out that bottom margin.


 #rightColumn_hp ul {
   margin-bottom:0;
 }

Thanks for this. I used this to fix the gap between the image and the  
stripe at the bottom in IE. Can you explain what has happened here?  
There was obviously some inheritance issue that I'm not seeing; but  
I'd like to understand.

In the meantime, as suggested by a few others, I have used absolute  
positioning as others have suggested to solve the problem.

Thanks again for looking into this; I greatly appreciate not only the  
opportunity to solve the issues, but also to learn!

Regards,
David
__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[David Bailey]

On 15/05/2009, at 3:51 AM, Gunlaug Sørtun wrote:

 David Bailey wrote:
 Something I was unaware of was that you can float a div as well as  
 position it relatively!
 Relative positioning adds a few factors to the mix...

That all makes sense. Thanks for the explanation.

 Also included min-width fix for IE6, in case you want that.
  Is there anywhere I can find out an explanation of what you have  
 done here?
 See: http://www.gunlaug.no/contents/wd_additions_14.html

That's excellent. I've looked through and also bookmarked it. It  
certainly helps to make IE work as it does in FF and Safari. I guess  
the very fact we have to make special style sheets for IE in the  
first place shows we are having to take special steps to incorporate  
this ubiquitous but recalcitrant browser in its various versions, so  
I can see an argument for using MS's proprietary expressions when  
needed.


 The real problem I have with the menu bar in IE and the fact that  
 I have to stipulate a width for each menu item in pixels rather  
 than auto...
  this creates the problem of the menu bar dropping a line when the  
 window is narrowed or viewed at 800x600.

 In the 'menu_ie.css' stylesheet add/change to...
 ...and things will improve a bit at normal font size in IE6.
 The above works in IE6 because that browser has no respect for  
 declared
 dimensions and will expand the li until the content fits inside.  
 Usually
 that buggy behavior causes problems, bet here we're turning that  
 bug to
 our advantage.

That's excellent--almost the same as it appears in Safari! I can see  
what you have done using that IE bug. This is most helpful in seeing  
how to think in terms of what cards we've been dealt and turn it to  
good!

 resizing will cause drop at narrow width in all browsers, and  
 there's no
 use trying to avoid/prevent that.
Yes, I was aware and happy with that.  I'm personally happy with  
allowing menus to collapse, as ugly as that may at times look, but it  
does allow for resizing of text for readability. The site owner,  
however, didn't want the menu bar to collapse, hence the min-width,  
for which your work-around has suited well.

I am very grateful for the help I've received, and have learned a lot  
from this.

Regards,
David
__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[David Bailey]

 David Bailey wrote:
 Hi,

 I've got a couple of problems with IE 6 (and probably other versions,
 I don't have other IE browsers in order to check) which all work fine
 in Safari and FF. I've struggled with this for a few hours now, and
 looked for answers, but to no avail.



Tim, Georg, Alan, and David,

I've been away, hence no resonse to your comments!

Thanks for all your answers and suggestions and the effort you've put  
into working out suggested solutions. I'm most grateful.

A couple of the problems have been solved through Tim's earlier  
reply, but I've still got to work through the rest. Obviously, I've  
got to get to grips with this haslayout issue, and there's a few  
things to come to grips with along the way.

To those who mentioned the tobias image, yes, Tim's earlier reply  
provided the answer to why it sat above the content in IE.  
Nevertheless, as you have pointed out, I also had noticed that the  
image was separating from the maroon line at the bottom of the  
content area. It appears that absolute positioning should solve that,  
so I'll give that a go.

I'll come back and let you know how I've got on.

A big THANKS.

Regards,
David



__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[David Bailey]

Hi Tim and others,

Sorry I have not responded sooner, but have been away.

Thanks for the reply and helpful advice.


On 07/05/2009, at 10:49 AM, Tim Snadden wrote:


 1. Text content:
 The text drops down below the image on the right instead of being
 parallel to it. I'm sure I've seen something about this problem
 before in one of my books, but I can't find it for the life of me.

 The IE web developer toolbar is pale imitation of firebug but can  
 be used to find out what is happening in IE. If you look you will  
 see that the div class=hp_img is taking up with full width. You  
 could set a width on it, or do away with it altogether and just  
 position the image. I would absolutely position that image bottom  
 right so that even if the content grows he still looks right.
Thanks for that; that makes sense and works. I've downloaded the IE  
Web Developer toolbar too; that's great.

You're probably right about the absolute positioning. I see it moves  
when the window is narrowed. I'll give that a go.


 2. Stripes:
 The gray stripes under the navigation bar at the top and the bottom
 redish band at the bottom drops too low (the bottom one gets tangled
 with the footer text.

 .stripes {
 background:transparent url(/images/hor-stripes_bgtop.gif) repeat-x  
 left bottom;
 clear:both;
 height:26px;
 }
This has fixed it.

 You don't need the image inside that div.
That's true, if I make the image longer than the widest screen. I'll  
look at that.  I take it that this is better practice?

 Give the footer layout (google hasLayout) and the stripes will  
 position correctly. One way is using the proprietary 'zoom: 1; '
Hmm. I'll have to do a bit of study here and see how all that works.  
I've heard about it, but this is the first time I've really had a  
problem of this sort. Will check it out. Thanks.

 By the way - It would look much nicer to anti-alias the violin on  
 the left. It looks quite jaggy against the menu bar. You could do  
 it as an alpha transparent PNG and it would look better to everyone  
 but IE6 users, and to them it would look no worse than it does  
 currently.
I did use a PNG image at first, but Fireworks gave it a black edge  
which only emphasised the problem. I've done the same in Photoshop,  
which doesn't give it the edge, but still gets the halo. I may just  
start again with the original image and see if I can improve it. Thanks.

 Cheers, Tim

Much appreciated,
David

__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[Alan Gresley]

David Bailey wrote:
 Hi,
 
 I've got a couple of problems with IE 6 (and probably other versions,  
 I don't have other IE browsers in order to check) which all work fine  
 in Safari and FF. I've struggled with this for a few hours now, and  
 looked for answers, but to no avail.
 
 http://www.widemannviolins.com/index.php
 
 
 1. Text content:
 The text drops down below the image on the right instead of being  
 parallel to it. I'm sure I've seen something about this problem  
 before in one of my books, but I can't find it for the life of me.


What text content are you referring to? Both IE6 and other browsers show 
the image on the right (a man) quite parallel to any text that I can see.


 2. Stripes:
 The gray stripes under the navigation bar at the top and the bottom  
 redish band at the bottom drops too low (the bottom one gets tangled  
 with the footer text.


This is interesting, still analyzing why. The fix is to give the 
div#footer hasLayout [1].

#footer { /* hasLayout trigger */
   height:1%;
}



 3. The Main Nav bar text:
 I have used WebAssist's CSS MenuWriter for this (I thought it would  
 save time!). I am having trouble getting this to work well.  
 Apparently IE requires width and height to be declared rather than  
 auto. Is there any way to get this looking like it does in Safari and  
 FF?
 It's got it's own its own stylesheet: http://www.widemannviolins.com/ 
 CSSMenuWriter/cssmw/menu_ie.css
 
 The main style sheet is: http://www.widemannviolins.com/styles/ 
 layout.css
 
 
 Any help is much appreciated,
 David


The IE6 style sheet has the text with this color

ul#cssmw li span a {background-color: #7D201C;}


but in the main style sheet you the same color as the background color 
of the div#mainNav.

#mainNav {background-color: #7d201c;}


There is possibly other issues with this menu and IE6. The above should 
give you a start.


1 http://www.satzansatz.de/cssd/onhavinglayout.html


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[David Laakso]

Alan Gresley wrote:
 David Bailey wrote:
   
 Hi,

 I've got a couple of problems with IE 6 (and probably other versions,  
 I don't have other IE browsers in order to check) which all work fine  
 in Safari and FF. I've struggled with this for a few hours now, and  
 looked for answers, but to no avail.

 http://www.widemannviolins.com/index.php


 1. Text content:
 The text drops down below the image on the right instead of being  
 parallel to it. I'm sure I've seen something about this problem  
 before in one of my books, but I can't find it for the life of me.
 


 What text content are you referring to? Both IE6 and other browsers show 
 the image on the right (a man) quite parallel to any text that I can see.
   



Alan,
I wonder if he is referring to the white space beneath Tobias in 
compliant browsers in an 800 window, or in any width window when the 
fonts are scaled; and that this white space also appears beneath Tobias 
in IE/8 and down, regardless of the widow width? In other words, is 
Tobias supposed to resting at the bottom bar regardless of window size 
or user font preference?


__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[Alan Gresley]

Alan Gresley wrote:

 This is interesting, still analyzing why. The fix is to give the 
 div#footer hasLayout [1].
 
 #footer { /* hasLayout trigger */
height:1%;
 }


And here is a test case.

http://css-class.com/test/bugs/ie/ie6-background-image-drop.htm


This bug in IE6 is a combination of the first child element of the 
parent element being floated. It seems that the background image of the 
parent element drops to the level of the second child element. I have 
never seen this bug.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[Alan Gresley]

David Laakso wrote:
 Alan Gresley wrote:
 David Bailey wrote:
[..]
 http://www.widemannviolins.com/index.php


 1. Text content:
 The text drops down below the image on the right instead of being  
 parallel to it. I'm sure I've seen something about this problem  
 before in one of my books, but I can't find it for the life of me.
 

 What text content are you referring to? Both IE6 and other browsers show 
 the image on the right (a man) quite parallel to any text that I can see.
   
 
 
 
 Alan,
 I wonder if he is referring to the white space beneath Tobias in 
 compliant browsers in an 800 window, or in any width window when the 
 fonts are scaled; and that this white space also appears beneath Tobias 
 in IE/8 and down, regardless of the widow width? In other words, is 
 Tobias supposed to resting at the bottom bar regardless of window size 
 or user font preference?


Oh I see now (not a IE6 bug). Thank you David.

It's collapsing margins from the list at the bottom of the content. They 
collapse through to div##rightColumn_hp since the image of Tobias is a 
float. The fix is to zero out that bottom margin.


#rightColumn_hp ul {
margin-bottom:0;
}


Just tested in Firefox.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
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/

Re: [css-d] IE 6 layout issues

[Gunlaug Sørtun]

David Bailey wrote:

 http://www.widemannviolins.com/index.php

Suggestion:
http://www.gunlaug.no/tos/alien/db/test_09_0507.html

http://www.gunlaug.no/tos/alien/db/test_09_0507_files/layout00.css
http://www.gunlaug.no/tos/alien/db/test_09_0507_files/menu.css
http://www.gunlaug.no/tos/alien/db/test_09_0507_files/menu_ie.css

 1. Text content:

a: Do not declare backside margins on the #rightColumn_hp float, as it
then becomes wider than 100% when IE's faulty percentage calculation
kicks in.

b: absolute position the .hp_img.

 2. Stripes:

Stiffen up #footer with a hasLayout trigger.

 3. The Main Nav bar text:

One can hardly make IE6 render like FF or Safari, but it can be prettied
up a bit by adding em-width and other trimming. IE6/7 also needs help
with correct stacking of absolute positioned elements - the dropdowns.
I've included the most basic fixes in the suggestion above, compare with
what you've got and implement as you like.

Also included min-width fix for IE6, in case you want that.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
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/

[css-d] IE 6 layout issues

[David Bailey]

Hi,

I've got a couple of problems with IE 6 (and probably other versions,  
I don't have other IE browsers in order to check) which all work fine  
in Safari and FF. I've struggled with this for a few hours now, and  
looked for answers, but to no avail.

http://www.widemannviolins.com/index.php


1. Text content:
The text drops down below the image on the right instead of being  
parallel to it. I'm sure I've seen something about this problem  
before in one of my books, but I can't find it for the life of me.

2. Stripes:
The gray stripes under the navigation bar at the top and the bottom  
redish band at the bottom drops too low (the bottom one gets tangled  
with the footer text.

3. The Main Nav bar text:
I have used WebAssist's CSS MenuWriter for this (I thought it would  
save time!). I am having trouble getting this to work well.  
Apparently IE requires width and height to be declared rather than  
auto. Is there any way to get this looking like it does in Safari and  
FF?
It's got it's own its own stylesheet: http://www.widemannviolins.com/ 
CSSMenuWriter/cssmw/menu_ie.css

The main style sheet is: http://www.widemannviolins.com/styles/ 
layout.css


Any help is much appreciated,
David
__
css-discuss [cs...@lists.css-discuss.org]
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/