[WSG] Rendering difference between Strict Transitional doctypes in FF, IE8 Safari
Heya, We've found a really strange issue with some CSS layout when serving a page with XHTML 1.0 Transitional vs. XHTML 1.1 (or XHTML 1.0 Strict), in Firefox 3, Safari IE8. The exact same behaviour is seen using the HTML 4.01 versions of the doctypes too. From what I've readhttp://hsivonen.iki.fi/doctype/, the transitional doctypes will force these browsers into almost standardshttps://developer.mozilla.org/en/Gecko%27s_%22Almost_Standards%22_Mode mode, but that should only effect the calculation of the height of table cells that contain just images, which is not the case here (all CSS layout). It only affects a few elements on the page (see links below) and is driving us mental. We need to serve this page as transitional as it uses a 3rd party service that requires an iframe. Anybody ever come across anything like this? Served with strict doctype screenshothttp://files.damianedwards.com/HTML401Strict.PNG Served with transitional doctype screenshothttp://files.damianedwards.com/HTML401Transitional.PNG Regards, Damian Edwards MSysDev (CSturt) Readify | Senior Consultant Microsoft MVPhttps://mvp.support.microsoft.com/profile/Damian.Edwards: ASP/ASP.NET Head Office | Suite 408, Life.Labs Building | 190 Harbour Esplanade | Docklands | VIC 3008 | Australia 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/ [cid:image001.jpg@01C9F59A.ED216FD0]http://readify.net/about-readify/press/readify-makes-2008-mis-strategic-100-list/ The content of this e-mail, including any attachments is a confidential communication between Readify Pty Ltd and the intended addressee and is for the sole use of that intended addressee. If you are not the intended addressee, any use, interference with, disclosure or copying of this material is unauthorized and prohibited. If you have received this e-mail in error please contact the sender immediately and then delete the message and any attachment(s). *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** inline: image001.jpg
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] RE: Forms - Drop down width
AKAIK drop-downs are one line only, i.e. there is no way to make text wrap. The usual solution is to set the title attribute of each option element so that at least the user can hover over an option to see its full text, but it's a sub-optimal solution really. Regards, Damian Edwards Microsoft MVPhttps://mvp.support.microsoft.com/profile/Damian.Edwards | ASP/ASP.NET Readify | Senior Consultant M: 0448 545 868 | E: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] | C: [EMAIL PROTECTED]sip:[EMAIL PROTECTED] | W: www.readify.nethttp://www.readify.net/ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Likely, James A. Sent: Thursday, 16 October 2008 09:02 To: wsg@webstandardsgroup.org Subject: [WSG] Forms - Drop down width Hello, I am working on a registration form and found a problem with how IE7 handles the drop downs. If I set a width in the CSS on the drop down, the text will not wrap and be cut off. I don't want to have to set a full width as the drop down is reminder answers and will be a bit long. Does any one know how to control the drop down width and to make it so the text wraps. Any help would be great! Example code is: form label for=questionReminder question:/label select name= id=question width=200 style=width:200px; optionSelect a Reminder Question/option optionWhat is the first and last name of your first boyfriend or girlfriend? /option optionWhich phone number do you remember most from your childhood?/option optionWhat was your favorite place to visit as a child? /option optionWho is your favorite actor, musician, or artist?/option /select /form Thanks Jamie *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Chrome and Safari
From what I can tell Safari 3.1 for Windows and Google Chrome use exactly the same version of WebKit (according to their respective user agents anyway), so they should render identically. JavaScript DOM support is a different matter though. Regards, Damian Edwards Microsoft MVP | ASP/ASP.NET Readify | Senior Consultant M: 0448 545 868 | E: [EMAIL PROTECTED] | C: [EMAIL PROTECTED] | W: www.readify.net -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Thursday, 16 October 2008 11:50 To: wsg@webstandardsgroup.org Subject: [WSG] Chrome and Safari Hi, Seeing as though Google's new Chrome browser uses the same rendering engine as Apple's Safari, would it be acceptable to test browser layout issues in Chrome and assume the same CSS solutions apply in Safari? Does anyone know of any distinct differences in CSS rendering between the 2 browsers? ___ Christian Fagan Fagan Design fagandesign.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Chrome and Safari
They are different engines from a JavaScript DOM perspective. So while they both support most of the same JavaScript DOM features, there are differences so you need to exercise the usual caution. I don't know what the differences are exactly but I've seen sites that have JS fail in Chrome that works in Safari 3.1. Regards, Damian Edwards Microsoft MVPhttps://mvp.support.microsoft.com/profile/Damian.Edwards | ASP/ASP.NET Readify | Senior Consultant M: 0448 545 868 | E: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] | C: [EMAIL PROTECTED]sip:[EMAIL PROTECTED] | W: www.readify.nethttp://www.readify.net/ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Brett Patterson Sent: Thursday, 16 October 2008 12:06 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Chrome and Safari May I ask how so, for future reference please? On Wed, Oct 15, 2008 at 8:59 PM, Damian Edwards [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] wrote: From what I can tell Safari 3.1 for Windows and Google Chrome use exactly the same version of WebKit (according to their respective user agents anyway), so they should render identically. JavaScript DOM support is a different matter though. Regards, Damian Edwards Microsoft MVP | ASP/ASP.NEThttp://ASP.NET Readify | Senior Consultant M: 0448 545 868 | E: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] | C: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] | W: www.readify.nethttp://www.readify.net -Original Message- From: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]mailto:[EMAIL PROTECTED]] On Behalf Of [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] Sent: Thursday, 16 October 2008 11:50 To: wsg@webstandardsgroup.orgmailto:wsg@webstandardsgroup.org Subject: [WSG] Chrome and Safari Hi, Seeing as though Google's new Chrome browser uses the same rendering engine as Apple's Safari, would it be acceptable to test browser layout issues in Chrome and assume the same CSS solutions apply in Safari? Does anyone know of any distinct differences in CSS rendering between the 2 browsers? ___ Christian Fagan Fagan Design fagandesign.com.auhttp://fagandesign.com.au *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED]mailto:[EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
