Re: [WSG] Including a DIV element inside an HREF tag
One alternative is perhaps to replace all block elements inside the a element into inline ones... Or the other would be to use javascript, and bind an onclick event onto the div. On Wed, Nov 4, 2009 at 11:51 PM, James O'Neill freexe...@gmail.com wrote: If you are worried about validation an anchor tag cannot have block elements in it, if I remember correctly, which is a little annoying. I think HTML2 and HTML5 correct this. Barring validation, it seems like the way to do it. I am not sure, but you may want to check how IE6 handles this too. On Wed, Nov 4, 2009 at 06:39, dionisis karampinis dkarampi...@gmail.comwrote: Hello to all! I would like your comments regarding the inclusion of a DIV, inside a Link tag. I need to make the following div element - 'linkable' , as such when the user hovers on it, to be able to follow a link to another page. e.g. a href=http://www.impelmedia.co.uk/index.php/services/design/; *div id=service1 p class=servicepMy Heading/p p class=summaryLorem ipsum text lorem ipsum text lorem ipsum text orem ipsum text lorem ipsum text orem ipsum text lorem ipsum text/p /div* /a Do you think this is a semantic way of structuring these elements or not ? And if not do you know if there are any other alternatives so i could perform the same functionality? Thanks in advance Regards Dionisis K *** 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] Installing More than one version of IE6
I came across this, but I'm a bit wary of any hidden downsides to it: http://www.xenocode.com/Browsers/ On Fri, Jul 3, 2009 at 1:22 PM, Darrin Potaka dpot...@gmail.com wrote: Hi - I hope this is on topic - I'm asking because I try to author to good standards... I need to install IE 6.0 alongside of IE 8. Running WIN XP SP 3. The multiple installer at TredoSoft which used to work wont install - are there any other options? Darrin *** 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] working with line-height
Hi list, I frequently have to work with pixel-perfect design, and I'm always having trouble with line-height in particular. Please take a look at this example: http://www.hellobenlau.net/wsg/index.html I'm wondering if there was a way to top align the text to its line-height. So say, with text size 20px, could the top of the 'T' be aligned to the top of the pink box? How does the 'gap' above and below the text gets calculated? Thanks Ben [] *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] working with line-height
Hi Georg, Close, but this poses bit of layout issue surrounding the text. This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif So there'll be a div with padding top and bottom of 20px, and with text inside. If I do: div style=padding:20px 0 psome text/p /div The gap would include both the padding and the anonymous inline boxes (thanks Russ), which works out to be 20px. Could there perhaps be a way to calculate the amount of white-space for these anonymous inline boxes? I'm not trying to achieve exact look across all browsers, I understand it's impossible. But I'm trying to achieve to make it look like the design at least.. in 1 browser (just so my designers are happy). Thanks. Ben On Thu, Jul 2, 2009 at 10:34 AM, Gunlaug Sørtun gunla...@c2i.net wrote: Ben Lau wrote: http://www.hellobenlau.net/wsg/index.html I'm wondering if there was a way to top align the text to its line-height. So say, with text size 20px, could the top of the 'T' be aligned to the top of the pink box? Is this what you want? http://www.gunlaug.no/tos/alien/bl/test_09_0702.html Note that you can't really get pixel perfect alignment across browser-land, as there will always be some em-to-pixel rounding deviation. Georg -- http://www.gunlaug.no *** 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] using skip links
Thanks Jon. It's not really a promotion, but more like a related sub content. Ideally I'd like it to be placed after the actual content, but the design had to be this way. Is it safe to say that screen reader and/or text-based browser users would 'learn' a web page? I figured if I could follow Jon's second idea consistently for these pages, users could then adapt to this structure. Thanks for your help. On Wed, May 13, 2009 at 10:17 PM, Jon Gunderson jong...@gmail.com wrote: One idea is the first skip should be skip to title and the second link skip to content. a second ideas is for your second link to be skip over promotion It is not clear to me why there would need to be promotional material between the heading and the content. COuld you send a link of an example? Jon On Tue, May 12, 2009 at 8:30 PM, Ben Lau bensan...@gmail.com wrote: Hi all, I am to build templates for a page, and below is a pseudo example of my code order: -skip to #content- [div#navigation] a name=content/a [h1] [div#promotion] [div.content] I've always believed my h1 should always come after the 'content' anchor (or within a #content div), so when screen reader skips my navigation to the content, they're able to read the h1 as well. Ideally I'd like to connect the h1 and div.content together, however I'm stuck with the div#promotion in between as I need to adhere to the visual layout. I was thinking of inserting another skip link to .content (and add another anchor name before it), so it'll read as: -skip to #pageContent- [div#navigation] a name=pageContent/a [h1] -skip promotion to #content- [div#promotion] a name=content/a [div.content] My question is, is it bad to have a skip link right after you've skipped from the top? (hope I've explained it well...) Thanks, Ben *** 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] using skip links
Hi all, I am to build templates for a page, and below is a pseudo example of my code order: -skip to #content- [div#navigation] a name=content/a [h1] [div#promotion] [div.content] I've always believed my h1 should always come after the 'content' anchor (or within a #content div), so when screen reader skips my navigation to the content, they're able to read the h1 as well. Ideally I'd like to connect the h1 and div.content together, however I'm stuck with the div#promotion in between as I need to adhere to the visual layout. I was thinking of inserting another skip link to .content (and add another anchor name before it), so it'll read as: -skip to #pageContent- [div#navigation] a name=pageContent/a [h1] -skip promotion to #content- [div#promotion] a name=content/a [div.content] My question is, is it bad to have a skip link right after you've skipped from the top? (hope I've explained it well...) Thanks, Ben *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Implication of empty divs
From the CSS Mastery Advanced Web Standards Solutions book by Andy Budd, and I quote: Many people mistakenly believe that a div element has no semantic meaning. However div actually stands for *division *and provides a way of dividing a document into meaningful areas. So by wrapping your main content area in a div and giving it an ID of mainContent, you are adding structure and meaning to your document. But as far as i know, screen readers do not pick up IDs or classes? So even by declaring a div ID=mainNav, it's still not enough to describe what's inside the div? I'm starting to get awfully confused... On Tue, Feb 10, 2009 at 5:19 AM, Chris F.A. Johnson c...@freeshell.orgwrote: On Mon, 9 Feb 2009, Joseph Taylor wrote: That's a great link. It also shows that an extra empty element, while it may be the easy way out works across the board without side effects of any kind. Yes it is mixing content and presentation. Many DIVs (and SPANs) are, in fact, used for presentation rather than semantic reasons. They exist only so that they can have styling applied to them. They don't provide any information about WHAT they contain. On Feb 9, 2009, at 3:23 AM, Benjamin Hawkes-Lewis bhawkesle...@googlemail.com wrote: On 9/2/09 07:45, Chris F.A. Johnson wrote: How can CSS overflow replace div style=clear:both;/div? See http://www.ejeliot.com/blog/59 -- Chris F.A. Johnson, webmaster http://woodbine-gerrard.com === Author: Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress) *** 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] Implication of empty divs
Hi all, Are there any (seriously) bad implications of having empty DIVs around your HTML document? I try to avoid using them personally, but there are cases where the visual design has forced me to add empty divs (or spans) just to achieve the look. Apart from adding extra weight and cluttering the document, I understand screen readers do not pick up divs and spans? Would I be better off to insert these meaningless decorative tags using javascript and modifying the DOM, while non-javascript users would see a more cut down version of the design? Do screen readers pick up javascript and events? Cheers, ben *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Implication of empty divs
Haha, thanks. But I also do appreciate the long answers though; thanks Benjamin. I've read on numerous blogs/tutorials/comments that having blank div is poor practice, and that it's also poor semantic markup because it's meaningless. I mention the javascript alternative because i'll be using these empty divs purely for decorative purposes, so if non-javascript can't see the yellow block that goes em to the left of my website, I'm not that concerned. I'm just worried about screen readers picking up that empty div. So then you guys have no problem in using it for clearing as opposed to overflow:hidden/auto? On Mon, Feb 9, 2009 at 1:50 PM, Anthony Ziebell anth...@fatpublisher.com.au wrote: If you use a tool such as tidy html in xhtml mode it will delete your empty tags... probably a setting to turn that feature off, but something to think about... Cheers, Anthony. Gerard Hynes (Gmail) wrote: My advice below. Cheers, Gerard On Mon, Feb 9, 2009 at 9:33 AM, Ben Lau bensan...@gmail.com bensan...@gmail.com wrote: Hi all, Are there any (seriously) bad implications of having empty DIVs around your HTML document? I try to avoid using them personally, but there are cases where the visual design has forced me to add empty divs (or spans) just to achieve the look. Apart from adding extra weight and cluttering the document, I understand screen readers do not pick up divs and spans? I'm not expert about screen readers, but I did run a site I upgraded through JAWS with some interesting results. The site had alot of pnbsp;/p due to the CMS they were using and JAWS would translate this to/speak out blank which wasn't ideal. Am not sure if it would do the same for p/p or div/div or div /. Would I be better off to insert these meaningless decorative tags using javascript and modifying the DOM, while non-javascript users would see a more cut down version of the design? Do screen readers pick up javascript and events? Javascript solution could work, but I would run your page through a screen reader first and see if you're happy with the result. You can download demo of JAWS fromhttp://www.freedomscientific.com/products/fs/jaws-product-page.asp You'll probably identify other areas of content that could be improved for screen readers. He's a good article about the topichttp://www.webaim.org/techniques/screenreader/ Cheers, ben *** 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 *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] issues with too many divs
Hi all, I'm not a fan of having too many DIVs on a page, but due to complicated background designs, I'm forced to use additional wrapper DIVs just to achieve the look. Are there any major downfall in doing so apart from increasing page size? I'd like to be able to convince our designer to simplify the design... Thanks *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] headings to divide sections
Hi all,
I know it's a good idea to have skipping links at the top of your HTML
('main content' section, 'main navigation' section), but does it help to
have a heading to those sections as well?
So for example:
a href=#mainNavFirst level navigation/a
div id=mainNav
h2First level navigation/h2
ul
...
/ul
/div
CSS:
#mainNav h2 { position:absolute; left:-em; top:-em }
I didn't use display:none because screen readers would ignore it, hence I'm
using absolute positioning. Is this a good idea, or would it add more noise?
Thanks
Ben
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] is there a way to force legend text shows in TWO lines?
try white-space:normal...? On Thu, Nov 27, 2008 at 1:43 PM, tee [EMAIL PROTECTED] wrote: On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote: 2) I have a column that is 160px wide, but the text in legend is a bit longer, I added a span class, declared a width, but in Firefox, the text still refuse to run in two lines - the rest of the text simply get cut off when the words reaches 160px threshold. I really don't want to add a br /, and it will be more ridiculous to use a p tag for the text so that I can force it display exactly the way my client wanted, then use a negative text-indent to hide the legend. Did you set the span to display: block? Yes, that is the first thing I did. No use. Here is a quick page I just did. http://lotusseedsdesign.com/csstest/legend.html tee *** 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] ***
[WSG] mxing value units
Hi,
I'm just wonder if there are any repercussions in mixing value units for
short-handed properties?
i.e.
padding: 1em 0px 1em 20px;
or
background:url('bg.gif') 100% 25px no-repeat;
or
background:url('bg.gif') right 25px no-repeat;
or
background:url('bg.gif') 50% bottom no-repeat;
...
etc.
I vaguely remember reading somewhere that older browsers have trouble
rendering this. Modern IE6, IE7, FF seem to handle it alright.
Thanks!
ben
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Coding for CSS3?
Hi all, I'm having trouble deciding whether to begin coding using CSS3, such as using (but not limited to) opacity. Although the CSS validator returns an error, but it claims it'll be supported in CSS3. As far as i know, FF2, FF3, Opera and Safari already renders the opacity property, leaving Internet Explorer, which we could use alpha properties in separate stylesheets and conditional comments. Anyone know if IE8 supports it? I haven't had a good look at all CSS3 properties yet, but I'm wondering if this is a good time to code for the future? Or better to wait for official release of CSS3? If CSS3 is released tomorrow, what about older browsers like IE6? Cheers, Ben *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Semantic markup of a byline date/time
Hi Jens, Normally I'd use spans for all 3 elements, but I'm quite interested to find out a better way of doing this. Did you manage to find a solution to this? Regards, Ben On Tue, Jul 15, 2008 at 5:07 PM, Jens-Uwe Korff [EMAIL PROTECTED] wrote: Hi all, I'm trying to find a semantic representation of the following construct which is part of an article template: Byline goes here July 15, 2008 - 3:51PM Page 1 of 2 | Single page The current implementation uses proprietary byline and date tags and a span for the pagination information. I thought of using a low-level h5 for the byline since it's somehow connected to the main h1 further up the page. Maybe a ul for the pagination info? Suggestions welcome! Cheers, Jens The information contained in this e-mail message and any accompanying files is or may be confidential. If you are not the intended recipient, any use, dissemination, reliance, forwarding, printing or copying of this e-mail or any attached files is unauthorised. This e-mail is subject to copyright. No part of it should be reproduced, adapted or communicated without the written consent of the copyright owner. If you have received this e-mail in error please advise the sender immediately by return e-mail or telephone and delete all copies. Fairfax does not guarantee the accuracy or completeness of any information contained in this e-mail or attached files. Internet communications are not secure, therefore Fairfax does not accept legal responsibility for the contents of this message or attached files. *** 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] ***
[WSG] columns with matching vertical alignment
Hi all, I would like to know the best (or at least better and simple) way to achieve this kind of design. I have uploaded a sample design image for convenience: http://www.hellobenlau.net/design.gif Basically I need to have the lists at the bottom of each columns to match up vertically, but the content paragraph above it is supposed to be dynamic (clients could enter a novel if they wish). I don't think setting the list to be position:absolute and bottom:0 would be ideal, nor setting a min-height on the paragraph. What should be the best approach for this? Thanks a million! *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
