[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
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
***
[WSG] IEv8 support for Data URIs?
Hi All, I was under an impression that IEv8 was to support Data URI format for images. Yet preliminary testing with IETester shows a lack of support. Can anyone confirm if IEv8 is to support the format? Preliminary test results for IEv8b2: 1. The NOT IE conditional comment failed. 2. Data URI failed. 3. * hack failed. Though in fairness these were at a glance, and not at all extensive. They may even be (IETester) installation issues. Mike Foskett http://websemantics.co.uk/ Disclaimer This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** 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
***
[WSG] Belinda Garfath/CO/HIC is out of the office. [SEC=No Protective Marking Present]
I will be out of the office starting 24/01/2009 and will not return until 02/02/2009. Save time-get your child's immunisation history statement online. NOTICE - This message is intended only for the use of the addressee named above and may contain privileged and confidential information. If you are not the intended recipient of this message you are hereby notified that you must not disseminate, copy or take any action based upon it. If you received this message in error please notify Medicare Australia immediately. Any views expressed in this message are those of the individual sender, except where the sender specifically states them to be the views of Medicare Australia. Please consider the environment before printing this e-mail *** *** 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
[WSG] Looking For Information
Hi. and this is not a very good design for accessibility. no contact information, i could seem to find. so posting below. cheers Marvin. Hi. went to this site at http://www.nigella.com and tried to signup, but not letting me and do you think i can find any contact information? i need help? maybe some one with some sight? tried a couple of e-mail addresses, but bounced back. getting frustrated. and my broadband connection is slow today? cheers Marvin. E-mail: startrekc...@gmail.com MSN: sttartrekc...@msn.com Skype: startrekcafe We Are The Borg! You Will Be Assimilated! Resistance Is Futile! Star Trek Voyager Episode 68 Scorpian Part One E-mail: startrekc...@gmail.com MSN: sttartrekc...@msn.com Skype: startrekcafe We Are The Borg! You Will Be Assimilated! Resistance Is Futile! Star Trek Voyager Episode 68 Scorpian Part One *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
