[WSG] Max-width issues
Good Morning All,
I am having a bit of a problem with the old 'max-width' issue in IE and
would like to know your thoughts on the subject.
If I add this to my style sheet:
#outer_wrapper {
max-width: 800px; }
Then I am fine in FF but not in IE - in IE the outer container just
keeps stretching with the browser window. So if I add the following,
then all is well in all browsers BUT the code is no longer valid:
* html div#outer_wrapper {width: 800px /* fallback value */;
width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
1000 ? 800px : (((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) 570 ? 552px : 99.7%));
}
Is my syntax or something incorrect or is there just no way of adding
this fix without going 'invalid'?? Does the above code even belong in a
style sheet as it doesn't look like standard CSS to me. So you know, I
am a designer who is wholly self taught in XHTML/CSS/PHP so there are
huge gaps in my 'education' - I would therefore appreciate careful
handling. Having said that, the 10 years I spent in the military when I
should have been at Art School does mean I am capable of taking it
'straight' - I would just appreciate it if any derisory comments about
my code were followed by a helpful tip of how to put it right ;-)
Many thanks.
Kind regards,
Max.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Max-width issues
Hi John
John 'Max' Maxwell wrote:
#outer_wrapper {
max-width: 800px; }
Then I am fine in FF but not in IE
The max-width property unfortunately isn't supported by IE6
and below, which is where I assume the problem is.
I guess (and this is a guess) that max-width is actually fixed
in IE7 as long as you use a strict doctype.
How that helps.
Tim
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Max-width issues
Put the max-width expression in an IE-only stylesheet served up with
conditional comments. That way there's no need for the Holly Hack (in
fact, it's best to put anything that requires the Holly Hack in an IE-only
stylesheet) and your CSS will validate OK too.
On Tue, 03 Oct 2006 18:29:08 +1000, John 'Max' Maxwell
[EMAIL PROTECTED] wrote:
Good Morning All,
I am having a bit of a problem with the old 'max-width' issue in IE and
would like to know your thoughts on the subject.
If I add this to my style sheet:
#outer_wrapper {
max-width: 800px; }
Then I am fine in FF but not in IE - in IE the outer container just
keeps stretching with the browser window. So if I add the following,
then all is well in all browsers BUT the code is no longer valid:
* html div#outer_wrapper {width: 800px /* fallback value */;
width:expression(((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth)
1000 ? 800px : (((document.compatMode
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) 570 ? 552px : 99.7%));
}
Is my syntax or something incorrect or is there just no way of adding
this fix without going 'invalid'?? Does the above code even belong in a
style sheet as it doesn't look like standard CSS to me. So you know, I
am a designer who is wholly self taught in XHTML/CSS/PHP so there are
huge gaps in my 'education' - I would therefore appreciate careful
handling. Having said that, the 10 years I spent in the military when I
should have been at Art School does mean I am capable of taking it
'straight' - I would just appreciate it if any derisory comments about
my code were followed by a helpful tip of how to put it right ;-)
Many thanks.
Kind regards,
Max.
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
--
Tyssen Design
www.tyssendesign.com.au
Ph: (07) 3300 3303
Mb: 0405 678 590
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Max-width issues
John 'Max' Maxwell wrote: Is my syntax or something incorrect or is there just no way of adding this fix without going 'invalid'?? Does the above code even belong in a style sheet as it doesn't look like standard CSS to me. Your syntax is correct, and if you've got the values right it'll work fine in IE6 (and IE5+ win). Ref: http://www.gunlaug.no/contents/wd_additions_14.html An IE-expression is by definition: proprietary, non-valid, CSS - you can't make it valid. Nevertheless; IE-expressions belong in CSS, and nowhere else. You can hide it - and other non-valid workarounds for old IE-win - from the validator by putting them in a separate stylesheet, linked to from inside a 'conditional comment'. Ref: http://www.gunlaug.no/contents/wd_1_02_01.html#item2 regards Georg -- http://www.gunlaug.no *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Max-width issues
Hi Germ,
i must have the syntax wrong - just tried that and it stopped IE
working in addition to still being invalid CSS.
Was your whole CSS like this:
#outer_wrapper {
max-width: 800px;
}
* html div#outer_wrapper {width: 800px /* fallback value */;
width:_expression_((document.documentElement.offsetWidth
820)? "800px": "auto" );
}
I just tried this in my style sheet to no avail.
Cheers,
Max.
Germ wrote:
I
asked this question (or similar) just recently and so if you go through
the back issues, you will find some discussion about it and hears the
code that I used and it all works fine for me
width:_expression_((document.documentElement.offsetWidth
820)? "800px": "auto" );
***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
Re: [WSG] Max-width issues
Your syntax is correct, and if you've got the values right it'll work fine in IE6 (and IE5+ win). Ref: http://www.gunlaug.no/contents/wd_additions_14.html An IE-expression is by definition: proprietary, non-valid, CSS - you can't make it valid. Nevertheless; IE-expressions belong in CSS, and nowhere else. You can hide it - and other non-valid workarounds for old IE-win - from the validator by putting them in a separate stylesheet, linked to from inside a 'conditional comment'. Ref: http://www.gunlaug.no/contents/wd_1_02_01.html#item2 regards Georg Many thanks Georg - I've sorted it - great news!! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] CSS Unordered list
Hi Everybody,
Hi there! I just have a question to you css experts. I'm trying to make a
horizontal navigation from UL. I also added a background image which I
have attached. My problem is how to use ul#navlist li a:hover style on
my sixth LI that doesn't have a hyperlink. I want it to stay inline with
the other LI also. I have tried experimenting but I didn't have any luck.
I'm testing the result in IE, Opera and FF. Please see the CSS stylesheet
and html code below. Thank you!
sincerely,
Lala, Philippines
-
style type=text/css
ul#navlist {
padding:0;
margin:0;
width: 100%;
}
ul#navlist li {
display:inline;
}
ul#navlist li a{
float:left;
width:7em;
color: #fff;
background-color: green;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #FF;
font-family:verdana,arial,sans-serif;
font-size:11px;
line-height:22px;
font-weight:bold;
background-image: url(images/nav.jpg);
text-align: center;
}
ul#navlist li a:hover
{background-color:lime;
background:url(images/nav_hl.jpg);
color:#006600;
}
p
{
display:inline;
width:7em;
color: green;
background-color: green;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #FF;
font-family:verdana,arial,sans-serif;
font-size:11px;
line-height:22px;
font-weight:bold;
background-image: url(images/nav_hl.jpg);
text-align: center;
}
/style
table
tr
td
ul id=navlist
lia href=#Milk/a/li
lia href=#Eggs/a/li
lia href=#Cheese/a/li
lia href=#Vegetables/a/li
lia href=#Fruit/a/li
liTEST/li
/ul
/ul/td
/tr
/table
-
--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
attachment: nav.jpg
attachment: nav_hl.jpg
Re: [WSG] Doctype Strict JS drop down menus IE
I'm using project seven's pop menu magic http://www.projectseven.com/products/menusystems/pmm/index.htm on a site with XHTML strict doctype. This causes IE to come up with a yellow bar saying it is blocking active content - click to ..etc. This is not acceptable to the client. When I changed the doctype to transitional the problem went away, however I would prefer to stay with strict. Can someone please explain to me what is happening and what I need to do to fix this. Unfortunately I am unable to show you the site. -- I corrected your xml meta tag syntax and distilled your page down to the menu. I then removed all the redundant style rules and combined them into a more efficient mix - as best I could. There are still some redundancies, but none are harmful anymore. I embedded the corrected style sheet in the page head: http://www.projectseven.com/testing/customers/helen/ -- Al Sparber PVII http://www.projectseven.com Designing with CSS is sometimes like barreling down a crumbling mountain road at 90 miles per hour secure in the knowledge that repairs are scheduled for next Tuesday. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Getting the layout to work and with all browsers
Hi there. I'm looking to adopt a drop-down menu theme on my site. I've got most of it sorted, but there's still a few teething problems. If you look at www.camieabz.co.uk for an example of the existing navigation tabs first (no drop-down). The testsite link is www.camieabz.co.uk/menutest/index.html The pertinent CSS file is www.camieabz.co.uk/menutest/menustyle.css and is solely for the menu section of the styling. There may be bits and pieces in the other style sheet which need to come out. Problems: Opera / Firefox menu bar sits higher that drop-down menu, making navigation impossible. Original site tabs have an image which forms the left border of the tabs. On the new version, they don't show. Also there should be a small black arrow image on menu items 1.5 and 5.5 to indicate another sub level menu. No show either. Those are the important ones. The only other I can think of is that the original site tab colours are preferred, but the new ones are different. Appreciate any help, as the template I'm using has (for me at least) slightly more complicated selectors than usual. Many thanks! Dave Cameron. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Calling JS gurus
I'd like to get some feedback on this before I publish it and make a fool of myself ;) http://www.tjkdesign.com/articles/a_possible_alternative_to_innerHTML.asp Demo page: http://www.tjkdesign.com/articles/TJK_moveNodes_demo.asp --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Nice article.one comment (from the article you linked to): What's wrong with innerHTML? A few things: It's not a standard. It's a proprietary property that Microsoft introduced (along with the less popular outerHTML) that the other browser makers picked up. Ummwasn't our beloved XmlHttpRequest the same way? Cheers!!! Mike *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] IE Issue: focus not set on image buttons within a floated div
I have two image buttons that are not displaying a focus indicator in IE...this works fine in Firefox.The culprit seems to be the fact that both are within a div that's floating. Does anyone know a way around this. My client has made an issue of the fact that a user cannot seea visual indicator of focus when the user has tabbed to either of the buttons. Kevin Ruiz Web Designer First Data Government Solutions 11311 Cornell Park Drive, Suite 300 Cincinnati, OH 45242 p: 513.489.9599 x293 f: 513.489.6521 [EMAIL PROTECTED] www.govconnect.com ***List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
Re: [WSG] Calling JS gurus
innerHTML is good because it's quite a bit faster than DOM methods; if you don't need to manipulate the output further, there's nothing wrong with using innerHTML (IMHO; XHTML-fanatics may not agree). As to the article, I don't really understand what you're trying to do - doesn't cloneNode() do all that and more? *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Hi Matthew, innerHTML is good because it's quite a bit faster than DOM methods; if you don't need to manipulate the output further, But is it safe to assume that there will no such need? As to the article, I don't really understand what you're trying to do - doesn't cloneNode() do all that and more? AFAIK, cloneNode() duplicates a node with its children or the element by itself (shallow clone). It does not help much when you want to nest/wrap all the children of that node in/with a new element. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
innerHTML is good because it's quite a bit faster than DOM methods; if you don't need to manipulate the output further, there's nothing wrong with using innerHTML (IMHO; XHTML-fanatics may not agree). As to the article, I don't really understand what you're trying to do - doesn't cloneNode() do all that and more? I thought the same, but it doesn't. The plan is to turn something like: h1booh1 into h1spanboo/span/h1 and cloneNode() works if there is only one child node in there. In a case like h1spanbla/spanboo/h1 it'll fail. You need to loop through all childNodes and clone each of them. That said, I'd probably use innerHTML there. You can manipulate it anyways, as all you need to do is to loop through the childnodes again. innerHTML is lazy, but not evil. When it comes to heavy HTML manipulation or pulling in content from other sources it is a time saver. If you generate HTML from scratch within JavaScript, it is cleaner to use the DOM methods, as you leave a crumbstrail of variables behind. -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG Announce] Some links for light reading (4/10/06)
This is a one-way list for WSG Announcements This email covers: - Links for light reading - WSG and Industry events - Industry related Jobs (2 new jobs this week) If you have an event, resource or relevant job you'd like posted (from any country), please let me know. -- LINKS FOR LIGHT READING -- This weeks links for light reading are also available here: http://www.maxdesign.com.au/2006/10/04/some-links-99/ IE + JavaScript Performance Recommendations - Part 1 http://blogs.msdn.com/ie/archive/2006/08/28/728654.aspx Scab http://www.airbagindustries.com/archives/airbag/scab.php Microformats Bookmarklet http://leftlogic.com/info/articles/microformats_bookmarklet 10 Things That Will Make Or Break Your Website http://blog.auinteractive.com/10-things-that-will-make-or-break-your-website Competitive Analysis, Part 2 http://www.digital-web.com/articles/competitive_analysis_part_2/ Fresh01¹s redesign: more questions for the DTI http://www.brucelawson.co.uk/index.php/2006/fresh01s-redesign-questions-dti/ DTI Internal Review http://www.blether.com/archives/2006/09/dti_internal_re.php DTI responds to questions about their accessibility http://www.brucelawson.co.uk/index.php/2006/dti-responds-to-questions-about- their-accessibility/ Markup Maker http://accessify.com/tools-and-wizards/developer-tools/markup-maker/default. php Bytefx - a fast, lightweight and crossbrowser library http://www.devpro.it/bytefx/index.php Go Pink for Breast Cancer Awareness Month http://pinkforoctober.org/ YouTube¹s Video Poker http://www.nytimes.com/2006/09/30/business/30tube.html?ei=5088en=aeecb773b8 9eec33ex=1317268800partner=rssnytemc=rsspagewanted=print Monoslideshow - your photos on your site http://www.monoslideshow.com/index.php How to Add an API to your Web Service http://particletree.com/features/how-to-add-an-api-to-your-web-service/ -- WSG AND INDUSTRY EVENTS -- Special Melbourne Meeting: Jeremy Keith (Melbourne) - October 5 The WSG and Web Directions are very proud to present Jeremy Keith, this Thursday evening in Melbourne. Jeremy is in Australia for the WD06 conference, and is only in Melbourne for a few days. He has kindly agreed to give a presentation entitled The Joy of API. http://webstandardsgroup.org/meetings/index.cfm?event_id=75 October Web Standards Group meeting (Sydney) - 19 October A joint meeting with the WSG and Sydney Flash Platform Developers Group The Web - a blind perspective - Lee Kumutat, Training and Braille Products Manager from Quantum Technology will be talking about the web from a blind perspective. The mobile web - what you need to know right now Dominique Lee will be exploring the mobile web, where it is at and where it is going and what you need to know right now! Sponsored by Access Testing http://webstandardsgroup.org/meetings/index.cfm?event_id=74 RSVP: [EMAIL PROTECTED] IDEA2006 (Seattle) 23-24 October IDEA 2006 brings together a diverse set of designers, creators, and researchers addressing a fundamental challenge we're facing today - how to let everyday people take true advantage of the overwhelming mass of information that floods their lives. http://www.ideaconference.org/ Open Standards (Sydney) - 25-27 October OASIS Open Standards 2006 is the fourth annual Asia Pacific event where both management and technical professionals from the business and government sector can gather to share expertise and promote open discussion on the latest technologies, applications and services supporting the global e-Business community. http://www.open-standards.com/ Web Accessibility Workshops * Sydney - 2 November * Canberra - 14 November These full-day workshops run by Vision Australia, are targeted at web-development team leaders, corporate communications professionals and business managers, along with content authors, web programmers and designers and web contract managers. These workshops provide a thorough overview of accessibility issues and how to address them. They cover the World Wide Web Consortium's Content Accessibility Guidelines and their implementation and a consideration of assessment tools and techniques. Details and registration: http://www.visionaustralia.org.au/ais/webworkshops/ http://www.visionaustralia.org.au/ais/webworkshops/ Writing for the Web Workshop (Melbourne) - 2 November This practical workshop run by Vision Australia focuses on enhancing the usability and accessibility of your web content and will teach you how to communicate effectively with your readers. Course Outline: http://www.visionaustralia.org.au/info.aspx?page=685 http://www.visionaustralia.org.au/info.aspx?page=685 Registration details: http://www.visionaustralia.org.au/info.aspx?page=608
Re: [WSG] IE Issue: focus not set on image buttons within a floated div
Is it not due to IE not using :focus like other browsers? To get it to accept :focus on buttons, you'd need to use javascript. A bit hard to tell though without seeing any code or a link. On Wed, 04 Oct 2006 04:26:32 +1000, Ruiz, Kevin [EMAIL PROTECTED] wrote: I have two image buttons that are not displaying a focus indicator in IE...this works fine in Firefox. The culprit seems to be the fact that both are within a div that's floating. Does anyone know a way around this. My client has made an issue of the fact that a user cannot see a visual indicator of focus when the user has tabbed to either of the buttons. Kevin Ruiz Web Designer First Data Government Solutions 11311 Cornell Park Drive, Suite 300 Cincinnati, OH 45242 p: 513.489.9599 x293 f: 513.489.6521 [EMAIL PROTECTED] www.govconnect.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
You've hit the nail on the head with parsing, but development (coding lines), wise innerHTML is a useful hack as you say. 'Tis a pity that loadXML is at document level rather than executable at node. MSIE XML data islands were not bad for that and in closed environments a real timesaver (I've used it in Yahoo Messenger Plugins): http://dean.edwards.name/weblog/2006/04/easy-xml/ -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE Issue: focus not set on image buttons within a floated div
On Wed, 04 Oct 2006 04:26:32 +1000, Ruiz, Kevin [EMAIL PROTECTED] wrote: I have two image buttons that are not displaying a focus indicator in IE...this works fine in Firefox. The culprit seems to be the fact that both are within a div that's floating. Does anyone know a way around this. My client has made an issue of the fact that a user cannot see a visual indicator of focus when the user has tabbed to either of the buttons. Please expand... 1. Does the focus appear when the div is not floated? 2. Are you using input or button? As mentioned before, :focus doesn't work in IE 6 and below, but I'm not sure if that is actually your problem. -- -- Christian Montoya christianmontoya.com ... portfolio.christianmontoya.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Thierry Koblentz wrote:
I'd like to get some feedback on this before I publish it and make a
fool of myself ;)
http://www.tjkdesign.com/articles/a_possible_alternative_to_innerHTML.asp
Demo page: http://www.tjkdesign.com/articles/TJK_moveNodes_demo.asp
That doesn't seem to be a true alternative to innerHTML, it only seems
to fulfil one particular use case by moving childNodes from one parent
to another.
innerHTML does several things and has both getter and setter functions.
Getter: returns the markup representation as a string.
Setter: Parses the provided string into a DocumentFragment, removes all
children from the element appends the new fragment.
It's working with a string that seems to be the controversial part of
innerHTML. I wrote an alternative for its getter function which returns
a document fragment instead of a string. The setter function can then
be replaced by a function that removes all child nodes and appends that
fragment.
Node.prototype.cloneChildNodes = function() {
var df = document.createDocumentFragment();
for (var i = 0; i this.childNodes.length; i++) {
df.appendChild(this.childNodes[i].cloneNode(true));
}
return df;
}
Note: That script is just a demonstration of the concept and, while it
will work in modern browsers, it won't work in IE. That script was
originally written in this comment:
http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/#comment12
As for the arguments against innerHTML that you referred to in your article:
* It's not a standard...
Many features started their lives as non-standard extensions and that is
changing.
http://www.whatwg.org/specs/web-apps/current-work/#dynamic0
* Since it's not a standard, it isn't terribly future proof. It's not
supposed to work under the application/xhtml+xml MIME type that XHTML
documents are supposed to be served under. (Firefox 1.5 changed this
by allowing it for some reason)
Although it wasn't originally designed by MS to only work in HHTML
(probably because IE doesn't support XHTML), there is no reason it can't
work as long as the string is well-formed. It is going to be defined by
the WHATWG.
http://www.whatwg.org/specs/web-apps/current-work/#dynamic1
* innerHTML is a string. The DOM is not a string, it's a hierarchal
object structure
That's true, but markup starts as a string in a file and when a file is
loaded that string is parsed into the DOM structure. What makes parsing
a file acceptable, but parsing a string during a script execution
unacceptable?
* It makes for some nearly illegible code in a lot of instances, with
escaped quotes and plus signs all over the place appending data to
the string, which in my opinion makes it difficult to maintain.
I agree that building markup in scripts by concatenating strings is bad
practice and that is not an ideal use of innerHTML. However, innerHTML
is perfect for when you receive a string of HTML from an another source
(e.g. via XHR or input from a textarea)
--
Lachlan Hunt
http://lachy.id.au/
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Calling JS gurus
Actually, if you pass the optional boolean parameter to cloneNode as true, it turns into a true deep clone [1]. I've used this many times before - don't know why I didn't think of this earlier when I replied... Mike [1]: W3C DOM Documentation: http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-1950641247 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Michael Yeaney wrote: Actually, if you pass the optional boolean parameter to cloneNode as true, it turns into a true deep clone [1]. I've used this many times before - don't know why I didn't think of this earlier when I replied... But then you end up with a duplicate of the whole node, not just its children. See my reply as well as Christian's to Matthew. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Lachlan Hunt wrote:
Thierry Koblentz wrote:
I'd like to get some feedback on this before I publish it and make a
fool of myself ;)
http://www.tjkdesign.com/articles/a_possible_alternative_to_innerHTML.asp
Demo page: http://www.tjkdesign.com/articles/TJK_moveNodes_demo.asp
That doesn't seem to be a true alternative to innerHTML,
That's why I called it a possible alternative... ;)
it only seems
to fulfil one particular use case by moving childNodes from one parent
to another.
I think it eases the job of wrapping all the children of a node into a new
element inside that same node.
Like in this simple example (using an A element):
h1This is the emTitle/em/h1
h1aThis is the emTitle/em/a/h1
Node.prototype.cloneChildNodes = function() {
var df = document.createDocumentFragment();
for (var i = 0; i this.childNodes.length; i++) {
df.appendChild(this.childNodes[i].cloneNode(true));
}
return df;
}
Note: That script is just a demonstration of the concept and, while it
will work in modern browsers, it won't work in IE. That script was
originally written in this comment:
http://www.456bereastreet.com/archive/200609/automatic_pullquotes_with_javascript_and_css/#comment12
It says in these comments that the author did not find a DOM alternative and
instead went with a CSS solution.
As for the arguments against innerHTML that you referred to in your
article:
* It's not a standard...
Many features started their lives as non-standard extensions and that
is changing.
Although it wasn't originally designed by MS to only work in HHTML
(probably because IE doesn't support XHTML), there is no reason it
can't work as long as the string is well-formed. It is going to be
defined by the WHATWG.
* innerHTML is a string. The DOM is not a string, it's a hierarchal
object structure
That's true, but markup starts as a string in a file and when a file
is loaded that string is parsed into the DOM structure. What makes
parsing
a file acceptable, but parsing a string during a script execution
unacceptable?
* It makes for some nearly illegible code in a lot of instances, with
escaped quotes and plus signs all over the place appending data to
the string, which in my opinion makes it difficult to maintain.
I agree that building markup in scripts by concatenating strings is
bad practice and that is not an ideal use of innerHTML. However,
innerHTML
is perfect for when you receive a string of HTML from an another
source (e.g. via XHR or input from a textarea)
I think I need to remove this link from there, I'm getting too much feedback
about something I didn't even wrote ;)
As a side note, I came across a comment of yours on
http://domscripting.com/blog/display/35 (the very first one) and I'm
surprised how that comment differs from the feedback you're giving me
here...
---
Regards,
Thierry | www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] obj.style.backgroundImage
I'm curious to know if anyone here have successfully applied a background image to an IMG element through scripting? I can apply a background color but I can't make style.backgroundImage work. --- Regards, Thierry | www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Thierry Koblentz wrote: As a side note, I came across a comment of yours on http://domscripting.com/blog/display/35 (the very first one) and I'm surprised how that comment differs from the feedback you're giving me here... Yeah, I know, but opinions change. But what I said was still true though, I have never used it for anything but testing. I still prefer to use the more structured DOM methods where possible, but there are use cases where innerHTML is the best solution. -- Lachlan Hunt http://lachy.id.au/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Calling JS gurus
Lachlan Hunt wrote:
Thierry Koblentz wrote:
As a side note, I came across a comment of yours on
http://domscripting.com/blog/display/35 (the very first one) and I'm
surprised how that comment differs from the feedback you're giving me
here...
Yeah, I know, but opinions change. But what I said was still true
though, I have never used it for anything but testing. I still prefer
to use the more structured DOM methods where possible, but there are
use cases where innerHTML is the best solution.
NP. As I said, I was not really interested in hearing about innerHTML (been
there done that). That was not the purpose of my post.
In short, I wanted to know if this (for small nodes of course):
var objSpan=document.createElement('span');
while(obj.childNodes.length)objSpan.appendChild(obj.childNodes[0]);
obj.appendChild(objSpan);
Is better or not than this:
obj.innerHTML='span'+obj.innerHTML+'/span'
And if not, why?
The thing is that if this solution is good/decent, I can change the tone
of the article so people can feel confident about using the method. Right
now, this article sounds more like I'm not even sure that it's worth using
it ;)
And that would help me remove the smileys from there too...
---
Regards,
Thierry | www.TJKDesign.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
