Re: [WSG] how to force a cache bypass?
(See below) On 8/2/12 9:50 PM, James Ducker wrote: Second that. If you can version the filenames that's definitely the most sure-fire way to make sure users don't cache old copies. James On 3 August 2012 14:39, Emmanuel Negri nna...@gmail.com mailto:nna...@gmail.com wrote: Sometimes a random query string does not work. Changing the filename itself works 100% of the time. Eg. style-scm-revision-number.css Manu On 03/08/2012, at 1:25 PM, James Ducker james.duc...@gmail.com mailto:james.duc...@gmail.com wrote: Append some junk querystring to the end of the URL, like example.com/index.html?20120803132400 http://example.com/index.html?20120803132400. Every time it changes, stuff will be refreshed. Wouldn't really recommend doing it for regular pages because it makes the URLs look messy, but if you're trying to refresh scripts or images, go nuts. James On 21 July 2012 03:22, Rob Crowther robe...@boogdesign.com mailto:robe...@boogdesign.com wrote: On 20/07/2012 17:47, coder wrote: How can I make a web page appear as the latest version in all browsers, i.e., perform a cache bypass? And I don't mean for me - I mean for all visitors to the page? Is it possible? ?? Once it's cached in the browser there's not much you can do about it, the browser will store the cache settings at the time when it cached the page and if those settings say don't check again for a month then, generally, it won't. If you want the page to never be cached then you need to set the expiry header. With Apache servers this is quite straightforward and can usually be done in the directory's .htaccess file: ExpiresByType text/html access plus 0 seconds This is example was take from HTML5 BoilerPlate: https://github.com/h5bp/html5-__boilerplate/blob/__83f4f281866be1cf7f391738c53c44__8a5ac658e9/.htaccess#L233 https://github.com/h5bp/html5-boilerplate/blob/83f4f281866be1cf7f391738c53c448a5ac658e9/.htaccess#L233 Rob You may be interested in this automated way of doing it: http://derek.io/blog/2009/auto-versioning-javascript-and-css-files/ -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] cross-browser or vendor-specific CSS
On 6/29/12 7:20 AM, Kevin Erickson wrote: Hi, I am asking if anyone uses http://ecsstender.org/ to write CSS cross-browser code or, if not, what are you using to write CSS cross-browser or vendor-specific code? Short answer - I don't even try to make all browsers act alike. :) Start with a simple design for mobile and old browsers. Add advanced CSS inside @media queries or qualified by :root. Enhance IE 7 and 8 if you need to with rules governed by conditional comments. This is my version of progressive enhancement. YMMV. Looking at the documentation for eCSStender suggests to me there's going to be a severe performance hit on page load. I hope I'm wrong. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] cross-browser or vendor-specific CSS
On 6/29/12 11:08 AM, coder wrote:
- Original Message - From: David Hucklesby
Start with a simple design for mobile and old browsers. Add advanced
CSS inside @media queries or qualified by :root.
qualified by :root? can you give us an example here?
In HTML, :root is functionally equivalent to html. Not supported by IE
prior to version 9, so a rule like this:
:root .thumbs .figure { display: inline-block; }
...would be ignored by old IE.
HTH
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] WSG: Best Practice Page/Content Tools [SEC=UNOFFICIAL]
On 2/26/12 2:06 PM, Blumer, Luke wrote: Hi all, I have been looking at sites that contain a selection of tools for content, generally looking after print, email, and text size, shown in the below site. http://www.educationtaxrefund.gov.au/ I'm not sure why you'd need that - assuming visitors even notice or bother to investigate those buttons. Please don't emulate it too closely. A bigger text size of 15px still looks tiny on my laptop. :( You can give this functionality to everyone using CSS and a normal email link - even when scripting is blocked. Personally, I'm considering using a size that defaults to 20px body text at the fairly usual 96 DPI desktop setting. (i.e. 125%.) I got used to that size on my previous laptop that was set to 120 DPI. On a 14 inch screen, 1400px by 1050px, it seemed right. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Expected behaviour of links to external websites
On 12/21/11 5:04 AM, Patrick H. Lauke wrote: On 21/12/2011 12:16, coder wrote: In one sense, this argument is fallacious, because whatever the web designer does decides what happens when a user just 'clicks a link'. In my experience, most folk 'out there' don't know about right clicking. To say 'it is the user's choice' is mainly untrue, because he/she doesn't know they've got a choice, and what happens depends upon what the designer has coded. A tired argument, but based on the premises that: - most users don't know they can open links explicitly in a new window/tab - the vast majority of links out on t'internet are simply that, straight links, with no extra target=_blank or similar the fact that a link takes them away to another site is, as a consequence, the expected behaviour that those non-savvy users have. By trying to be extra good (here, let me open this in a new window for you), designers may arguably be breaking that expectation and confusing those users, rather than helping them. [...] Excellent points. If your reason for wanting to open a new window or tab is to be helpful, I suggest telling your visitors about the right-click option right there on your web page. If a link does open a new window, say so. A case could be made for opening PDFs in a new window. But this always breaks the back button, and I doubt there are many who don't know about that browser feature. :) -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Expected behaviour of links to external websites
On 12/21/11 9:35 AM, Patrick H. Lauke wrote: On 21/12/2011 17:14, David Hucklesby wrote: Excellent points. If your reason for wanting to open a new window or tab is to be helpful, I suggest telling your visitors about the right-click option right there on your web page. Ah, but then do you also need explain about tap-and-hold context menus on touchscreens? Or about keyboard shortcut equivalents, for all browser/OS combinations? And for those who do know, does it not sound patronising? It's a difficult balancing act, and I generally take the - maybe hardline - attitude that it's not our job to educate users about how to use their browsers. As long as our site works for them, we shouldn't require them to learn new commands/ways of working (this reminds me of my many futile attempts to get parents/wife/friends/colleagues to correctly use features in software...and then being reminded of http://xkcd.com/763/ ) :) P LOL. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Is it possible to style an attribute?
On 12/19/11 10:47 PM, Benjamin Hawkes-Lewis wrote: On Tue, Dec 20, 2011 at 4:38 AM, Grant Bailey wrote: Hello, I was wondering if anyone could clarify whether it is possible to style an attribute. I realise this sounds odd, so allow me to explain what I wish to do. In my web page there are a number of terms that need to be defined. I like the user to be able to hover over the term and get the definition that way. For example: dfn title=Made famous in the#8216;Star Trek#8217 TV seriesteleportation/dfn ... produces Made famous in the 'Star Trek' TV series ... when the user hovers over the defined term 'teleportation'. [...] In general, I'd strongly recommend putting your definitions in plain view, along with anything else users might want to read: dfnteleportation/dfn, made famous in theciteStar Trek/cite TV series Simple, robust, understood. [...] Expanding on Benjamin's good suggestion, if your intent is to avoid cluttering the main text with these definitions, you could put them into a margin to one side of the text. (Sidenotes.) I stole this idea from Robert Bringhurst's The Elements of Typographic Style. Lots more ideas relevant to web page layout in that book. :) -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Content div sticking out the side of container div
On 12/2/11 8:01 PM, Stevio wrote: Thanks for the suggestions. I am trying to develop a flexible layout (so I do not want to set a width for the parent element) for web sites that will be used in conjunction with a content management system. The width of child element will therefore be unknown as well depending on what content and images have been entered. I would much rather that the browser's horizontal scrollbar appear for the page than have the content stick out the side which looks very ugly and messy. Even if I specify a % for the child element, the contents of the child element may be greater in width. I have found a solution and that is to use display:table-cell. Even in 2011, there are still situations where the use of tables in one form or another still trumps other display options lol. If you want something that expands and contracts to fit its contents, tables (the CSS variety) still seem to be the best option. FWIW display: inline-block; float: left|right; position: absolute; also exhibit a shrink-to-fit behavior. As already mentioned, max-width: 100%; on the child element may stop it poking out of the parent. CSS gives you many options. :) -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] nav element
On 11/22/11 6:32 AM, Frances de Waal wrote: Hi, Working with the semantical HTML5 elements I keep feeling aversion to the extra elements I am producing. Like the nav element, using it as a container for a menu in an list does not feel as an advantage, I never needed a container for the list before. I trained myself in keeping the code as clean and small as possible and now I am simply creating more elements. How about a nav element containing just links? I can think of answer myself like that a nav element may also contain a header, or contain paragraph with links inside the text. So this could lead to the conclusion that (with keeping in mind to never use an element unless you need it) that I should only use the nav element in such cases, and that a nav element around a simple list is not adding anything to it but creating more code. Anyone having any thoughts on this? FWIW - I also include a heading element inside the nav element (or div class=nav ). This is for the benefit of non-visual agents, or for cases where CSS is not applied. (Go naked day ???) example: nav h2Site Navigation/h2 ul lia href=??Home/a/li ... /ul /nav This heading is not needed where convention dictates the purpose of the links - as in the case of a menu bar, for example. So it can be moved off screen or otherwise visually hidden, but available to screen readers etc. HTH. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Wrapping text before float drop
On 11/3/11 10:52 AM, Stevio wrote:
If I have two floats side by side, both are floated left as follow:
.myfloat{ float:left; }
and both contain text as follows:
div class=myfloatLonger amount of text. Longer amount of text.
Longer amount of text. Longer amount of text./div div
class=myfloatSmall amount of text./div
Is there any way to prevent the second div from dropping below the
first div when the viewport is narrowed, without specifying widths
for either of the floats?
Other than ways already suggested, and assuming the shorter text fits on
one line, try putting the small amount of text first in the markup, and
floating that DIV only. You can apply a variety of styles to the longer
text to get it to fit the remaining space without float drop.
It's a complex subject, but this page sums it up quite nicely, I think:
http://www.css-101.org/block-formatting-contexts/index.php
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] IE9's Browser Mode Controls - Reliable?
On 9/23/11 7:58 AM, Janice Schwarz wrote: On Fri, Sep 23, 2011 at 6:41 AM, Cole Kuryakinc...@koisis.com wrote: [...] This way of switching browser modes (between 7, 8 and 9) is quite convenient but... is it a true representation of how the project will render in these three browsers? [...] I've been using those browser mode settings in IE for a while, even in a corporate setting. They seem to be fairly accurate. I think that, generally speaking, it is better than using browsershots or browsercam, since those just give screenshots and can't test functionality. I use those for testing things I don't have access to (like Mac-specific or IE6 specific issues...even then, those are only so helpful and only address layout issues, not functionality). Janice's points are valid. FWIW I have come across several bugs in IE 7 when page zoom is applied. Not only won't you see this from a screen shot, but IE 8 in compatibility mode does not exhibit most of the problems I came across. Not tried IE 9's modes, though. As well as native browsers running in Windows installs under VMWare Fusion on my Mac, I also use IETester in Windows 7. So far I have found it accurate - and more convenient than firing up several VMs. http://www.my-debugbar.com/wiki/IETester/HomePage HTH. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE issues: display none vs absolute position for show/hide effect
On 6/15/11 10:24 PM, tee wrote:
Repost, change subject line.
David and Jon,
I am not trying to hide the texts from desktop screen and has screen
reader able to read it - I want the content be available at all time
for search engines, browsers, CSS enabled/disabled and JS
enabled/disabled.
I am simply using a simple show/hide script to achieve a visual
effect - a show/hide effect like this:
http://www.learningjquery.com/2006/09/slicker-show-and-hide
[...]
But IE appears to have issue when no display:none is used.
jQuery('#mini-cart').hide(); jQuery('#mini-cart-a').click(function()
{ jQuery('#mini-cart').toggle(400); return false; });
But that's the reason it shows up momentarily on slow connections. I
suspect it only shows in IE due to longer latency in those old browsers
- JavaScript takes a whole bunch longer to kick in.
Using jQuery hide comes too late in those browsers. Which is precisely
the problem that the solution I offered is designed to address.
Some folks sure are stubborn! ;)
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] IE7 page load issue, can it be prevented?
On 6/14/11 7:45 PM, tee wrote:
David,
Thanks for the response. I made two screencasts.
In advanced browsers and no problem. The dropdown at the left top
somtimes does show through if the connection is very slow and the
page takes more than 10 seconds to load.
http://www.youtube.com/watch?v=Z11rqWBLLuc
In this movie taken from IE7, between 17 to 18 seconds you can see
the hidden layers (choose your tea and tea bag (2) ) shown through
while the page is still loading.
http://www.youtube.com/watch?v=dI9QvAFKoSM
I am trying to find a way if it's possible to prevent this from
happening despite the slow connection.
On Jun 14, 2011, at 8:21 AM, David Hucklesby wrote:
On 6/13/11 6:31 PM, tee wrote:
Some pages of the site loads very slow in IE7 (about 15
seconds), and while the page was loading and (I assume) IE7 was
still parsing the scripts, all the hidden elements shown through.
I wander if there is a way to prevent this.
https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gEfeat=directlink
[...]
Here's what works for me. I include this code in thehead of the document:
!-- add class=js to html element if JavaScript is on -- script
type=text/javascript document.documentElement.className='js';
/script
To display/hide an element, div#part-2 for example, use this CSS:
.js #part-2 { display: none; } /* hide if JS is enabled */
Apologies if I misunderstood. Your example code is beyond my
comprehension this early morning... :(
Tee,
How are you hiding that content in the first place? (Your code is beyond
my feeble brain's comprehension. Sorry.)
This is exactly what the code I sent you is meant to avoid. Without JS,
the hidden content shows up. With JS, the 'js' class is applied before
the page loads. Thus the CSS rule to hide that content applies, and the
content has no chance of appearing until your script overrides it.
Does this not work for you? Or are you using this technique, and somehow
find it fails?
Sorry I can't be much more help.
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] IE7 page load issue, can it be prevented?
On 6/13/11 6:31 PM, tee wrote:
Some pages of the site loads very slow in IE7 (about 15 seconds),
and while the page was loading and (I assume) IE7 was still parsing
the scripts, all the hidden elements shown through. I wander if there
is a way to prevent this.
https://picasaweb.google.com/weblist99/Jun132011?authkey=Gv1sRgCKrj4sKyz-33-gEfeat=directlink
If I understand you correctly, you have sections on the page that are
set to display if JavaScript is off, but want to hide them before the
page loads in the event scripting is enabled?
Wisely, you don't rely on the noscript element - that does not work if
scripts are blocked by a firewall.
Here's what works for me. I include this code in the head of the document:
!-- add class=js to html element if JavaScript is on --
script type=text/javascript
document.documentElement.className='js';
/script
To display/hide an element, div#part-2 for example, use this CSS:
.js #part-2 { display: none; } /* hide if JS is enabled */
Apologies if I misunderstood. Your example code is beyond my
comprehension this early morning... :(
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] the image is not showing in IE7
On 6/3/11 7:47 AM, Joseph Taylor wrote:
Try losing the double quotes like:
win.document.write('body style=background-color:
#EBF2FA;h4Loading.../h4img src=ajax-loader.gif
style=border:1px solid;/body');
[...]
On 6/3/11 10:34 AM, Mahendran Venkatesan wrote:
Hi Folks!
I just tried to open a popup window. And, dynamically i embed an
image in the popup window. The image is not showing up in IE
browsers. But it's being seen in FireFox.
the code looks like below:
[...]
You may like to try using innerHTML instead of document.write();
With pop-up blockers everywhere, pop-up windows increasingly don't work.
They are a usability problem as well. I'd look for an alternative
solution if I were you.
--
Cordially,
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] what is the exact version of FF 3.6 x prior to FF4?
On 3/31/11 1:44 AM, tee wrote: Thanks all! On Mar 31, 2011, at 1:05 AM, Fabien BENARIAC wrote: After upgrading to FF4, most addons worked -- until I restarted FF. I just have to re-install firebug... YSlow was ok after for me. btw, I think a upgrade is usefull (I don't understand why you want to run FF3x modules with FF4x...) Sometimes I hate it when I asked a simple question and having to end up explaining the background story in details:) I don't want to run FF3x addons with FF4x. I want to run a separate FF3x with addons that don't work for FF4 yet. Try http://davemartorana.com/multifirefox/ -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] HTML5 v. HTML 4.x
On 1/27/11 6:42 AM, Steve Green wrote: That's exactly my point. At any point in time there will be projects where you should use safe, well-understood, well-supported technologies and there will be other projects where you can try out new cutting-edge ones. When making this choice, you should put aside your personal preferences and broader goals (such as 'improving the web' or 'forcing users to upgrade their browsers') and base it on what's most appropriate for your client. Agreed. But I don't see a conflict with HTML5 here. Over half your client's audience likely has a browser that has excellent support for established HTML5 features. I believe that many features of HTML5 save time and effort, leaving you with perhaps one or two non-conforming browsers for which you have to code and test JavaScript routines. I'm thinking of embedded video; required form fields; even fancy slider controls--things like that. HTML5 is indeed an ongoing project, far from complete. But there are many useful features that are well established and can save a lot of headaches. This is becoming even more true as the Web rapidly moves from an era of point-and-click to one of tap-and-swipe... -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS variable navigational menu`
On 1/9/11 10:24 AM, Thierry Koblentz wrote: These two essentially are the same. I am assuming the menu is controlled by a javascript, best practise is to use the absolute positioning to control submenu and use the toogle or mouseover to trigger the sub-level. I'm not sure this is considered best practice as keyboard users would have to go through all the links in the menu before reaching the last one. These two examples show the difference between styling the sub menus off-screen or via display:none - http://www.tjkdesign.com/articles/new_drop_down/default.asp - http://www.tjkdesign.com/articles/keyboard_friendly_dropdown_menu/EK.asp +1 I have adapted the first of these very successfully, even adding fancy fade effects for those who have scripting enabled. Very adaptive, and does exactly what you want, I think. (Assuming you only have few sub-menu items, as your example indicates,,,) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE hasLayout - the long and short of it
On 1/5/11 11:12 PM, G.Sørtun wrote:
On 06.01.2011 07:21, David Hucklesby wrote:
Here's my attempt to put a gradient behind some headings. To get
Microsoft's gradient filter to work, I must give the headers
layout. This causes the headings to expand in width in IE6, and
to shrink in IE7:
http://thewebwiz.net/temp/has-layout-long-and-short/
Since you're apparently are using an em-sized layout, removing all
present triggers and then adding...
.vcalendar h3 { width: 21em; }
...should trigger hasLayout without negative effects.
An essential part of the layout is the shrink-to-fit float around the
calendar. (It could be positioned or inline-block, too.) In real
browsers, the headings are only as wide as the longest calendar entry.
Applying a specific width won't give me this result. I tried width:
100%; but that failed the same way.
Thanks to Al, too. Your quickie solution is exactly what I am using!
It appears to be the existence of hasLayout on the .vcalendar that
causes the problem (due to it being floated...)
On 1/6/11 6:57 AM, Birendra wrote:
Hi David
As I seen your css, I try to add this value in yourh3 css
Display: Block
And then see is it work or not.
Nope. Sorry.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] IE hasLayout - the long and short of it
On 1/6/11 9:43 AM, Thierry Koblentz wrote: Hi David, It appears to be the existence of hasLayout on the .vcalendar that causes the problem (due to it being floated...) I don't think this is the issue per se. Imho, the problem is that this float is width-less. Give it with a width and things should work the way you want. Yes. You are correct. B-b-b-but -- giving it a width destroys the shrink-to-fit behavior; the only reason for using a float in the first place! (I need to improve my language skills, as I seem unable to get this point across...) (FWIW I get the same result using other shrink-to-fit displays, since they all introduce layout in older IE.) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE hasLayout - the long and short of it
Re: http://thewebwiz.net/temp/has-layout-long-and-short/ On 1/6/11 5:05 PM, Jon Reece wrote: Hi David, Sorry, I was in a hurry and didn't read all that I should have, also didn't notice that removing hasLayout also removed the filter. Maybe you want to try PIE (css3pie.com)? - Jon That had me stoked for a minute or so. VML--the poor webmaster's canvas element--seemed such a good idea! Then I came across this in the documentation for PIE: In order to automatically detect element position and dimension changes, PIE has to force hasLayout on the target element (in IE6 and IE7). It does so by applying the style zoom:1; to the element. Oh, well. It seemed like such a good idea. Thanks. P.S. On the actual site, I have overridden the float declaration on the enclosing .vcalendar with float: none; for IE 6 and 7 only. The headings are now full width on those browsers, and the sky has yet to fall... ;) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Detecting Mobile user agent - what methods work best?
On 1/6/11 8:10 PM, Mike Kear wrote: I have to convert a client site to enable phone users to use the site and I was wondering what is the best method to detect the mobile user agent and switch the css sheet? As far as I have seen, there are a few ways to do this - which is best? (or maybe the way to put it is 'least bad') [A] a link at the top of the normal page, linking to a mobile version of the page. (yuk) [B] javascript detection (but there are thousands of mobile devices to detect. YUK ) [C] Use CSS @media handheld (but many mobile phones don't support the handheld media type ) [D] server side detection using CGI.User_Agent (but there are so many user agents to detect) [E] screen resolution detection (but is that reliable?) Are there any other ways to do this? Rather than doing a switch for mobile agents, I read recently a proposal to do basic styling for mobile first. Then filter advanced styles for browsers, from smart phones to desktops that understand @media queries, simply by declaring some @media filters at the bottom of the style sheet. I don't remember where I read it, but it seems to me to have other advantages--old browsers like IE6 would only get the simple styles, too, making it much easier to give IE6 visitors a pleasant experience without the usual extensive fix-ups some layouts seem to need. While I don't have a link to the original, very short article, the idea has been taken up by others: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu (If that breaks, try http://goo.gl/VqJE ) The downside is that neither IE7 nor IE8 understand @media queries. The idea I am playing with uses Paul Irish's Conditional stylesheets vs CSS hacks idea to filter rules for IE 6-8. http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ (Broken? try http://goo.gl/CRQY ) I'll certainly be interested in any other possibilities. I have not got very far with this myself... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] IE hasLayout - the long and short of it
Here's my attempt to put a gradient behind some headings. To get Microsoft's gradient filter to work, I must give the headers layout. This causes the headings to expand in width in IE6, and to shrink in IE7: http://thewebwiz.net/temp/has-layout-long-and-short/ Any solution, even a scripting one, will be most gratefully welcome. Thank you for your time. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] disallow IE6 to load the main style sheet
On 12/20/10 6:14 PM, Chad Kelly wrote: - Original Message - From: Erickson, Kevin (DOE) kevin.erick...@doe.virginia.gov To: wsg@webstandardsgroup.org Sent: Tuesday, December 21, 2010 7:51 AM Subject: RE: [WSG] disallow IE6 to load the main style sheet Yes. Thank you Felix! best viewed works much better. [...] This is where I came in. (2002) All that said, I don't test in IE6 anymore and have not done so for a year or so. The Year of Living Dangerously? ;) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Re: WSG Digest (was disallow IE6...)
On 12/20/10 6:57 AM, Thierry Koblentz wrote: Using IE conditional comments on the html tag, you can target each version of IE. You can does not mean you should... In a comment [1] on forabeautifulweb, Molly Holzschlag says: Please, please don’t design for browsers. [1] http://forabeautifulweb.com/blog/about/universal_internet_explorer_6_css/#r7 Perhaps expectations are too high? I took my first Web class in 2002, and learned both table-based and CSS layouts using IE 5.5 and Netscape 4. CSS rendering in IE was good enough then to convince me that CSS layouts are preferable. And, no, my pages did not look the same in both browsers. But similar, and equally usable, was good enough for me then... and now. Thanks to all for adding useful tools to my toolbox. Season's greetings! Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Document Formats
On 11/30/10 11:52 AM, Erickson, Kevin (DOE) wrote: Hi All, The website I work with receives a lot of documents to be posted that come in the form of Word, PowerPoint and Excel documents. And now, with the release of the latest versions of Ms Office, they are coming to me with an X on their extensions. I have information in the footer of all the web pages for access to free viewers for all documents including these latest extensions. This may be an adequate CYA but I am not convinced it is the best practice. I know this must be confusing for some of our visitors. I would like to ask any of you if you have had to deal with multiple document formats and how you handled this for the best user accessibility. I am thinking the best practice is to have, first, a browser/HTML version, second, a PDF version, and after that whatever version the document was created as, i.e. Ms Word, PowerPoint, etc. [...] I'd opt for just the HTML version. After all, HTML was created to solve precisely this problem--people trying to communicate using incompatible software... Of course, the conversion may not be easy. :\ Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] all media queries in one style sheet Vs individually served
On 11/11/10 4:57 AM, G.Sørtun wrote: Years since I tested what browsers actually did, and much has changed since then. I do prefer to spread styles in logical groups over a few stylesheets, to a certain degree. If nothing else it helps on maintenance and reuse. 1. Will the desktop browser stops loading the above 3 media unless requested? A browser will load everything, as long as it supports, or pretends to support, the link or @import media and queries used. It will put styles to use as needed and supported. 2. If I link each media type individually, does the desktop browser actually load the above 3 style sheets? Same answer. [...] So, it is my advice that you don't filter more than you have to at the link and @import stages, even if that means slightly fatter stylesheets. In addition to Georg's (always) excellent advice, there are several ways of slimming down style sheets that might help you, Tee: 1. Use a set styles instead of a reset to avoid duplication 2. Minify your style sheets (can be done on the server) 3. Gzip all text-based assets. (You do that anyway, right?) 4. Combine those style sheets you can using server-side code. (But I may be teaching my grandmother to suck eggs[1]...) Cordially, David -- [1] http://en.wikipedia.org/wiki/Teaching_grandmother_to_suck_eggs *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] A simple IE and JS detection method?
On 11/1/10 3:15 AM, Foskett, Mike wrote:
Hi David,
How, without using conditional comments at all, do I target IE
6,7, and 8
I was asking how I'd be able to target all three *without* any
CCs.
Add an extra script line?
script type=text/javascript/*![CDATA[*/var
isIE=/*...@cc_on!@*/false;document.documentElement.className+=
isIE;/*]]*//script
Not perfect but adequate for most cases.
Nice. But hardly more clear for future CSS coders than CCs, especially
if they don't know JavaScript?
.gradientBg {...
Sorry, mate. That won't work. All IEs will get the solid
background with the filter image on top. Not what you'd want at
all... :(
I'll admit that snippet was untested but you can see a working
example here:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
The Browse and Convert image are pure CSS. Background gradients
appear to work fine in IE6+, Firefox and Safari. Untested in Opera
though so please tell me if the button doesn't degrade well.
I considered the methods too clunky for use in production though.
Not quite so nice in Opera, but good. Unfortunately I was not asking
about gradients--my question involved emulating RGBa colored backgrounds
in Internet Explorer... :\
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] A simple IE and JS detection method?
On 10/29/10 3:22 PM, G.Sørtun wrote:
On 29.10.2010 23:33, David Hucklesby wrote:
Perhaps you know of a browser-safe filter for IE8?
Don't know about safe, but maybe you can find what you need here...
http://www.gunlaug.no/contents/styles/target-browser.css
Thank you, Georg. Your valuable comments in that file actually convinced
me to stay with the Paul Irish CCs method. It just seems safer, as
well as relatively easy to understand. After all, this:
.ie8 .hacked-element {...}
seems to me clearer than
@media all {
html:lang(en) body .hacked-element {...}
}
:)
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] A simple IE and JS detection method?
On 10/29/10 2:13 AM, Foskett, Mike wrote:
[...]
David,
How, without using conditional comments at all, do I target IE 6,7,
and 8
From the example:
bg {background: #fff}
.IE6 bg,
.IE7 bg { filter: progid: etc...}
.IE8 bg { -ms-filter: progid: etc}
Precisely. I was asking how I'd be able to target all three *without*
any CCs.
Though I personally for what you're asking I'd do it in one style
rule like this:
.gradientBg {
background:#f1f0f3;
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0, #f8f7fa), color-stop(1, #cfcbd8));
background-image: -moz-linear-gradient(rgba(248,247,250, 1) 0%,
rgba(207,203,216, 1) 100%);
filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8);
-ms-filter:
progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFf8f7fa,
endColorstr=#FFcfcbd8));
}
Covers everything you ask plus Firefox, Safari and IE8+.
Sorry, mate. That won't work. All IEs will get the solid background with
the filter image on top. Not what you'd want at all... :(
(FWIW - I actually tried this.)
And what about my browser of choice, Opera. Not popular in the US or UK,
I know, but has an equal presence with Safari and Chrome in Europe, an
even bigger presence in other parts of the world, and a major browser on
small devices like phones. RGBa() has my money...
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] A simple IE and JS detection method?
On 10/29/10 12:05 PM, Thierry Koblentz wrote: goes against the separation of the three layers No it doesn't, it's purely presentational. No better or worse thanli class=last imho, CCs have nothing to do with the presentational layer, they are part of the structural layer and they are junk markup if you ask me :) In principle, I entirely agree. But this does not help me target IE6, IE7, and IE8, each of which has its own needs for which I know no other work-around. Yes, I can and do use underscore and star filters. But IE8??? Perhaps you know of a browser-safe filter for IE8? My source for CSS filters is this Wikipedia page... http://en.wikipedia.org/wiki/CSS_filters Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] A simple IE and JS detection method?
On 10/28/10 5:25 PM, Mathew Robertson wrote: I'll stick my neck out and say... dont do it for the CSS bit... specifically, you should be asking - What is the point of adding a specific class to html/body for a specific browser? In particular, using this technique discourages the whole graceful degradation thing. And it adds complexity to the markup too, which doesn't necessarily help your brain. Its an idea which can be used, but that doesn't mean all ideas are good ideas... Okay. A specific scenario: I use RGBa backgrounds quite a lot. IE prior to v.9 supports RGBa backgrounds via its gradient filter. How, without using conditional comments at all, do I target IE 6,7, and 8, bearing in mind that the solid background color I give very old browsers must be removed from these versions of IE? IMHO, adding classes to the HTML tag this way is far cleaner than using a number of IE-only style sheets, and the complexity all those conditional comments add to the markup as well... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] attribute selectors to target external and internal links
On 10/21/10 2:49 PM, tee wrote:
I tried but couldn't get it to work.
I tried these:
a[href=http://site.com] {color: #e21;background: #555;}
a[href=http://www.site.com] {color: #e21;background: #555;}
a[href=http://subdomain.site.com/] {color: #e21;background: #555;}
a[href^=http://subdomain.site.com] {color: #e21;background: #555;}
a[href^=http://subdomain.site.com/] {color: #e21;background:
#555;} and also tried yours a[href*=http://subdomain.site.com]
{color: #e21;background: #555;}
The only way I could get it works is this:
a[href^=http]{color: #e21;background: #555;}
tee
On Oct 20, 2010, at 5:51 PM, Thierry Koblentz wrote:
If you deal with absolute paths, you should be able to match
internal links with this:
a[href*='domain-name']
-- Regards, Thierry
Umm. In your particular case, 'domain-name' would be 'site.com'. I
believe Thierry meant you to use -
a[href*=site.com] {...}
Is that what you tried?
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] un-border-collapse, possible?
On 9/19/10 2:17 PM, tee wrote:
Hi David,
Just got a chance to revisit this issue.
I want the border radius for table.
[...]
I needed to do something like #6 (still not perfect due to the space
in th cell) without the hassle of #6 codes, but it's not possible
with simple code like this:
table {border-radius: 15px; border-collaspe: collapse} table, th, td
{border:1px solid #369; }
http://www.lotusseedsdesign.com/css-test/table/table.html
tee
On Sep 15, 2010, at 5:59 PM, David Hucklesby wrote:
On 9/15/10 10:42 AM, tee wrote:
When border-collapse is declared, it can't do border-radius.
I have this: table {border-collapse:collapse}
[...]
I'm unclear as to whether you want the table border rounded, or the
table cells? I'm going to assume you mean the individual cells,
since you mention border-collapse--which applies to the cells.
Aside: the border-collapse does not affect the border on the
table. But you already knew that...
Ahh! Okay--I was wrong. As you demonstrate, the collapsed borders on
the cells extend to the edge of the table, beyond the rounded part of
the table's own border. So they _do_ affect the border on the table!!!
I was going to suggest using the rules attribute of the table, but I
see that this, too, is buggy in several browsers...
I'll play with this later, and let you know if I come up with something.
Sorry to have misled you.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] un-border-collapse, possible?
On 9/20/10 2:48 PM, David Hucklesby wrote:
On 9/19/10 2:17 PM, tee wrote:
Hi David,
Just got a chance to revisit this issue.
I want the border radius for table.
[...]
I needed to do something like #6 (still not perfect due to the space
in th cell) without the hassle of #6 codes, but it's not possible
with simple code like this:
table {border-radius: 15px; border-collaspe: collapse} table, th, td
{border:1px solid #369; }
http://www.lotusseedsdesign.com/css-test/table/table.html
tee
On Sep 15, 2010, at 5:59 PM, David Hucklesby wrote:
On 9/15/10 10:42 AM, tee wrote:
When border-collapse is declared, it can't do border-radius.
I have this: table {border-collapse:collapse}
[...]
I'm unclear as to whether you want the table border rounded, or the
table cells? I'm going to assume you mean the individual cells,
since you mention border-collapse--which applies to the cells.
Aside: the border-collapse does not affect the border on the
table. But you already knew that...
Ahh! Okay--I was wrong. As you demonstrate, the collapsed borders on
the cells extend to the edge of the table, beyond the rounded part of
the table's own border. So they _do_ affect the border on the table!!!
[...]
I'll play with this later, and let you know if I come up with something.
Sorry to have misled you.
Here's my follow-up. I managed to find a solution of sorts. See here:
http://webwiz.robinshosting.com/temp/table-border/
I cheated! ;)
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] un-border-collapse, possible?
On 9/15/10 10:42 AM, tee wrote:
When border-collapse is declared, it can't do border-radius.
I have this: table {border-collapse:collapse}
Because the site has many table layouts, it's easier to declare
border-collapse in the table, but in one specific table in a given
page I want to use border-radius, however I can't overwrite the
border-collapse:collapse. Another two options are separate and
inherit.
?
I'm unclear as to whether you want the table border rounded, or the
table cells? I'm going to assume you mean the individual cells, since
you mention border-collapse--which applies to the cells.
Yes, to apply rounded corners to the cells, you will need to use these
CSS properties:
border-collapse: separate;
border-spacing: length [ length ];
Now you can apply border-radius to the cells (I have done it...)
Getting the layout to match in IE 5-7 may be problematic, as the
border-spacing property is ignored. The only option here is to use the
cellspacing attribute of the table itself. Not a good option either,
as you can only set a single value, rather than the x and y values
that are optional in CSS border-spacing.
Aside: the border-collapse does not affect the border on the table. But
you already knew that...
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Current thinking on fixed width/liquid design ?
On 8/18/10 6:14 PM, Lyn Smith wrote: Good morning Was wondering what the latest opinions are on using fixed width or liquid design in light of the ever increasing size of monitor screens. [...] It seems to me, going by the sites I have frequented of late, that many seem to favour fixed width of 900-1000px which requires scrolling for 800x600 resolutions but don't look too bad whatever the higher size of screen and resolution. Hi Lyn, As your other replies note, there are several ways of going about this. FWIW I use another technique, based on a fixed 960px wide layout, but with all structural widths in percents. (Useful for me, as I think in terms of proportion, not pixels.) By applying a max-width: 100% to the 960px wide wrapper, I get a squishy design that seems to work well on narrower windows. As noted earlier, IE 6 does not do min-width nor max-width, but I reckon IE 6 users can live with that... For the benefit of wide screens, a large background image or a pattern may look nicer than a plain color. YMMV. P.S. I read Zoe Gillenwater's excellent book, Flexible Web Design for many other ideas: http://www.flexiblewebbook.com/ Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Paul Irish/Divya Manian HTML5 Boilerplate
On 8/12/10 4:57 AM, Tom Livingston wrote: Anyone have any thoughts on this? Worth a try? On a production site? http://html5boilerplate.com/ Looks pretty good to me... what say ye? Some useful ideas there, although I won't be using it as-is. Thanks for sharing. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] EM bug in Safari 5?
On 7/29/10 10:29 AM, tee wrote: It's been quite a while I have to do a site using EM unit for the layout width (with max/min-widths treatment), I am getting a shrunk page in Safari. In these two examples, the width is 62em which is around 992px according to pxtoem dot com, but in Safari 5 it's around 871px in actual size. First I thought maybe it's because I mixed the EM and % (for left/content columns), so I did another test page using EM only, still getting the same result. EM and % http://greensho.nexcess.net/em-vs-px/em-width.html http://greensho.nexcess.net/em-vs-px/em-width.png EM only http://greensho.nexcess.net/em-vs-px/em-width.html http://greensho.nexcess.net/em-vs-px/safari-ss.png My monitor is 27 2560x1440 resolution, but I don't think this is the reason. Can you confirm if you see the same? FWIW - My laptop came set to 120 DPI. While Gecko renders 100% as 16px, Opera and IE translate 1em as 20px. I don't think there is any strict correlation between pixels and EMs. There are just too many settings, OS and browser, that change the relationship. (aside) I recently tried to use @media queries to alter a layout. I used EMs to control the tipping points. This works in conforming browsers, but I notice that IE 9 preview ignores EMs - it only seems to work with pixels. Hmm. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] ems versus pixels
On 7/22/10 7:13 AM, tee wrote: On Jul 21, 2010, at 7:43 AM, David Hucklesby wrote: With all due respect, I suggest you are attempting to control the uncontrollable far too finely. 0.9em is either one or two pixels smaller than default, depending on the rounding applied by the browser. In other words, you are already getting as much difference between browsers as you are trying to apply. This does not eliminate the inheritance issue I raised. Even if I use 15em in my example for span class, the problem still exist. I am not advocating not to use EM, and I am not advocating using Pixel only. I use EM 90% of the time, 10% of the time Pixel could be a far better approach for font size. Anybody who advocating the use of EM only and preach other do so (especially to those who are new to Pixel Vs EM or new to web design in general), IMO, should make people aware there are exception to the rule, that in some situations, EM may not be a better choice due to inheritance, and in some special case when consistency cannot be compromised (this is very common if the design is done by a pixel-obsessed designer). I think you may have missed my point. I do agree that it's silly to suggest that one technique or another is universally the best. I am trained as an engineer, and believe that design--even of a website--is a matter of compromise. So your point about pixels versus points versus ems etc. is well taken. The case I tried to make is that I see no reason to have more than a couple or three font sizes on any one page. For me, a page full of text of varying sizes is distracting and difficult to interpret. I would also have the same reaction to a printed page full of varied type size. But I do sympathize with your situation, having to deal with lousy markup you have no control over. To my engineering brain, the markup is the structure upon which page is built. If the structure is faulty, no amount of paper and paint over the top will create a sound result. Good luck with your struggles. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] ems versus pixels
On 7/20/10 9:58 PM, tee wrote:
On Jul 20, 2010, at 7:10 PM, Mathew Robertson wrote:
On 21 July 2010 11:52, tee weblis...@gmail.com
mailto:weblis...@gmail.com wrote:
EM can fail miserably in below senario for IEs for p, li and span
tags due to inheritance making them very tiny and unable to get
consistence font size for one block of content in different
browsers not just the IE.
body {font-size: 100.1%} p, li {font-size: 0.95em} span {font-size:
0.9em}
[snipped]
As a general rule, you shouldn't be putting any font-size in tags,
as that will frequently suffer inheritance problems. This
general-rule applies to most attributes on most tags. The one
example where this may not apply, is when defining a reset.
That was just a quick example to illustrate the problem using EM unit
when a layout has a span (class) 3 level deep or a li 2 level deep.
It doesn't matter whether the font size is declare in a type selector
or a class. The general rule that you may stick with, will still fail
miserably.
[example snipped]
With all due respect, I suggest you are attempting to control the
uncontrollable far too finely. 0.9em is either one or two pixels smaller
than default, depending on the rounding applied by the browser. In other
words, you are already getting as much difference between browsers as
you are trying to apply.
I suggest you not attempt to make such minuscule adjustments to
font-size; set a size for a container or class and leave it at that. For
the most part I find browser default sizes good, with only a couple of
variations on a page (for more or less important content.)
Anyway, that's how I have managed to preserve my hair. Hopefully it can
help you.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] ems versus pixels
On 7/20/10 8:25 AM, David Laakso wrote: Foskett, Mike wrote: Has anyone on the list considered using keywords? Mike Foskett Has anyone conceived of a layout for the page using percent, em, /and/ pixel width, with the fonts specified in percent [ or em ] :-) ? Best, ~d Eric seems to have done so: http://meyerweb.com/eric/thoughts/2005/11/09/multi-unit-any-order-columns/ :-D FWIW - Even for a fixed width design I'd use percents for inner block widths. Not only because it makes future changes for newer devices easier, but it happens to be the way I think about layout, that is, in proportions. As for font-size, I see little need to change the browser defaults, except, perhaps, smaller for subsidiary text, and larger for items of special importance. For these I currently do use keywords, Mike, as they seem more consistent cross-browser (ignoring IE 5). But IE 6 gets percents as it is a bit funky where keywords are concerned. But that's me. I think browser defaults follow typographic conventions used in print reasonably well. But then, I know just enough about those conventions to know that my own choices are likely to be worse rather than an improvement... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Korean fonts
On 7/13/10 8:08 PM, Mathew Robertson wrote: On Fri, Jul 9, 2010 at 4:14 AM, David Hucklesby wrote: Can you please suggest a font stack suitable for a site that's entirely in Korean? The additional information has helped a lot. And what did you implement? I passed Andrew Cunningham's suggestions to the (Korean) student to choose, as I don't know Korean. But I use this (slightly modified) serif stack to test, and it gives me consistent results across various Windows and Mac OS setups. Only where I have installed Asian fonts on Windows, though. No special intervention required with Mac OS X... font-family: 바탕, Batang, 은바탕, UnBatang, AppleMyungjo, 백묵 바 탕, Baekmuk Batang, serif; Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Korean fonts
Can you please suggest a font stack suitable for a site that's entirely in Korean? I am assisting a student Web designer who is developing a site in Korean--a language with which I am entirely unfamiliar. Using a font stack out of Dreamweaver, none of which have any Korean glyphs AFAICT, browsers make their own choices, it seems. But IE's choice is a particularly ugly one... Many thanks for any help you can offer. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE ignores MIME type
On 4/11/10 11:52 PM, Luke Hoggett wrote: Hi, SSI header working on IE8 on Win7, sorry no time to check out other IEs cheers Luke On 12/04/2010 3:53 PM, David Hucklesby wrote: A student at a Web design course asked me how to include a common heading on all his pages without copy and pasting into each. I walked him through the process of making a Server-Side Include. http://webwiz.robinshosting.com/jaime/ This is a demo I made for him. The view source is named with a .txt suffix, and sent as Content Type text/plain. But Internet Explorer, alone among my browsers, insists on displaying the two files containing HTML as if they were text/html. [...] Interesting. I'm using Windows XP. Even more worrisome that the OS could make a difference... Thanks for the feedback, Luke. I love standards - there are so many to choose from. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE ignores MIME type
On 4/12/10 11:41 AM, Chris F.A. Johnson wrote: On Sun, 11 Apr 2010, David Hucklesby wrote: A student at a Web design course asked me how to include a common heading on all his pages without copy and pasting into each. I walked him through the process of making a Server-Side Include. http://webwiz.robinshosting.com/jaime/ This is a demo I made for him. The view source is named with a .txt suffix, and sent as Content Type text/plain. But Internet Explorer, alone among my browsers, insists on displaying the two files containing HTML as if they were text/html. Oddly, IE 7 will display the included file as intended on page refresh. All other IE versions stubbornly refuse. Any ideas how to get IE to play nice, please? Rename the file index.txt instead of index.html.txt Done. Same results. Any other ideas? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] IE ignores MIME type
A student at a Web design course asked me how to include a common heading on all his pages without copy and pasting into each. I walked him through the process of making a Server-Side Include. http://webwiz.robinshosting.com/jaime/ This is a demo I made for him. The view source is named with a .txt suffix, and sent as Content Type text/plain. But Internet Explorer, alone among my browsers, insists on displaying the two files containing HTML as if they were text/html. Oddly, IE 7 will display the included file as intended on page refresh. All other IE versions stubbornly refuse. Any ideas how to get IE to play nice, please? Thank you for your time. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] blockquote
On 4/4/10 2:53 AM, Patrick H. Lauke wrote: ... one thing blockquote does have that q doesn't is also the cite attribute (as minimally useful as it is today). I believe that Q elements do allow the cite attribute. But, as you say, this is rarely useful. Q may be more useful when writing in more than one language, as you get language-appropriate quote marks. OTOH I find BLOCKQUOTE very useful, especially as many quotes I use are multiple paragraphs. YMMV. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Rendering mismatch in IE6 and IE7
On 3/3/10 9:47 PM, Chakravarthy, Srikanth wrote: [...] Now is there any way I can identify what CSS properties are not behaving properly in IE6? Is there any way that I can make the pages compatible with IE6? Any reference link or suggestion will be of immense help. The first thing to realize is that IE 6 has partial support for CSS 1, while IE 7 introduced some support for CSS 2, particularly the extended selectors. You may find the Sitepoint CSS reference useful for seeing which selectors and properties IE 6 actually supports: http://reference.sitepoint.com/css Doubtless you have heard complaints about the colorful bugs with which this 8+ year old browser is so well endowed. The bugs are quite well documented, but tend to pop up in unexpected places. As Thierry has already suggested, asking a specific question about a publicly available page will likely provide you with better answers than mine. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] RE: Difference between applied CSS and Computed CSS
On 2/25/10 5:00 PM, Stephen Holmes (Gmail) wrote: Hi, Just noticed this in the WSG List: Removing any characters before!DOCTYPE ... really does miracles, because now the layouts is much better under IE/Safari/Chrome/FF. This is because if the first thing a browser sees is anything BUT a Doctype declaration it goes into Quirks mode. Clarification: that would be in IE 6 only. All other browsers are okay with the DOCTYPE not coming first in the source. I'd also note that default font size is 12pt, not 16pt. 12pt defaults to 16px at 96 DPI, at 20px at 120 DPI, and so on... But only in Internet Explorer (all versions) and Opera, as far as I am aware. Webkit and Gecko display 12pt as 16px at default settings - on my 120 DPI laptop, anyway. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] AAA Accessibility and validation
On 1/13/10 12:24 PM, Thierry Koblentz wrote:
Nick Zoom:1 is not bad enough to warrant a conditional comment and
separate style sheet. It's a valid rule that basically says show
the screen at 100%. A user style sheet can still over-ride this
rule. It's an easy way to add hasLayout without causing other
issues. This is what Microsoft recommended when they introduced IE7
and there's not a strong reason to avoid it.
Another way to trigger hasLayout in IE7 without failing validation is
to use min/max-height or min/max-height. But I agree, zoom's perfect
for those who don't care for CSS validation (does not work in IE5
though).
At the moment, I am using this to trigger hasLayout for IE 6+7 on
elements with default or applied display: block; -
.add-layout { display: inline-block; } /* add layout to IE 6+7 */
.add-layout { display: block; } /* does not reset layout */
Valid CSS and does not seem to disturb other browsers.
I may be all wet, but limited testing so far seems to work. Any known
problems?
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] CSS Popup
On 1/11/10 11:25 AM, Tom Livingston wrote:
Hello list,
I tried to repurpose this example from Eric Meyer:
http://meyerweb.com/eric/css/edge/popups/demo.html
His page works in IE6.
My attempt, however, does not. Can anyone see why?
http://www.mlinc.com/css_popup/
Thanks in advance
Yup. You need to give an explicit rule for a:hover to get IE 6 to
cooperate. Not all properties work, either, IIRC. My choice is
a:hover { background-position: 0 0; }
YMMV.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Re: WSG Digest
ピエールランリ・ラヴィン wrote:
Actually is not enough. Accesskey is a good way about the accessibility,
but it's not completed.
I didn't check the latest WCAG and the latest version of screen readers
but:
* Keyboards shortcuts depend from the UA (the specifications didn't
define it)
* Users may define preferences keys
* Most of the screen readers set the priorities to the website, so if
you use a key not defined by the user but already defined by the
browsers (like 'd'), you can private them from native functionalities
* A few screen readers like IBM Home Page Reader set the priorities to
the user so some accesskeys may be ignored in case of conflicts
* Exotic keys like \ ] ( most unused ) may not work.
So primary:
* Set in the head of html a bunch of primary links as link tag (link
rel=start href=http://www.mysite.com; title=Home Page /link
rel=help ...)
* At least a skip to content link on TOP of your page (means top of
the HTML page, not after iframe or ads or anything, just after the body.
I don't remember the book (maybe Mr Zeldmann), citing
http://www.jimthatcher.com/ (good example with focus only).
* an additional block of skipping links at the top of the page too, like
those defined by BBC - http://www.bbc.co.uk, great example too of skip nav
* Then a block of visible links like help, select a skin typically ideal
to introduce stuffs like style switcher, etc..
* Use correctly the titles h1, h2, h3, h4, h5, h6
* Use tabindex. you can play with tags like div - a, setting a tabindex
and a title attribute
* And of course write the 'help page' about how using your site
Accessibility depends from the country too, but I think in Europe most
the countries are using the following accesskeys:
Key 0: list of accesskeys , may be defined in the accessibility / help
page.
Key 1: home page (key not working with IBM Home Page Reader)
Key 2: news
Key 3: sitemap
Key 4: form, for example search form
Key 5: FAQ, glossary, etc...
Key 6: help about using the website
Key 7: email contact
Key 8: copyrights, license, ...
Key 9: guestbook, feedback
So accesskeys are great but only one of the way to enhance the
accessibility.
Great french article:
http://openweb.eu.org/articles/accesskey_essai_non_transforme.
One of the famous trick in css then is to use .off-left {
position:absolute; left:-9px; } for example instead of display:none,
to set content outside of the screens but keep it readable by screen
readers.
~~~
A very informative post. Thank you.
FWIW If a skip to main content is visible, I tend to use it to bring
the main article to the top of the window. Please make the link
available to sighted users as well...
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Is page-break-before broken in Webkit?
James Ducker wrote: Hi there, As a test, try using that style on an element that isn't floated or inside a floated element. That was worth a try - I added a break-after to the preceding paragraph, but Safari 4 seems intent on ignoring my wishes. (I double-checked in other browsers - either place works fine.) Thanks for the idea... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [Spam] :Re: [WSG] Is page-break-before broken in Webkit?
Nick Fitzsimons wrote: 2009/10/14 David Hucklesby huckle...@gmail.com: James Ducker wrote: Hi there, As a test, try using that style on an element that isn't floated or inside a floated element. That was worth a try - I added a break-after to the preceding paragraph, but Safari 4 seems intent on ignoring my wishes. (I double-checked in other browsers - either place works fine.) Thanks for the idea... It looks like there are long-standing issues with WebKit's page-break-* handling: https://bugs.webkit.org/show_bug.cgi?id=5097 https://bugs.webkit.org/show_bug.cgi?id=9526 Ah! That's the information I was looking for. Didn't know where to look for the bug reports... Thanks a bunch, Nick. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Is page-break-before broken in Webkit?
David Hucklesby wrote: Trying to put the entire printed recipe on its own printed page, most browsers honor my page-break-before: always; declaration. I can't get this to work nohow no way in Webkit (Safari and Chrome), even by adding !important... http://yewebwiz.info/temp/kam/ The rule is first in the @print section, near the end of this CSS: http://yewebwiz.info/temp/kam/recipes.css Tim White responded: David, In testing that I've done I have found that @media doesn't seem to work in external stylesheets in all browsers. Try moving the @media rules into an embedded stylesheet just to see if Webkit works then. Oh, the @media print works all right. Check the print preview. I even tried moving the rule out of the @media section. I just can't get the page-break-before to put the recipe on its own page... All other styles are applied just fine. FWIW - page-break-after does not work either. Only Webkit... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Is page-break-before broken in Webkit?
Trying to put the entire printed recipe on its own printed page, most browsers honor my page-break-before: always; declaration. I can't get this to work nohow no way in Webkit (Safari and Chrome), even by adding !important... http://yewebwiz.info/temp/kam/ The rule is first in the @print section, near the end of this CSS: http://yewebwiz.info/temp/kam/recipes.css 2nd question - is there a list of known Webkit bugs anywhere? Thanks in advance for any enlightenment. Cordially, David -- P.S. Sorry for the cross-posting. I got no response from the other list. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Cole Kuryakin wrote: [...] One MAJOR problem with using background images for the flag buttons is the fact that each entry could carry any one of 200+ flags. That's a WHOLE LOT of background declarations! No matter what type of more semantic structure I end up using for this I'm afraid I'll have to use image tags for the flag. Anyone else have any suggestion of what a preferred semantical structure should be for a guestbook? Nope. A table doesn't seem far-fetched - it looks like tabular data to me... On the subject of the flags, you could make one tall (or wide) image containing all the flags, and simply change the background-position property for each entry's CSS selector. This would likely save you coding a whole bunch of IMG tags - and images... Search for css background image sprites for more about this technique. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Multiple IE's for browser testing
Dale Cruse wrote: I've been using IE Collection at http://finalbuilds.edskes.net/iecollection.htm You can download it and have versions of IE all the way back to 1.0! --- I just downloaded and tested this, selecting IE 5.01, IE 5.5, IE 6.0, and IE 7. They react as expected to the usual hacks: Tan (or star-html) hack; backslash hack; *:first-child+html; as well as the underscore-before-property and star-before-property hacks. The situation WRT conditional comments is a bit more mixed. All reacted correctly to the major version, but [if IE 5.01] and [if IE 5.5] conditions are ignored by all... Note that I retained the original IE 8. Not sure if this makes a difference, as it certainly borked the version vector on the stand-alone versions from Tredosoft that I used previously. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] hr / or CSS3 Border Background
Chris Taylor wrote: Hi, tee said: However, seeing that HTML 5 has given hr tag a new purpose: http://dev.w3.org/html5/spec/Overview.html#the-hr-element http://dev.w3.org/html5/spec/Overview.html#flow-content-0 quote: The hr element represents a paragraph-level thematic break, e.g. a scene change in a story, or a transition to another topic within a section of a reference book. In HTML5 doesn't the section element do that job? To be honest, I've always felt hr seems a strange element to use in any circumstance. Well, I work arse-backwards from the way most books on Web design approach things. I gather content first, then mark it up with HTML so that it reads sensibly without CSS, only then adding structural elements and CSS. In that context, it sometimes make sense to add HR elements... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] position relative or margin?
Naveen Bhaskar wrote: Hi, Which is the right method to position a logo in the header. with * position :relative;top:10px; left:10px;* or *margin:10px 0 0 10px;* ** pls rell me the pros and cons ** Depends on how you want the logo to interact with the rest of the header. Relative positioning moves the content of the element, but as far as the rest of the header is concerned it has not moved. Using margins, the entire logo moves, jostling any element that's beside it. All positioning methods have their uses... Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Accessible websites
Dennis Lapcewich wrote: While I agree with your general sentiment, I have to say I find the assertion that all people aged 35-40 or more are for all intents and purposes [...] web disabled and [...] in immediate need of web accessibility questionable, to say the least. I really don't see what anyone's visual acuity has over the issue of font sizes. We have absolutely *no way* of knowing the size of text that shows up on a visitor's browsing device. Any assumption of too big or too small is a crap shoot. The only assumption we *can* make is the likelihood that a visitor can read text at their device's default - and even that is not completely certain. What on earth is the problem of specifying font-size: 100%; and using that for the main text? I really can't see how that leads one to spend countless hours to code around the issue, as one contributor maintains. Sorry to add to the noise. This is - or should be - a non-issue in today's world of iPhones and 32 inch desk monitors. Cordially, David -- *** 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
Joseph Taylor wrote re: http://www.hellobenlau.net/wsg/index.html
Ben,
On the spacing, the spaces you're fighting with are a combination of
line-height, margin and padding.
Each browser will implement their own defaults, so resetting the
defaults with a reset stylesheet has become a popular technique.
For example, if you apply a line like this to your page:
* { margin: 0 !important; padding: 0 !important; }
You should see everything collapse.
Follow that with a:
line-height: XXpx;
and you should see the results you're looking for.
Begging your pardon, but I think this solution may lead to new problems.
Using that margin and padding reset is likely to stop some form
elements working in older browsers. Better to define the margins and
padding you want on the elements that need them, in my opinion.
Specifying the line-height in pixels works differently from browser to
browser, some browsers increasing the line-height along with text size,
while others retain the same pixel height when text is enlarged.
I hesitate to post this, as I wish I had something more constructive to
contribute. Sadly, I don't know how to achieve what Ben asks.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Accessible websites
Jens-Uwe Korff wrote: Hi all, I believe making sites accessible is very important. We are all used to ramps near stairs, lifts near escalators, lowered curbs at intersections. We need to get used to baking in time into our projects for accessible elements. [...] I agree wholeheartedly. These improvements serve far more people than those originally targeted, too. The cost should not be high, either - I think it's more a mind-set than hard labor. If I may make one suggestion: you could place a link to, say, the BBC accessibility pages[1] and/or the RNIB Surf Right toolbar[2] on your pages. That's what I plan to do, anyway. [1] http://www.bbc.co.uk/help/accessibility/ [2] http://www.rnib.org.uk/xpedio/groups/public/documents/PublicWebsite/public_downloads.hcsp Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] DIV Javascript Problem
Aaron Wheeler wrote: Hi All I was wondering if I can pick all your brains on an issue I am facing. I am not a big coder and good when it comes to JavaScript. I have recently taken charge of maintaining a website for a client who uses divs to display data onto a .htm page. They do not want to use .php and mysql data basing as they are worried about losing their ranking in the search engines. Here is an extract of the coding. script language=javascript src=rates.js/script - obviously imports the divs with the prices attached.ide1') And in the .htm document I have the code. div id=hvh001/div So I was wondering why this does not always work and especially when I seem to update pages using dreamweaver. I think it's a big mistake to use JavaScript to add essential information to a document. First, if Internet security options are set to high, as security-conscious organizations do, then scripting is disabled in IE. Second, the NoScript add-on for Firefox seems very popular - over 50 million downloads as of this writing. Finally, it seems likely that search engines *may* miss this content, possibly affecting the site's ranking. (Open to correction on this - I am no SEO authority.) Aside - I wouldn't rely on Dreamweaver's interpretation as truly representative, although CS4 is a marked improvement over earlier versions. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Expand width of container to fit content's width?
(Joseph's reply moved to the bottom) On 6/27/09 1:32 AM, David Hucklesby wrote: Stevio wrote: Is it possible to expand a container's width to fit its content? Well, IE 6 treats width as min-width and likely does what you want. Non-IE browsers behave similarly if you add a display: table; declaration. Don't know how to deal with IE 7 though... :( Joseph Taylor wrote: IE7 handles min-width just fine. You can also use a hack or conditional stylesheet to feed IE6 it's width style. Perhaps I misunderstood, but I thought Stevio wanted the opposite effect to min-width - namely, a width that expands if the content does not fit. I don't know how to do that in IE 7. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Rendering difference between Strict Transitional doctypes in FF, IE8 Safari
David Dorward wrote: David Hucklesby wrote: I don't see anything in the W3C recommendations that forbids frames of any kind? http://www.w3.org/TR/html4/index/elements.html clearly marks iframe as a feature of the Loose (AKA transitional) DTD. A question of knowing where to look. Thanks for that. (iFrames seem to be in HTML 5 though.) - http://www.whatwg.org/specs/web-apps/current-work/#the-iframe-element Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Expand width of container to fit content's width?
Stevio wrote: Is it possible to expand a container's width to fit its content? Well, IE 6 treats width as min-width and likely does what you want. Non-IE browsers behave similarly if you add a display: table; declaration. Don't know how to deal with IE 7 though... :( Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Rendering difference between Strict Transitional doctypes in FF, IE8 Safari
Damian Edwards wrote: [...] 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. ... I don't see anything in the W3C recommendations that forbids frames of any kind? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] accessible free web hosting account
Marvin Hunkin wrote: looking for a free web hosting account that can handle side scripting, able to use such technologies as visual web developer, sql server, visualbasic, java script,etc. [...] so if any one can help out and recommend a good one which also has plenty of large space. and using windows vista, let me know. Hi Marvin, I have used a couple of free hosting accounts. Neither lasted very long. Unless you are prepared for the hassle of moving hosts on a frequent basis, I suggest you avoid free hosts. Have you considered setting up your own computer as a server? This may sound ambitious, but you would get exactly the set-up you need. From what I see when searching for hosting, Windows hosting is often more costly than Unix, and certainly more rare. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] free screen reader friendly web hosting
Ted Drake wrote: This is a very confusing email. The host has nothing to do with how screen-reader friendly your web site is. Are you looking for a host which has a screen-reader friendly admin interface? This would be geared to the developer not the end user. I think Marvin needs to find a host that he can use himself. He uses a screen reader himself, so, yes, I believe he wants a host with screen reader friendly admin pages. Sadly I can't answer Marvin's need. Anyone? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Image mapping standards question
Brett Patterson wrote: I meant that rather than using image mapping for hyperlinks, you could use it to (sort of) point out a particular part of an image, as if you wanted to show someone who can see which person in a picture is you if they hover their mouse over that image map. And you can use it for someone who is blind, by showing them sections in a picture, as if there are rapids in one part of a picture and your canoe in another. I mean image maps being used to show particular sections in a picture, give it a title and alt attribute, and allow people to see what is what in the picture by holding their mouse over parts in a picture. Some picture sites, like photobucket and others allow users to tag certain parts of a picture to allow users to see who is who in a picture. I was wondering if it would be okay to do the same thing with using image maps and not using them as links. Do you mean something like this? http://css-tricks.com/image-map-with-prototype-tooltips/ Not sure about how this would benefit someone who can't see, though? Provided you have given ALT attributes to the AREA shapes, screen readers should be happy. FWIW image maps *are* links, and can be followed by search engines and text browsers, screen readers, etc.. Without scripting, though, they are hard to discover in graphical browsers-- and not everyone has scripting enabled. Design is about compromise, I believe. No one solution fits all situations. So the answer is a qualified yes - you can use an image map for this. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] CSS 3 Media Queries iPhone / Opera Mini 4
Christian Montoya wrote: I am looking into delivering an iPhone-specific stylesheet and I came across this: For example, to specify a style sheet for iPhone, use an expression similar to the following: link media=only screen and (max-device-width: 480px) href=small-device.css type= text/css rel=stylesheet [...] I have been playing with media queries coded directly in the style sheet with some success. These have worked in Opera since version 7, work now in Safari 3, and will work in Firefox 3.5. I am hopeful that both Opera- and Safari-based phones will display as I want, although I have yet to test in anything other than iPhoney - the iPhone emulator for Mac. FWIW this article is the basis of my experiment: http://dev.opera.com/articles/view/how-to-serve-the-right-content-to-mobile/ Hope this helps. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] super bad Opera bug - v9.62
tee wrote: Stumble on one more annoying Opera bug that I am unable to figure exactly which element, and what is causing it. [...] bad-opera-2.html http://tinyurl.com/o5b259 2 columns layout, with left column intact Left column remains, and the right column has a large image which the complete code will be a slide show. The pv-btm background image is gone. Adding padding-bottom: 20px; to #product-view fixed it my end. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] super bad Opera bug - v9.62
tee wrote: Stumble on one more annoying Opera bug that I am unable to figure exactly which element, and what is causing it. [...] bad-opera-2.html http://tinyurl.com/o5b259 2 columns layout, with left column intact Left column remains, and the right column has a large image which the complete code will be a slide show. The pv-btm background image is gone. Follow-up to my last reply: It seems to be a z-index problem in Opera. Adding z-index: 1; to pv-btm also seems to fix it. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] PNG - how cross-browser standard reliable?
Mike Kear wrote: I'm looking at a whole bunch of icons to use in a new app I'm building, and rather than convert them all to gifs, I was thinking of leaving them as the .png format they are now.They work on all the browsers I use, but I'm wondering what everyone else's experience has been of using .pngs in web pages. As others confirm, only IE 6 has problems with PNG files. Even IE 6 can be accommodated if you use 8-bit PNG. Check out this Sitepoint article: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/ Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] how reliable is it to use IE8 compatible mode to test IE7/6
tee wrote: Anybody use IE8 compatible mode to test IE7/6 instead of standalone version? Well, in my case I have a Conditional Comment for [if lt IE 8] that's supposed to make my h1 red if true; green if not. Now I installed IE 8 and not only IE 8 shows green (as expected) but in Compatibility Mode it is green also. Same with all my stand-alones - green! Under Windows 2000 I only have IE 6. The h1 is red, so the CC works here. It looks like the version vector is changed across the board here-- perhaps there is something wrong with my installation. Does anyone else have this problem? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Box model in IE7
Chris F.A. Johnson wrote:
We were told in the past by a massive client that for accessibility purposes
font sizes needed to be set to 74% as a minimum as the basic reading size
below which it's a straign on the eyes.
To answer the O.P. question about IE box sizing-- I think the issue has
more to do with IE's lack of mathematical ability than with box sizing,
as the extra width on those boxes caused by the border should still make
them 50% with the 'old' box model. The borders make them a tad larger in
'standards' mode, so in neither case should there be a gap.
But I can't resist replying to this:
On Fri, 24 Apr 2009, Jason Grant wrote:
74% is 26% smaller than the viewer's preferred size, IOW, it's too
small.
Yes, I agree somewhat. But an 'em' at 100% is normally 16 x 16 = 256px
total while 75% is 12 x 12 = 144px. It seems to me that 144 / 256 is
closer to half size, no?
Setting body { font-size: 100% } leaves the font at the viewer's
preferred size and prevents some IE weirdness.
Not only. Browsers with minimum font size set have problems, as more
than one article cited in this thread clearly demonstrates. Some
browsers install with a minimum size set by default, so the issue is
more than academic.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Borders in liquid layouts
Stevio wrote: [...] Essentially I reckon it comes down to equal height columns in liquid layouts. Any suggestions on how to best accomplish this? There is this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Image Replacement and Accessabilty
You wrote: Other than using an img element and alt attribute, what image replacement techniques are also accessible? This is worth a look: http://www.tjkdesign.com/articles/tip.asp Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] URL naming best practice guide? [SEC=UNCLASSIFIED]
On Fri, 20 Feb 2009 10:26:33 +1100, Chris Vickery wrote: Does anyone know where I could find a best practice guide to naming URLs? We're trying to keep our URLs descriptive like... www.whatever.com/news/events/index.html ...but not like this... www.whatever.com/news articles/Events Sent from m...@me.com/my.file I need it to pass on to a manager. Google's SEO Starter Guide has a section on URLs that you may find useful: http://googlewebmastercentral.blogspot.com/2008/11/googles-seo-starter-guide.html (Download the PDF from there.) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Opera Targeting?!
On Wed, 4 Feb 2009 03:37:19 -0800, tee wrote: IS 200% one time font size increasement or two? While FF 3 does not tell you, Firebug will show you the calculated font-size in pixels after re-sizing. In the CSS panel, choose Options Show computed style. Hope this helps. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Opera Targeting?!
On Wed, 4 Feb 2009 03:37:19 -0800, tee wrote: IS 200% one time font size increasement or two? While FF 3 does not tell you, Firebug will show you the calculated font-size in pixels after re-sizing. In the CSS panel, choose Options Show computed style. Hope this helps. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Multi Column Category Lists
On Tue, 27 Jan 2009 19:29:52 +, James Jeffery wrote: Hey all, Quick question. I have some data pulled from a database (50 of the most recent categories/tags). These are positioned in a list in 2 columns (example below): - Category1Category5 Category2 Category6 Category3 Category7 Category4 Category8 Quick answer - http://www.communitymx.com/content/article.cfm?cid=27f87 Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Validating (X)HTML + ARIA
On Wed, 21 Jan 2009 10:15:38 +1100, Anthony Ziebell wrote: Oh, also... there is a requirement for our pages to validate (hence I can only see JavaScript as a valid option at this point?) *Is* there a requirement for our pages to validate? I would have thought that making a page more accessible would be far more important. After all, Google sees fit to ignore validation in order to speed up page rendering - another worthwhile goal. I must say that I regard validation and spell-checking as equivalent (and equally important). If I use my U.S. spell-checker on a review of a book with the word colour in the title, should I change the spelling according to the spell-check's version - color? I think not. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] css Help Please
On Mon, 12 Jan 2009 12:37:29 +1100, Marvin Hunkin wrote: Hi. got these three errors. but cannot seem to fix them. can you help. cheers Marvin. W3C CSS Validator results for file://localhost/C:\DOCS\MarvinsWebsite\styles.css (CSS level 2.1) Sorry! We found the following errors (3) URI : file://localhost/C:\DOCS\MarvinsWebsite\styles.css 6 div header Lexical error at line 5, column 2. Encountered: i (105), after : id=Borg; width: 400px; margin: 1% auto; } 10 div site_links Lexical error at line 9, column 2. Encountered: i (105), after : id=menu margin: 0 0 1% 0; } 14 div nav Lexical error at line 13, column 3. Encountered: i (105), after : id=menu_other margin: 5% 0 1% 0; } It looks like you have mixed up some inline style data with your ID values. An ID attribute assigns a name to an element, must start with a letter, which can be followed by letters, digits, hyphens, underscores, colons, and/or periods. No spaces are allowed. Mind you, I don't know what CSS makes of IDs that have periods and colons in them... ? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Chrome and Safari render the same...or do they?
On Thu, 8 Jan 2009 16:36:45 +1100, Jens-Uwe Korff wrote: Hi experts, I'm running into big rendering differences between Google Chrome and Safari 3.1/PC. They are said to render pages the same, given that they're using the same Webkit engine. The differences seem to be mainly due to the different font rendering. Safari's fonts are way smaller, hence my boxes are smaller and shift up, breaking the layout. Anyone knows why this is so? Is there a workaround, i.e. a Safari-only CSS hack? I don't know why there would be a difference between Safari and Chrome, but I did some testing of font sizing across as many browsers as I could a few months ago. I noticed that Safari tended to round down fractions of a percent. So theoretical (calculated) percents may produce the effect you notice. I found that rounding up any fraction of 1% to the next higher integer (or next .01em) to work well cross-browser. This may not be your issue, but hope it helps. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] positioning help needed
On Wed, 10 Dec 2008 12:03:46 +, kevin mcmonagle wrote: Hi I'm trying to modify this template to work with a footer. The problem is getting a footer to float below the right side div. I can't figure out how to keep #sidebar liquid but still float a footer under it. Is it possible. Nope. Absolutely positioned boxes are taken out of the normal flow. This means they have no impact on the layout of later siblings.[1] heres the example: http://www.gortahork.eu/en Try using a floated construction instead. Examples here: http://blog.html.it/layoutgala/ [1] http://www.w3.org/TR/CSS21/visuren.html#choose-position Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Downloading Fonts
On Mon, Dec 8, 2008 at 1:03 PM, Marvin Hunkin [EMAIL PROTECTED] wrote: Hi. rebuilding my site. and i have the following fonts in my style sheet. georgia, century school book, courrier, new courrier, comic ms, and others. but i notice, that on my local hard disk, or when i did have it on the web, but closed it for copyright issues. it was only displaying arial. did try searching on google. but found a couple of sites, but did not work. so where can i download fonts for my site? On Mon, 8 Dec 2008 13:12:36 +1100, James Ducker replied: As a general rule you cannot use non-system fonts on the web, as the end user needs to have them installed as well (I think this is what you're asking?). One workaround is to use sIFR ( http://www.mikeindustries.com/blog/sifr/ ). Also, here is a list of fonts that are generally considered to be web safe: http://web.mit.edu/jmorzins/www/fonts.html Umm. Most of the fonts Marvin lists are available on most computers. I think he is saying that he does not have them on *his* computer, so wants to download them so he can see how each affects his design. I am on Mac, and would like to install some Windows-only fonts for myself. Anyone? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Downloading Fonts
On Mon, Dec 8, 2008 at 1:03 PM, Marvin Hunkin [EMAIL PROTECTED] wrote: Hi. rebuilding my site. and i have the following fonts in my style sheet. georgia, century school book, courrier, new courrier, comic ms, and others. but i notice, that on my local hard disk, or when i did have it on the web, but closed it for copyright issues. it was only displaying arial. did try searching on google. but found a couple of sites, but did not work. so where can i download fonts for my site? On Mon, 8 Dec 2008 13:12:36 +1100, James Ducker replied: As a general rule you cannot use non-system fonts on the web, as the end user needs to have them installed as well (I think this is what you're asking?). One workaround is to use sIFR ( http://www.mikeindustries.com/blog/sifr/ ). Also, here is a list of fonts that are generally considered to be web safe: http://web.mit.edu/jmorzins/www/fonts.html Umm. Most of the fonts Marvin lists are available on most computers. I think he is saying that he does not have them on *his* computer, so wants to download them so he can see how each affects his design. I am on Mac, and would like to install some Windows-only fonts for myself. Anyone? Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] HTML/XHTML/XML - Question about the future of.
On Fri, 21 Nov 2008 07:36:52 +0200, Rimantas Liubertas wrote: I made the same decision. I still follow HTML and XHTML, but anything I do (and have a choice about) is always HTML 4.01 Strict. I think it makes more sense than XHTML 1.0 Strict at this point since we can't really use real XHTML yet. It seems to defeat the purpose if you are using a Strict DTD incorrectly. Same here and looking forward to start using HTML5, at least for the personal projects first. Regards, Rimantas FWIW - You can use the HTML 5 DOCTYPE today. Browsers only use the DOCTYPE for standards / quirks mode switching, and all browsers switch to strict with this, I believe: !DOCTYPE html The validator still needs a DTD though. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS invisible to IE
On Wed, 29 Oct 2008 09:02:21 +0500, Fuji kusaka wrote: Is there any way to code css (not conditional inline css), so that the CSS apply online to FF? I'm confused. Your subject line refers to IE, yet your question only refers to FF.(?) If you wish to target Firefox only, it will very much depend on which version you intend to target. Since browsers are constantly improving (well, most anyway) it is counter-productive to give a browser its own CSS unless it is no longer maintained. If, as I suspect, you need to fix a problem in FF 2, feel free to put up an example page and ask us for a solution. I feel pretty sure we could come up with something. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] CSS font-size-adjust
On Mon, 20 Oct 2008 12:36:26 -0400, Christian Montoya wrote:
- What's the support across browsers / machines for the font-size-adjust
property? -
Is adjusting the aspect value bad form? Is this as bad as letter-spacing
body
copy? Would this kill sheep?
- Has anyone done this before? Is there an ideal aspect value for screen
display?
On Mon, Oct 20, 2008 at 8:41 PM, David Hucklesby [EMAIL PROTECTED] replied:
Hi Christian,
I believe that Firefox 3 supports it, but must admit I have not tried using
it.
Interestingly I can't see the property listed in Sitepoint's Ultimate CSS
Reference. Hmm.
As for setting up font stacks, I found this article useful:
http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
The linked PDF with samples of each type face shown side-by-side
is a useful resource too, I think.
On Mon, 20 Oct 2008 22:44:26 -0400, Christian Montoya wrote back:
David,
I've been looking at that exact article, actually. It's very helpful. I guess
the
biggest dilemma, currently, is that I am to come up with a consistent
vertical rhythm,
but with just font-size and line-height alone, such as:
body {
font-size:75%;
line-height: 1.5;
}
it's not enough. The difference in x-height between small fonts like
Calibri and
large fonts like Verdana makes for very different results. As far as I can
tell, even
using pixel or point sizes for fonts doesn't make a difference. And I'm
guessing that
as far as browser compatibility goes, there's nothing that does. Is that
right?
Interesting. I have been doing some extensive tests to get that
vertical rhythm to work cross-browser. I had not considered the
differing x-height between fonts. I'll make some more tests and report
back.
Meantime, I found the most consistent results using 100% base font
in IE, and 16 pixels for the rest. !00% base just does not work for all.
After that, I found I can use percents or EMs, calculated from nominal
pixels, for most everything-- as long as you round *any* fraction up
to the next higher .01em for Safari.
Note: some browsers only apply whole percents, so more precision
may upset things.
Here are my results so far:
Nominal Points Size Pixels/ Percent
6pt nonpareil 8px 50%
7pt minion 9px 56.5%
8pt brevier 11px69%
9pt bourgeois 12px75%
10pt long primer13px82%
11pt small pica 15px94%
12pt pica 16px100%
14pt english19px119%
16pt columbian 21px132%
18pt great primer 24px150%
21pt double small pica 28px175%
24pt double pica32px200%
36pt double great primer48px300%
(Hope this isn't too muddled.)
P.S. - I use a line-height in EMs, based off the base, for body text
that's close to 100% to get equal vertical spacing. But I do need
to test various font faces, as you suggest. Also, DPI other than 96.
Cordially,
David
--
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] CSS font-size-adjust
On Mon, 20 Oct 2008 12:36:26 -0400, Christian Montoya wrote: - What's the support across browsers / machines for the font-size-adjust property? - Is adjusting the aspect value bad form? Is this as bad as letter-spacing body copy? Would this kill sheep? - Has anyone done this before? Is there an ideal aspect value for screen display? Hi Christian, I believe that Firefox 3 supports it, but must admit I have not tried using it. Interestingly I can't see the property listed in Sitepoint's Ultimate CSS Reference. Hmm. As for setting up font stacks, I found this article useful: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ The linked PDF with samples of each type face shown side-by-side is a useful resource too, I think. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Flash replace Javascript in Future?
On 17/10/2008, at 12:27 AM, Charles Ling wrote: Hi Guys/Gals, I would like to get some opinion from you all, that would Flash 10 or ++ will replace JavaScript in the future? According to this blog : http://ajaxian.com/archives/flash- 10-and-the-bad-news-for-javascript-interaction . On Sun, 19 Oct 2008 02:01:07 +1100, Simon Josephson replied: I don't know of the appropriateness here (etiquette) being a newbie... though Adobe's agenda is to make Flash an entire environment within which to work... AKA - Air [...] Adobe is hoping it becomes ubiquitous to the web It's my understanding that Adobe's AIR brings web technology to desktop applications, rather than extending the Web itself. And, no, AIR does not *require* the use of Flash. You can use AJAX for the client- server interaction instead, if you wish. Others already mentioned that the article you cited concerns the use of Flash to get around some limitations of JavaScript. To respond to the original question - no, I do not believe that Flash will replace JavaScript. They are two very different technologies, each with a place in Web design. I do think that Flash will become less relevant when more browsers support HTML 5 and CSS 3. Meanwhile, I am avoiding Flash for two reasons. First, I found it beyond my abilities to understand how to make Flash fully accessible. Second, Flash is not universally available. Smart phones like iPhone don't currently support Flash, and Flash blockers are very popular. This is a personal choice, of course. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] min-might question
On Fri, 17 Oct 2008 22:24:03 -0700, tee wrote: Maybe this is something impossible with CSS, still I hope I am wrong and hope someone who knows better than me able to tell me yes, it can be done. In a block where I have min-height declared, something like this: div class=box div class=set-minheightcontent here/div pa line of text/p /div I cannot control or foresee how long the content in the 'set- minheight' div be. What do I do to have the p tag always stay at the bottom of the block? Hi Tee, I wonder if you are trying to achieve something like this? - http://madeiraheights.com/meetings.html The minimum height in this case is 100% of the viewport - the fix footer to bottom solution. The Adobe reader paragraph is positioned just above the footer with absolute positioning from the bottom in EMs. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Chrome and Safari
On Thu, 16 Oct 2008 10:49:59 +1000, [EMAIL PROTECTED] wrote: 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? The two are mostly in sync, but I wouldn't depend on it. I would test in both, if I were you. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Accessible menu lists - using the pipe character as separator?
2008/9/27 Daisy Morgan [EMAIL PROTECTED] Hello all I can't seem to find a definitive answer on this via Google - is it best practice to use something like the pipe character ( | ) to separate links in a menu so that screenreader software pauses between the list items? Any recommended articles dealing with accessible menus in general? On Sat, 27 Sep 2008 16:29:56 +0200, Svip replied: How about a list of links? If you want a separator, use some CSS styles. But for what you are asking, you are probably looking for an ul list. I believe that (some) screen readers attempt to speak out pipe character or some such, which may be confusing. As Svip says, a list of links generally goes in a list element. A screen reader *may* even announce the number of items in the list, so visitors can skip over them if if they wish. Visually, you can add a border to the links.[1] Others may correct me on my assumptions here. Cordially, David -- [1] http://htmlfixit.com/tutes/tutorial_CSS_Generated_Faux_Pipe_Delimited_Unordered_List.php *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Opera not playing nice with checkbox
On Wed, 10 Sep 2008 01:09:38 -0700, tee wrote: Anybody encounters this? The checkbox inherits the input declaration, and though I added a class to overwrite it, with height and width, still I can't see the 'tick'. Another annoying thing with Opera, is that if I have background or border declared for input tag, it inherits it to checkbox and radio button just like IE does. I found a seemingly workaround here but it doesn't work for my page. http://getsatisfaction.com/pingfm/topics/check_box_opera_9_5_osx Yes. A potential client just asked me to add some (more) scripting to a page. I noticed the same thing - no check mark - in Opera 9.52 on Win XP Pro. Okay on Mac OS X though. This is the page: http://www.backroads.com/catalog/ Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Code for Firefox, hack for IE
On Mon, 1 Sep 2008 20:55:07 +1000, David McKinnon wrote: For a while now, I've been operating on the principle Code for Firefox, hack for IE. Interesting thread. I learned CSS from Eric Meyer on CSS books. He gives several ideas for avoiding browser bugs and related hacks altogether. FWIW - I assist at a web design class for adults. The teacher advises students to target IE (6) first, her rationale being that potential employers are likely to use it. But I find so very many students get frustrated, reaching an impasse when they can't get their working IE code to display the same way in other browsers. Indeed, the teacher recently asked my help to fix a bug in Opera when a hack failed to work in that browser. A few years ago, before Firebug came out, I designed first for Opera. However, this got a bit frustrating when learning CSS, because Opera recognized far more CSS than any other browser ! With the recent spate of browser releases, we now have highly conformant versions of Firefox, Opera, and Safari, each with their own set of tools. With all this goodness, I feel like a kid in a candy store! But I have a confession - I am so pleased that the World's Favorite Browser exists, or I wouldn't be able to charge so much. ;) Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
