Re: [WSG] CSS IE6/7 - what a surprise
Hi Guys,
This is my first posting.
For clearing floats other reference which could be checked are :
http://reference.sitepoint.com/css/floatclear
Also the book Everything You Know About CSS is Wrong page 26
onwards there is material
regards
dhanishth
At 02:06 PM 1/23/2009, you wrote:
HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to
netrenderer) but not in:
IE6 - Mysterious margins are appearing between the header and the
top menu and in both coloured boxes in the right hand column of the
main content.
IE6+7 - the coloured boxes are not 'expanding' to contain the
content (in this case a floated image in both)
I found this CSS as an alternative to a clearing div and it seems to
fix things in other browsers - except those IE's:
#NameofContainingDiv:after {
clear: both;
content: .;
display: block;
height: 0px;
visibility: hidden;
}
Would anyone be able to have a look?
Here's the link:
http://www.igenerator.com.au/dev/sm09/homepage.htmlhttp://www.igenerator.com.au/dev/sm09/homepage.html
Any other thoughts, comments, suggestions - always appreciated.
TIA,
Henrik Madsen
Generator
mailto:hen...@igenerator.com.auhen...@igenerator.com.au
www.igenerator.com.au
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] CSS IE6/7 - what a surprise
Most likely a lack of hasLayout triggers or layout context changes, or both.
For the coloured boxes, add overflow:hidden to the divs with classes
catalougeMid and subscribeMid. This will force them into a new layout context
and in turn expand the container to contain all elements. If you want it to
apply to IE6 and IE7 only, use a selector hack:
* html .catalogueMid, * html .subscribeMid { overflow: hidden; } /* IE6 Only */
*:first-child+html .catalogueMid, *:first-child+html .subscribeMid { overflow:
hidden; } /* IE7 Only */
I'd have to fire up a VM to look at the IE6 issue and it's late :)
Regards,
Damian Edwards
Microsoft MVPhttps://mvp.support.microsoft.com/profile/Damian.Edwards |
ASP/ASP.NET
Readify | Senior Consultant
M: 0448 545 868 | E:
damian.edwa...@readify.netmailto:damian.edwa...@readify.net | C:
damian.edwa...@readify.netsip:damian.edwa...@readify.net | W:
www.readify.nethttp://www.readify.net/
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Henrik Madsen
Sent: Friday, 23 January 2009 19:37
To: wsg@webstandardsgroup.org
Subject: [WSG] CSS IE6/7 - what a surprise
HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to netrenderer) but not
in:
IE6 - Mysterious margins are appearing between the header and the top menu and
in both coloured boxes in the right hand column of the main content.
IE6+7 - the coloured boxes are not 'expanding' to contain the content (in this
case a floated image in both)
I found this CSS as an alternative to a clearing div and it seems to fix things
in other browsers - except those IE's:
#NameofContainingDiv:after {
clear: both;
content: .;
display: block;
height: 0px;
visibility: hidden;
}
Would anyone be able to have a look?
Here's the link:
http://www.igenerator.com.au/dev/sm09/homepage.html
Any other thoughts, comments, suggestions - always appreciated.
TIA,
Henrik Madsen
Generator
hen...@igenerator.com.aumailto:hen...@igenerator.com.au
www.igenerator.com.auhttp://www.igenerator.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS IE6/7 - what a surprise
Damian probably gave you your answer, but I'll also say that if you
review the original documentation from http://www.positioniseverything.net/easyclearing.html
for the code you're using, you'll see that they recommend
conditional comments to trigger hasLayout. In your case, in the head
of your document you should add:
!--[if IE]
style type=text/css
#NameofContainingDiv:after {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
/style
![endif]--
Either way, the end goal is the same.
On Jan 23, 2009, at 5:15 AM, Damian Edwards wrote:
Most likely a lack of hasLayout triggers or layout context changes,
or both.
For the coloured boxes, add overflow:hidden to the divs with classes
catalougeMid and subscribeMid. This will force them into a new
layout context and in turn expand the container to contain all
elements. If you want it to apply to IE6 and IE7 only, use a
selector hack:
* html .catalogueMid, * html .subscribeMid { overflow: hidden; } /*
IE6 Only */
*:first-child+html .catalogueMid, *:first-child+html .subscribeMid
{ overflow: hidden; } /* IE7 Only */
I’d have to fire up a VM to look at the IE6 issue and it’s late J
Regards,
Damian Edwards
Microsoft MVP | ASP/ASP.NET
Readify | Senior Consultant
M: 0448 545 868 | E: damian.edwa...@readify.net | C: damian.edwa...@readify.net
| W: www.readify.net
From: li...@webstandardsgroup.org
[mailto:li...@webstandardsgroup.org] On Behalf Of Henrik Madsen
Sent: Friday, 23 January 2009 19:37
Subject: [WSG] CSS IE6/7 - what a surprise
HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to
netrenderer) but not in:
IE6 - Mysterious margins are appearing between the header and the
top menu and in both coloured boxes in the right hand column of the
main content.
IE6+7 - the coloured boxes are not 'expanding' to contain the
content (in this case a floated image in both)
I found this CSS as an alternative to a clearing div and it seems to
fix things in other browsers - except those IE's:
#NameofContainingDiv:after {
clear: both;
content: .;
display: block;
height: 0px;
visibility: hidden;
}
Would anyone be able to have a look?
Here's the link:
http://www.igenerator.com.au/dev/sm09/homepage.html
Any other thoughts, comments, suggestions - always appreciated.
TIA,
Henrik Madsen
Generator
hen...@igenerator.com.au
www.igenerator.com.au
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS IE6/7 - what a surprise
Just to correct Todd's reply, the :after property isnt support by either
IE7 or IE6 (and below), therefore you would need to adjust your CSS to
state (assuming you're using a CSS hack, for ease of display):
#NameofContainingDiv {
*zoom: 1;
/* all your other styles for the element */
}
#NameofContainingDiv:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
David
Todd Budnikas wrote:
Damian probably gave you your answer, but I'll also say that if you
review the original documentation
from http://www.positioniseverything.net/easyclearing.html for the code
you're using, you'll see that they recommend conditional comments to
trigger hasLayout. In your case, in the head of your document you should
add:
!--[if IE]
style type=text/css
#NameofContainingDiv:after {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
/style
![endif]--
Either way, the end goal is the same.
On Jan 23, 2009, at 5:15 AM, Damian Edwards wrote:
Most likely a lack of hasLayout triggers or layout context changes, or
both.
For the coloured boxes, add overflow:hidden to the divs with classes
catalougeMid and subscribeMid. This will force them into a new layout
context and in turn expand the container to contain all elements. If
you want it to apply to IE6 and IE7 only, use a selector hack:
* html .catalogueMid, * html .subscribeMid { overflow: hidden; } /*
IE6 Only */
*:first-child+html .catalogueMid, *:first-child+html .subscribeMid {
overflow: hidden; } /* IE7 Only */
I’d have to fire up a VM to look at the IE6 issue and it’s late J
Regards,
*Damian Edwards
*Microsoft MVP
https://mvp.support.microsoft.com/profile/Damian.Edwards | ASP/ASP.NET
Readify | Senior Consultant
M: 0448 545 868 | E: damian.edwa...@readify.net
mailto:damian.edwa...@readify.net | C: damian.edwa...@readify.net
sip:damian.edwa...@readify.net | W: www.readify.net
http://www.readify.net/
*From:* li...@webstandardsgroup.org
mailto:li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] *On
Behalf Of *Henrik Madsen
*Sent:* Friday, 23 January 2009 19:37
*Subject:* [WSG] CSS IE6/7 - what a surprise
HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to
netrenderer) but not in:
IE6 - Mysterious margins are appearing between the header and the top
menu and in both coloured boxes in the right hand column of the main
content.
IE6+7 - the coloured boxes are not 'expanding' to contain the content
(in this case a floated image in both)
I found this CSS as an alternative to a clearing div and it seems to
fix things in other browsers - except those IE's:
#NameofContainingDiv:after {
clear: both;
content: .;
display: block;
height: 0px;
visibility: hidden;
}
Would anyone be able to have a look?
Here's the link:
http://www.igenerator.com.au/dev/sm09/homepage.html
Any other thoughts, comments, suggestions - always appreciated.
TIA,
Henrik Madsen
*Generator*
hen...@igenerator.com.au mailto:hen...@igenerator.com.au
www.igenerator.com.au http://www.igenerator.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS IE6/7 - what a surprise
ack.. sincere apologies. If you view positioniseverything.net, they
use a class of clearfix for this fix, and I think it is poor practice
to add mark-up to help IE behave. However, David is correct, as i
copied and pasted without checking myself. So the :after should have
been left out for the IE conditionals.
Again, sincere apologies for misinformation.
On Jan 23, 2009, at 5:16 PM, David Dixon wrote:
Just to correct Todd's reply, the :after property isnt support by
either IE7 or IE6 (and below), therefore you would need to adjust
your CSS to state (assuming you're using a CSS hack, for ease of
display):
#NameofContainingDiv {
*zoom: 1;
/* all your other styles for the element */
}
#NameofContainingDiv:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
David
Todd Budnikas wrote:
Damian probably gave you your answer, but I'll also say that if you
review the original documentation from http://www.positioniseverything.net/easyclearing.html
for the code you're using, you'll see that they recommend
conditional comments to trigger hasLayout. In your case, in the
head of your document you should add:
!--[if IE]
style type=text/css
#NameofContainingDiv:after {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
/style
![endif]--
Either way, the end goal is the same.
On Jan 23, 2009, at 5:15 AM, Damian Edwards wrote:
Most likely a lack of hasLayout triggers or layout context
changes, or both.
For the coloured boxes, add overflow:hidden to the divs with
classes catalougeMid and subscribeMid. This will force them into a
new layout context and in turn expand the container to contain all
elements. If you want it to apply to IE6 and IE7 only, use a
selector hack:
* html .catalogueMid, * html .subscribeMid { overflow: hidden; } /
* IE6 Only */
*:first-child+html .catalogueMid, *:first-child+html .subscribeMid
{ overflow: hidden; } /* IE7 Only */
I’d have to fire up a VM to look at the IE6 issue and it’s late J
Regards,
*Damian Edwards
*Microsoft MVP https://mvp.support.microsoft.com/profile/Damian.Edwards
| ASP/ASP.NET
Readify | Senior Consultant
M: 0448 545 868 | E: damian.edwa...@readify.net mailto:damian.edwa...@readify.net
| C: damian.edwa...@readify.net sip:damian.edwa...@readify.net
| W: www.readify.net http://www.readify.net/
*From:* li...@webstandardsgroup.org mailto:li...@webstandardsgroup.org
[mailto:li...@webstandardsgroup.org] *On Behalf Of *Henrik Madsen
*Sent:* Friday, 23 January 2009 19:37
*Subject:* [WSG] CSS IE6/7 - what a surprise
HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to
netrenderer) but not in:
IE6 - Mysterious margins are appearing between the header and the
top menu and in both coloured boxes in the right hand column of
the main content.
IE6+7 - the coloured boxes are not 'expanding' to contain the
content (in this case a floated image in both)
I found this CSS as an alternative to a clearing div and it seems
to fix things in other browsers - except those IE's:
#NameofContainingDiv:after {
clear: both;
content: .;
display: block;
height: 0px;
visibility: hidden;
}
Would anyone be able to have a look?
Here's the link:
http://www.igenerator.com.au/dev/sm09/homepage.html
Any other thoughts, comments, suggestions - always appreciated.
TIA,
Henrik Madsen
*Generator*
hen...@igenerator.com.au mailto:hen...@igenerator.com.au
www.igenerator.com.au http://www.igenerator.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS IE6/7 - what a surprise
Thanks for your replies.
Non-expanding div issue
I removed the :after stuff altogether (which initially broke the
layout in Mac browsers)
This fixed IE7:
*:first-child+html .catalogueMid, *:first-child+html .subscribeMid
{ overflow: hidden; }
Adding the following styles to the containing divs fixed IE6:
overflow: hidden;
zoom: 1;
And all seems fine in Mac browsers too now :s
IE6 mysterious gaps / margins
Remains unsolved. See between the header and the top menu and at the
top of the two coloured boxes in the RH column of the main content ???
http://www.igenerator.com.au/dev/sm09/homepage.html
TIA
Henrik Madsen
Generator
hen...@igenerator.com.au
www.igenerator.com.au
On 24/01/2009, at 7:16 AM, David Dixon wrote:
Just to correct Todd's reply, the :after property isnt support by
either IE7 or IE6 (and below), therefore you would need to adjust
your CSS to state (assuming you're using a CSS hack, for ease of
display):
#NameofContainingDiv {
*zoom: 1;
/* all your other styles for the element */
}
#NameofContainingDiv:after {
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
David
Todd Budnikas wrote:
Damian probably gave you your answer, but I'll also say that if you
review the original documentation from http://www.positioniseverything.net/easyclearing.html
for the code you're using, you'll see that they recommend
conditional comments to trigger hasLayout. In your case, in the
head of your document you should add:
!--[if IE]
style type=text/css
#NameofContainingDiv:after {
zoom: 1; /* triggers hasLayout */
} /* Only IE can see inside the conditional comment
and read this CSS rule. Don't ever use a normal HTML
comment inside the CC or it will close prematurely. */
/style
![endif]--
Either way, the end goal is the same.
On Jan 23, 2009, at 5:15 AM, Damian Edwards wrote:
Most likely a lack of hasLayout triggers or layout context
changes, or both.
For the coloured boxes, add overflow:hidden to the divs with
classes catalougeMid and subscribeMid. This will force them into a
new layout context and in turn expand the container to contain all
elements. If you want it to apply to IE6 and IE7 only, use a
selector hack:
* html .catalogueMid, * html .subscribeMid { overflow: hidden; } /
* IE6 Only */
*:first-child+html .catalogueMid, *:first-child+html .subscribeMid
{ overflow: hidden; } /* IE7 Only */
I’d have to fire up a VM to look at the IE6 issue and it’s late J
Regards,
*Damian Edwards
*Microsoft MVP https://mvp.support.microsoft.com/profile/Damian.Edwards
| ASP/ASP.NET
Readify | Senior Consultant
M: 0448 545 868 | E: damian.edwa...@readify.net mailto:damian.edwa...@readify.net
| C: damian.edwa...@readify.net sip:damian.edwa...@readify.net
| W: www.readify.net http://www.readify.net/
*From:* li...@webstandardsgroup.org mailto:li...@webstandardsgroup.org
[mailto:li...@webstandardsgroup.org] *On Behalf Of *Henrik Madsen
*Sent:* Friday, 23 January 2009 19:37
*Subject:* [WSG] CSS IE6/7 - what a surprise
HI all,
I'm hoping there's a simple solution to my two problems.
All looks fine in Mac browsers x5 and IE8b2 (according to
netrenderer) but not in:
IE6 - Mysterious margins are appearing between the header and the
top menu and in both coloured boxes in the right hand column of
the main content.
IE6+7 - the coloured boxes are not 'expanding' to contain the
content (in this case a floated image in both)
I found this CSS as an alternative to a clearing div and it seems
to fix things in other browsers - except those IE's:
#NameofContainingDiv:after {
clear: both;
content: .;
display: block;
height: 0px;
visibility: hidden;
}
Would anyone be able to have a look?
Here's the link:
http://www.igenerator.com.au/dev/sm09/homepage.html
Any other thoughts, comments, suggestions - always appreciated.
TIA,
Henrik Madsen
*Generator*
hen...@igenerator.com.au mailto:hen...@igenerator.com.au
www.igenerator.com.au http://www.igenerator.com.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
