Re: [WSG] CSS not playing nice in Gecko browsers (PC Mac)
G'day
http://avanimedia.com/onlinemedia/datormagazinse_profile.html
Under the Specifications, the data is don in table and it shifts to
the right outside the #wrapper. However, the table stays where it
should be in IE, Safari and Opera. I don't understand.
I'd say it is a clearing issue because of the floated
definitions. Try adding this to the style sheet:
#ProfileRightCol table { clear:left; }
I know you didn't ask for this, but in my opinion the page
suffers from a few varieties of itis. For example, the table
could be re-done without all those repeating classes (or at least
fewer of them) if you use th elements for your row and column
headings (which would make it more accessible too).
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Quick Site Check - CSS Problem?
David Nicol wrote: I would appreciate it very much if you could look at this site: http://www.visitshetland.com/ ... Does anyone else get the same problem as this user? I can (almost) replicate it. Accessibility options (ignore colors, font styles, font sizes) ticked and text size increased gives something very similar. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] site check: FONT sizes
Hassan Schroeder wrote: Felix Miata wrote: The vast majority of users, even those working in high-tech firms here in Silicon Valley, *never* change *any* settings -- of the OS or any applications -- from the supplied defaults. Where is the data that backs up this assertion? That assertion is based on my experience working here in Silicon Valley since the mid-80s, *doing usability testing* among other things (including teaching people to use the Web and write HTML, back in the day when it was just coming into widespread use). You may choose to believe otherwise, but that doesn't change the behavior I've observed, and continue to observe. And what we conclude from that observed behaviour seems to be what all the arguing is about. Some conclude the default is too big and ugly so they take it upon themselves to change it for everybody. Others conclude that if people are not changing the defaults, they are probably comfortable with those defaults and therefore we should not mess with it. You can't please everybody all the time, but perhaps there's a middle ground somewhere. If you're going to change font sizes, do it in moderation. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] site check: FONT sizes
Hassan Schroeder wrote: Felix Miata wrote: When your page respects the user's decision what size fonts are most appropriate for him, your page needs no resizer, because the user won't need to again resize just for having visited your page. He's presumably already done that in his browser. ..which is the utterly erroneous presumption upon which the entire argument fails :-) To use similarly strong wording, I sense an utterly erroneous presumpton that the designer knows best what suits people they have never met. People who have totally different combinations of vision, equipment, software and experience in using it. As long as we have web designers who want to control everything and force their own preferences on everybody else, this argument will remain, long after my children have become grandparents. For what it's worth, yes, I am guilty of adjusting font sizes too. And yes, I find that I often have to adjust my browser settings (usually making text larger as my vision is not that good) because other designers have gone even further than I have in this regard. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS DIV problem, as weird as simple
G'day
The page with the XHTML and CSS:
http://www.2much4u.net/Problem/example.html
...
Why there's a margin with any browser excepts IE6?
Because the default alignment for images in most of the other
browsers is baseline. Add the following to your CSS and see if
it fixes the problem:
#Example img { vertical-align:top } /* or bottom or middle */
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] IE7 Compatibility Team
Ian Anderson wrote: IE7 will respect height: 1%, which if not filtered away from it could break many layouts. They are retaining hasLayout as an internal property and recommend using zoom: 100% for inducing hasLayout as a replacement technique for height: 1%. Which W3C standard/recommendation for CSS defines the zoom property? I don't see it in the CSS 2.1 spec. http://www.w3.org/TR/CSS21/propidx.html If indeed it's not defined in any CSS standard/recommendation, are MS effectively saying: We recommend you write invalid CSS so things work in our new browser which has better support for standards? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Vertical align
Roberto Santana wrote:
I want to create an horizontal bar with some elements on it, some text,
a text box for searches, and date time, just below the top part of the
page.
What's the best way to create a vertical-center content with XHTML 1.0
Strict and CSS2?
Don't know about best, but... If the horizontal bar has a fixed
height, you can position it absolutely, half-way down the page,
and give it a negative margin-top that's half the height of the
bar. So for example:
CSS:
body { margin:0; padding:0; }
#contentbar {
position:absolute;
top:50%;
width:100%;
height: 10em;
margin: -5em 0 0;
padding:0;
background-color:#ccc;
color:#000;
}
#contentbar div { margin:1em }
(x)HTML:
div id=contentbar
divContent here/div
/div
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Call for a new (scalable) business case for web standards.
G'day heretic wrote: Actually, I think some of the benefits touted for large-scale sites are actually more urgently required and keenly noticed by small business. In particular... The problem is that many small/micro businesses don't see it (y)our way. They only see the shiny coat of paint, not the rust underneath it, or the engine under the bonnet. Bombarding them with technical jargon isn't going to help. They just see a web page in their browser. It either looks good or it doesn't. # maintenance In my experience, standards-compliant sites are far easier (hence faster and cheaper) to maintain Only if the person maintaining it understands standards in the first place. It's no use to a FontPlague jockey who wants to maintain his/her own site. small business really need to minimise costs. Every dollar counts. Yep, so they want to maintain the site themselves. See above. # lower bandwidth Many small businesses have a very small web budget and very very low bandwidth on their hosting. Nearly all my customers are on a very cheap plan with (virtually) unlimited bandwidth, so perhaps the rest are paying too much. Besides, if they are getting so much traffic that bandwidth becomes a problem, they are probably making enough money to pay for more. Of course, having 1MB of graphics or flash on the home page isn't going to help, but that's not a standards issue. # seo Small businesses need good search engine visibility, far more than bigger businesses in many ways. Sure, a flash-only or frames based site is not SEO friendly, but I have seen no clear evidence that a clean, Strict (x)html site gets any better treatment than a site with tag-soup. There are many other factors that influence SEO, but this is of course not the place to discuss those. # accessibility Many are either unaware, don't care or are willing to take the chance. Besides, a standard compliant website is not necessarily more accessible than a site with tag-soup, although it may help. # usability Standards compliant does not necessarily equal usable, nor does tagsoup necessarily equal unusable. Small businesses need more longevity in their website. If they have decent style/content separation they can redesign in future without redoing every single page. It'd be like having the ability to change their stock of letterhead without paying to have it printed again (ie. just pay for the design). True, but many of them don't plan that far ahead. Small businesses often have to prove that everything they do is better than the big businesses... so their website needs to reflect that. Define better, from the (non web design) small business owner's point of view. I think that's what this whole thread is about... The majority of their customers/visitors to their website will not know the difference, so why should the business owner care? Sorry, I'm out of 1 and 2 cent coins. -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] [Fixed div elements] - Having troubles with IE
G'day Andrew Brown wrote: I changed the doctype to strict locally and still the scrollbar does appear. I also already have those additional tags added. Do you know of a website that has enough content that scrolls and has div banners such as mine only done in css? I cannot say I have saw many that do. I am still on top of this. Kinda like www.sure-kleen.com ? Don't ask me how I did it - I forgot. But if it does what you want, feel free to reverse-engineer. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] The dilemma: tabular data with sublevels
Rene Saarsoo wrote: Well... I agree, that the proposed markup-structure would be semantically most correct: ... But can you imagine working with that sort of list in a browser where stylesheets aren't available? For example in Lynx it would look something like the following: ... Whats so wrong with using good-old table... (skipped summary attribute and possibly more, that should be added): If it gets that complicated I'd rethink the setup. For instance, rather than having all those links, lists, tables etc I'd use a simple form with select and 3 submit buttons. [ select category ] [ add ] [ edit ] [ delete ] You can have option groups in the select. Example: form action=whatever select name=product option value=Select Product/option optgroup label=Fruits optionApple/option optionOrange/option optionLemon/option /optgroup optgroup label=Vegetables optionCarrot/option optionCabbage/option optionBeans/option /optgroup /select input type=submit value=Add/ input type=submit value=Edit/ input type=submit value=Delete/ /form But perhaps I misunderstand the function of the page in question. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] New to Standards.
Hi Alvaro Now I'm writing to this list to ask for books, eBooks, links, and every piece of information that could help me to learn and understand Web Standards and not feel like an ignorant when I read the posts sent to the list, and, in a not-far future, help others too. The Web Standards Group's website has a lot of resources and links to sites that deal with web standards. You might start at http://webstandardsgroup.org/standards/ and follow the link From hacks to web standards - A web designers journey. Sounds like that's just what you are looking for. Also look at the Resources section of the Group's site. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Rollover Flicker
G'day I have a CSS rollover flickering problem that not just occurs in IE but all browsers. Two options I can think of: 1. Pre-load the hover images (using javascript) 2. Use a single background image with both states for each button and shift the background-position on hover. I prefer the latter option. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Negative margins questions
G'day
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 separators work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If the hr is only there for decorative purposes (i.e. no semantic
meaning), why not put 0 padding on the container and apply the
padding (and border-top or border-bottom) to the paragraphs
instead? No need for the hr element or negative margins that way.
CSS along these lines:
#Container {
padding: 0;
border: 1px solid #999;
}
#Container h1 {
background-color:#999;
font-size:1.5em;
margin:0;
padding:.6em;
}
#Container p {
margin:0;
padding:1em .8em;
border-top:1px solid #999;
}
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Negative margins questions
G'day I had a feeling someone was going to reply with that suggestion, and you're right :) The whole test case I setup was merely to display the point that the hr element was no cooperating with the negative margins. I'm hoping more specifically for an explanation on why that is, not on how to get the desired effect. Ah, OK. Well, can't help you on the first question - maybe Microsoft can. But the question about h1 is easy. You use relative padding (0.8em) - relative to the text size of the element it is applied to. So the margins on the h1 are calculated by the (larger) text size of the h1, not its parent's text size. Hope that makes sense - it does to me :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Slight margin problems in IE
G'day I wonder is anyone is around during holidays (hope you are having a good one) to figure something out. Holidays? What are they? http://joomlashack.compassdesigns.net/js_simplicity/index.html I have this, but the margins on the right hand side don't line up in IE. They are ok in FF etc. I can't for the life of me figure out why. I'm not sure what you mean with margins not lining up but... There are validation errors in the CSS. While they may not be the cause of the problem, it would be the first thing I'd look at (the second thing would probably be the nested tables). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] best way to style addresses
G'day sam sherlock wrote: for more details see the link below http://www.w3.org/MarkUp/html3/address.html Which is HTML 3 (quite outdated) but says... The ADDRESS element specifies such information as address, signature and authorship for the current document But... tee wrote: I am working on a page that involves with hundred of address in different locations/cities. What is the best way to do? unordered list, definition list or table data? Yes, I've used the address element for such purposes too, because I did not know the intention of that element. But going by the quote above, I don't think address would be appropriate here. A *list* of addresses would probably be best done as a list (ul or ol) until (x)HTML comes up with something more semantic. Maybe even a table would be semantic in this case - sounds similar to a database/mailing list where each row is a record and each column in that row a field (name, address, phone no. etc). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] xhtml DTD
Spark wrote: http://www.w3.org/TR/html401/index/elements.html Although is a useful list, it's not good for what I pointed: knowing what can go inside what. Like can I put a Heading tag inside a DT? (no) , or can a put an A here in the BODY ? (no , you can't). Does anyone have any suggestion ? Might be some page outside W3C (since the standards move quite slowly, i may use them for a few years :) http://www.zvon.org/xxl/xhtmlReference/Output/index.html Or the download version: http://www.zvon.org/download2.php/xhtmlReference?title=XHTML+Reference Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Dropped DIV dilemma
Paul Noone wrote: Problem: http://d81314.i50.quadrahosting.com.au/index.php?module=Newsid=cntnt01cntn t01action=detailcntnt01articleid=8cntnt01returnid=11 The Site Updates div gets pushed way down the page. And I've got no idea why/ Strangely all is well in IE (with all the hacks in place I'd hope so!). There's a lot of css to wade through, but as far as I can tell, your clearfix class is the cause of the problem. Removing that class (in Firefox dev toolbar, to test my theory) stops it dropping down, although it causes problems elsewhere. With so many divs, classes and id's that's about the only thing I can figure out. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] weird IE6 doctype switching question
G'day This is probably going to sound really weird but I need this for something I'm working on. Yep, you got that right but I won't ask why :-) Question: Is it possible to make IE6 use the broken box model for a PART of the document? As far as I know, the only way you'd get that behaviour would be if you insert a document (with quirks mode trigger) into an iframe (or object) on the compliant page. Note: just a theory - I haven't tested it. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE float quest
G'day So I declared 'display: inline' in the #formWrapper, it solves the problem but my background color shrinks to a small square above the the form in Firefox and Opera (both PC and Mac); in Safari and IE, the background color completely gone. Have you tried display:inline-block ? It's valid CSS [1], Mozilla ignores it and it ~may~ do what you want it to in MSIE. [1] http://www.w3.org/TR/CSS21/visuren.html#propdef-display Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE float quest
G'day Hi Bert, no, display:inline-block doesn't work however your suggestion prompted to use the IE conditional comments in my html' .head tag. Seems a bit of overkill for a single rule. I avoid hacks wherever possible, but if you do need one, it's better placed in the CSS file (e.g. with a * html hack). I haven't got time to look through the whole CSS file (reverse-engineering) to find the cause of each problem, but given you use exact pixel widths in many places, chances are that they aren't adding up (with IE's float bugs adding 3 pixels here and there). I'd give it a bit of slack - maybe some of your problems will be solved by removing some of the widths. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Frames ?
G'day Peter Levan wrote: I believe you can make use of the position: fixed css property to get some frame-like behaviour Which is fine if you have control over the whole page, but not if you're trying to display someone else's site within your own (not recommended), as asked in the original post. Just another point to consider (apart from the other valid points raised about this practice), if my browser window is 750 pixels wide and you're using a 200px frame on the left, you don't leave much room for the other site to display in. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS in IE Help needed.
G'day
Al Kendall wrote:
Can anyone please tell me how to fix the following script to get the div the
stay in the center of the page in IE. It works fine in Firefox, but stay
left in IE.
Add this to your existing CSS:
body { text-align:center }
#content { text-align:left }
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] CSS in IE Help needed.
G'day I feel a site should be fluid to 100% irrespective of resolution. While I agree with you in principle... Have you ever seen a site at 1280x1024 or higher resolution, 100% width and (as some designers seem to be keen on), microscopic (12px or smaller) text? Not easy to read. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Driven?
And still - table for layout _is_ a hack. I'd rather have that single, easy to spot hack, which adds very little overhead, than multiple background images and extra divs coupled with hyroglyphics in my css file. Yes, I know presentation belongs in the CSS. No, I don't subscribe to Never ever ever use a table for layout purposes although I do frown on nesting them. No, I don't usually use a table for layout, but I can understand people who use a SINGLE layout table in some cases. If the alternative is too complicated, use a table, but don't nest them. We've had these discussions before, so I'll leave it there :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Abbreviations and Acronyms
G'day Paul Noone wrote: IMO, provided you are somehow offering a visible definition of the acronym or abbreviation - be it by use of a specific tag, or the ill-fated title attribute - I think you have achieved your objective. Or even the traditional way: Web Standards Group (WSG) the first time it is mentioned on the page. Frankly, at the moment it still seems that ALT and TITLE perform better cross-browser and also have the added benefit of not being mis-applied or misunderstood. The alt attribute is of course only applicable on images, while the title attribute does nothing on abbr in MSIE (Windows), since it does not understand abbr. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS and the University Syllabus
Tables are only frowned upon when they are used to mark up data that is not even remotely tabular, simply to achieve visual layout. Yep, especially when nested :-) Just today I came across a site that nests tables up to 9 levels deep. With a menu of 6 links that uses 5.5kB of code. They were trying to sell me their software that generates this rubbish. I'm telling them that until they clean up their act, I wouldn't recommend it if they paid me :-) But they probably don't care. Anyway, I digress. If you have tabular data, put it in a table - that's what they are for! Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS Driven?
G'day
Miles Tillinger wrote:
Could CSS be used to display that two-column table layout as a single
column?
td { display:block; }
Works in Firefox and Opera (Windows).
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] italic and validator
G'day is i (italic) deprecated in xhtml? and even better, could someone point me to a w3c page that talks about what is deprecated in xhtml? XHTML 1.0 is a reformulation of HTML4.01, in which i is not deprecated. However, when talking about font style elements, the spec says: http://www.w3.org/TR/html4/present/graphics.html#edef-I : Although they are not all deprecated, *their use is discouraged in favor of style sheets*. Only s, strike and u are deprecated in that section (along with font and basefont mentioned in the next section) and, second part of that, why does the validator validate it if it is deprecated. If it's defined in the spec for the doctype you are using it's valid (if properly nested etc). But... http://www.w3.org/TR/html4/conform.html#deprecated : HTML presentational attributes have been deprecated when style sheet alternatives exist Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] italic and validator
G'day
Paul Noone wrote:
But now I find myself confused by a couple of the elements listed as
optional (O); namely the HEAD and BODY tags. Optional?
Good question, especially when the same document says:
Every HTML document must have a TITLE element in the HEAD
section. Can TITLE be placed anywhere if there is no HEAD
section? Seems that way.
Validator says the following is *Valid HTML 4.01 Strict!* :
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN
titlePage title/title
style type=text/cssh1{color:red}/style
h1Heading/h1
pA paragraph of text
Hmmm, so (to go along with the Google debate), we can save more
bandwidth by omitting html, head and body? Interesting.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Problems styling dl's
Can't recall seeing an answer to this post, so I thought I'd have a look at the issue. Eg. http://www.business.ecu.edu.au/schools/mtl/staff/index.htm and http://www.business.ecu.edu.au/schools/mtl/staff/spettigrew.htm In IE I get the 3px jog and in FF dd's that are shorter than their corresponding dt float upwards messing up the alignment. ... Is this doable or should I be looking for an alternative way to make lists? I would like to make it work. I did some experimenting and can't make the 3px jog disappear either with the current (x)html structure. However, if you put a list (ul) with list-style:none; into each dd that has more than one name, rather than using multiple dd's per dt, you may be able to solve the dilemma. Float the dt left, give the dd a corresponding margin-left and a height:1% (hack) for MSIE. See example at http://www.bwdzine.net/test/ecu.html Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] *Why* doesn't Google validate? was New logo scheme was talking points for standards
G'day Michael Cordover wrote: I think that Google's failure to validate may be due to the simple issue of bandwidth. Certainly on the main page, the whole source is compressed and effectively minimised. Bandwidth is expensive these days. Inserting a doctype, separating style data, that sort of thing, takes a lot of additional bandwidth when you're dealing with hits in the quantities that they do. I don't follow your logic. Bandwidth is getting cheaper and cheaper, at least where I live. Getting rid of tables, font elements etc is likely to make their pages lighter, rather than heavier, especially when all presentation and behaviour is moved into (cached) external style sheet(s) javascript file(s) respectively. Downloading a style sheet once, or downloading all the presentational code on every page view - which one is going to cost them more in bandwidth? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] problems!!!
G'day again
Thanx for your response Bert,
My problem is this: If I display the page on 800*600 it would look
correct, the thing is when I use a higher resolution as 1024*786 or
bigger... the quienes somos text would move right below the bienvenidos
section, I need that the twocols items display on the same line,
Looking at it with resolution of 1152*864. I see what you mean,
if I enlarge the text.
Put a margin-left on #columnMain then, equal to the amount of
space you want to reserve. Something like:
#columnMain { margin:0 0 0 120px; }
Or am I looking at the wrong problem?
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] problems!!!
G'day On this address: http://www.addictivemedia.com.mx/limpeq/ I need to display the quienes somos and Nuestros clientes divs right below the photo and bienvenidos section. I already clear them both, clear them right, left, and it doesnt do it... I've done a quick test in Firefox (with the web dev toolbar). Try removing clearboth and don't put a 100% width on twocols. AS I see it, by clearing twocols and giving it a 100% width (plus margins), you are forcing it below the floating elements. I found it odd that something with id=leftcontent would be floating right. Try to not use presentational id and class names. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Valid alternative to textarea WRAP
G'day The FF Tidy plugin gives a warning on the wrap attribute, and I'm hoping to do a find and replace to fix it. Does that (proprietary) attribute actually do anything in any browser? The only values I have seen mentioned for it are off, Virtual and physical - I've not seen soft mentioned before. If it doesn't do anything (other than invalidate the pages), I'd just remove it. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Valid alternative to textarea WRAP
G'day Sarah Peeke (XERT) wrote: Hi Bert So remove *wrap=soft* entirely? Yep - I agree with Lachlan (for a change :-) Soft is the default value, so it's completely unnecessary. Remove it. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] *Why* doesn't Google validate? was New logo scheme was talking points for standards
G'day Well, it isn't the first thing that occurred to me! I've often wondered why it is that Google doesn't validate. I never looked at it closely, but you're right - it's tagsoup, tables for layout and deprecated elements and attributes galore (font, center anyone?). No DTD either. Perhaps, like *many* businesses, they look at it and say it works in all browsers, so what's all the fuss about? They don't *see* the need... Perhaps it's also a case of (some) programmers are not html coders. It seems many people who write server side scripts only have a vocabulary of about 10-12 HTML elements (html, title, meta, body, table, tr, td, center, font, img and maybe a couple more). Yes, I know there are exceptions... Just thinking Google may fall into this category as it's obviously script driven. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A floating menu that keeps folding where it shouldn't (repost)
Hi Seona I guess one reason you have had no replies is that the page does not validate. This may not be the cause of the problem, but it's a starting point (I'm not blaming, just observing) For the rest, it's difficult (read: time-consuming) to go through a 21kB CSS file to find what may be the cause of the problem. All I can think of is that it's related to the mix of left and right floats, absolute and relative positioning in your #prinav, with the ul having no width specified. Maybe IE is not expanding the container to make room for the fourth list item. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] getElementById() always returns null
G'day
I was having some trouble finding out why, whenever I call for
document.getElementById(id), it returns null (even if there is a valid
id-matching element). Consider something simple, like this:
The javascript runs as the page loads. At that point, the
elements with the ids do not yet exist in the DOM tree (as they
are still to be loaded). You'll need to delay the script until
the page has loaded. Something like:
function init() {
var toggle = document.getElementById('toggle');
var onoff = document.getElementById('onoff');
toggle.onmouseover = function() {
onoff.style.display = block
}
toggle.onmouseout = function() {
onoff.style.display = none
}
}
window.onload=init;
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] talking points for standards
G'day Dollars and cents is the language that will convince most, if not all, sceptics. The problem I face in that regard is that a lot of sales enquiries I get are from people who want to maintain their own site, for next to nothing. They don't want to spend money on a content management system (which is overkill anyway, if the updates are few and far between). Many think they can maintain a site with Frontpage, which, after all, is relatively cheap. I can't help them, unless I throw standards compliance out the door. As far as (server) bandwidth is concerned, it only matters for big sites with a lot of traffic, or sites with a host that provides a ridiculously low quota. When it comes to search engines, can anyone prove that lean code is better? Has anyone done research on this claim? Google is full of tagsoup sites that are highly ranked. I searched for web design in Google (pages from Australia only). The top 3 (non sponsored) sites used tables for layout, none of them validated and only one had a doctype. They all used some CSS but only in addition to the tagsoup. So where are the benefits? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] editor
Before we get a flood of posts along the lines of my favourite editor is and mine too ... Have you looked at the resources section of the WSG website? http://webstandardsgroup.org/resources/ Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] XHTML Issues
G'day If you're not using the right MIME type, you may as well be using HTML4, as you're just relying on browsers error recovery techniques to understand XHTML. I code in xhtml Strict and serve it as text/html. My code is future-proof, valid and well structured. If I code in HTML4, there is less need for writing properly structured documents. If at some point in the future browsers understand xhtml served as xthml, changing the way it's served is a relatively simple operation. Re-coding from HTML to xhtml (and unlearning bad coding habits) is not as simple. Plus, I'm sure you've read Ian Hickson's Serving XHTML as text/html considered harmful article?! One man's view, based on an assumption that people will write xhtml tagsoup. Even if they do, they will find out soon enough. I can't speak for others, but I write proper xhtml, not html tagsoup translated to xhtml. I think we've had a thread about this article already, so will leave it there. In the case of IE and XHTML, there isn't even limited support for it, there's none at all. While technically correct, it is misleading, particularly for newbies, who might read it as don't code in xhtml - people with MSIE will not be able to view your site. It's not true if the page is served as text/html. Also, it's very important to be aware of the xml declaration issue, beginners must not learn to rely on quirks mode behaviour, they need to learn standards compliant behavior from the beginning, so it's important that it not be used. I agree with you on that point. I think it's important for beginners to learn correctly from the beginning. Exactly. Teach them properly structured xhtml 1.0 and serve it in a MIME type that the browsers people use can work with. Ready to reap the benefits of X(HT)ML later, when browsers support it. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] :after, IE, and link text wrapping
G'day
Paul Noone wrote:
Set a width or padding on your exit class that is sufficient to display the
image.
And get the class name in the html matching the css. In fact,
the span doesn't need a class at all if you do this:
a.external span { /* whatever styles needed */ }
a class=externalBlahspan /span/a
FWIW, I don't like the idea of adding extra, non semantic markup
for presentational purposes.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] :after, IE, and link text wrapping
G'day Ok ok, I know I said I'd given up, but I tried this, and it finally worked. Still ... it's weird that it didn't show up before. And in fact, when I move the span back to get this ... a class=externalLink herespan/span/a ... it disappears again. When I wrap it around the last word again, it appears. Probably because you have an empty inline element (nothing inside the span). Browser says: there's nothing there so I'll display nothing :-) Maybe if you put a space in it (hoping MSIE doesn't decide it's unneeded whitespace)? Or give it display:inline-block, with a width. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] starting ordered lists from a number other than 1
G'day We need to start an ordered list on a page from a number other than 1, as the lists could be quite long and so will be chunked into a set per page. ... What do people suggest? Use a transitional DTD (whether XHTML or HTML) so you can use the start attribute while keeping the document valid. Using divs to insert the numbers is IMO worse than using a (for transitional DTDs) valid, though deprecated attribute. In theory, you could use counters in CSS, but as far as I know very few browsers actually support it at this point in time. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A little help with a charity site please
G'day
PS. I got the transparency working after I gave the container a size.
Still haven't figured out the 1pixel space.
Change the image alignment from top to bottom
img {
vertical-align: bottom;
border: 0;
}
Incidentally, the html doesn't validate, partly because you have
no alt attributes on a number of images. If they don't need alt
text (i.e. they are just for visual effect), consider putting
them in the css as background images.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Inline link padding in IE6
Gunlaug Sørtun wrote:
It is difficult to give a link layout, but 'zoom: 100%' will work.
Question: Which CSS standard defines the zoom property?
I don't see it in CSS2, nor in the CSS2.1 working draft. I
suspect it's a Microsoft invention and its use will invalidate
the CSS.
You could use { display: inline-block } instead. At least that's
defined in the CSS2.1 working draft.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] snug a border around diff sized pix
Tom Livingston wrote: Just out of curiosity, why would a div not be the same size (or hugging) the image inside it if it has no styling of it's own? Box model issues? I may be mistaken, but... A div is a block level element by default. If it has no styling of its own, its width should be 100% of its parent's inner width. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS and PHP
Tim Burgan wrote: Just a quick note that'll help: In the URL, the special characters (such as ampersands, question marks, etc) need to be converted to html character entities. Question marks do not need to be converted. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Accessibility: Default placeholders
Is it really necessary for accessibility to include default place-holding characters in edit boxes and text areas per WCAG 1.0 Checkpoint 10.4? Is that an obsolete guideline? 10.4 *Until user agents* handle empty controls correctly, include default, place-holding characters in edit boxes and text areas. [Priority 3] For example, in HTML, do this for TEXTAREA and INPUT. http://www.w3.org/TR/WCAG10-TECHS/#tech-place-holders Have we reached (or largely reached) the until user agents stage yet? What implications is ignoring this guideline likely to have (other than not getting tick marks from various automated tools), given I use properly coded labels and (where needed) fieldsets for the inputs? It seems crazy to repeat the label text (or slightly amended info) in the input for people to overwrite (and some will perhaps leave it in there!) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Accessibility: Default placeholders
G'day Thanks for all the replies, you've confirmed my suspicions. It's unfortunate that online accessibility/quality checking tools still insist on this (especially when you have a client who likes to see a mass of ticks with every tool you throw at his site). I have the same concerns others voiced about there already being data in the field - it's confusing and may cause more problem than it fixes. I hate having to manually select text already in an input, to overwrite it. Yes, that can be overcome with javascript, but I'd rather not fix a problem by introducing another potential problem. I might settle on adding value= (space) - shouldn't be hard to change my scripts to strip leading spaces when checking if a field has been completed. Geoff, I know exactly what you mean with the greyed out fields. Came across it myself only yesterday - a form where all inputs had a grey background. It wasn't until I clicked in one of them that I realised the field was not disabled. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Accessibility: Default placeholders
G'day I would have thought that you would want to make your scripts check for leading _and trailing_ spaces. Mouse users will often click into the start of a field. When they enter text, they will end up with a trailing space. Although I tend to click somewhere in the middle (rather than do gymnastics to move my mouse to the beginning of the box), it's a good point. Not everybody is like me (which is just as well :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Bridging the gap in IE
G'day I'm using image replacement on a H1 element. The problem I'm having is that the content under the H1 is fine in Firefox, but is pushed much further down the page in IE6. An example shows it clearly: HTML: http://timburgan.com/css-test/index.htm CSS: http://timburgan.com/css-test/css/style.css Is this a common issue, because I always seem to run into it? Does anyone have any ideas as to what this is caused by and how to overcome this? A few possible causes: 1. invalid HTML 2. invalid CSS 3. default font size and line height on the h1 4. margin on the paragraph following the h1 Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] css title styles
G'day I like the idea of linking back to the content once the reader has read the relevant footnote, but there are many instances when more than one footnote is attributed to a portion of the content (see example below). Also, the same footnote reference is referred to in different portions of the content. One option is to use some javascript to bring up a pop up message (hidden or dynamically built div, at the mouse location) that retrieves content from the relevant bookmark/footnote. I did something like this in 2002, although it was IE specific - using window.createPopup(). It doesn't work in other browsers (wasn't much of a consideration for me in 2002) but could probably be amended to work in other browsers. See http://www.klikbooks.com/Communication.html for an example. Look for a link with the text PECS and click on it. Perhaps a variation of this method (so you get a similar effect in other browsers) would be an option? Yes, I used a table for layout back in 2002. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] form hidden field ?
G'day
I have a hidden field in a css styled form and when you view the page it's
shown as a line in firefox, any ideas?
In your css:
input,textarea {
color: #ff;
background-color: #58829A;
border: 1px solid #27455f;
display: block;
etc
I'd say this is why you see the line - your hidden input will be
given display:block, with that border.
Removing display:block should fix it.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Couple of question - Image Map etc.
Taco Fleur - Pacific Fox wrote: Thanks, but that's what I did, whatever is there, does not make any sense to me at all, for example; Line 43 column 11: document type does not allow element H2 here; missing one of OBJECT, MAP, BUTTON start-tag. What does that mean? If you keep reading the validator page, it provides further information I quote: One possible cause for this message is that you have attempted to put a block-level element (such as p or table) inside an inline element (such as a, span, or font). -- A quick glance at the code shows that the validator is spot on with its possible cause. Let me re-write it to suit: - The cause for this message is that you have attempted to put a block-level element (h2) inside an inline element (span). -- Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Firefox caption madness
G'day I'm getting a weird problem when I try and absolutely position something in a table caption. ... captionh5emTable 3.1/em Performance results:/h5 Have you tried validating the (x)html? A caption can only contain inline elements and h5 is a block level element. It's possible your problems stem (at least in part) from this invalid coding. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Header text problem
Not sure what exactly you're asking, but: http://validator.w3.org/check?verbose=1uri=http%3A//www.zachinglis.com/ZachInglis.html It's broken code, which may explain why you are having problems. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Header text problem
G'day I can't seem to fix the UTF problem. Any ideas? If you mean the first of the 35 validation errors, have a look at what the validator suggests: ...perhaps you meant to self-close an element, that is, ending it with / instead of . So, meta . / instead of meta Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Top Ten Web Design Mistakes - yeah, right!
G'day Much as I hate to... and I'm trying hard not to but ...yes awkward to use. Let me pick an example: All I see is an overwhelming mass of links, even on the home page. But then, I'm just a casual observer who stumbled on the site as it was mentioned on the mailing list. It may be different for someone who went there looking for something this site has to offer (whatever that might be - I can't see it at a glance). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Flexible Font sizes in tables in ie
G'day
Either way I still have the problem of the table cell text either appearing too
large in ie, or too small in ff.
Without resorting to setting text size in pixels in my table, I can't find any
other way to prevent this from happening, I thought perhaps there might be a
hack out there that will pass 0.8em to ie, but not to firefox?
Yes. Use something like this in your css:
* html table { font-size: .8em }
Only MSIE will use this rule. I'm not sure whether on a Mac has the same
problem (someone else may know), but if it does not have the same problem,
there are other hacks/filters to stop Mac IE from using the rule above.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] css variables
G'day Thierry Koblentz wrote: And as a side note, with MSIE, it is possible to give an ASP extension to the styles sheet to use scripting logic within that file. ASP, PHP or whatever server side language you use, as long as you set the appropriate content type on (in) the file (be it css.asp, css.php or whatever) it should work in more browsers than just MSIE. I just ran a test and it worked fine in Opera 8, Firefox, MSIE6 and MSIE5 PC. If it's served as text/css and the output is valid css, it shouldn't matter what the extension is. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] CSS validator updated?
Has the CSS validator (the W3C one) just become a whole lot more pedantic? Sites that previously came out with a clean slate now throw up lots of warnings. I mean.. You'd expect sites made by people in the Features section of the WSG site to be perfect. I checked a few of them at random. All had warnings, some only a dozen or so, others had a long long list. Not that I want to single anyone out, but one would have thought Westciv would be OK. Or maxdesign. But no, even the W3C site gets a long list of warnings. Has the validator become too pedantic all of a sudden or was it too lenient before? Should we ignore the warnings? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Need help on css positioning
G'day As you can see I intend to set the width of the container and the banner into 75% and push them to the left. I intend to reserve the space available in the right after that for the sidebar whose width is set at 25% and positioned to the right. But unfortunately, the sidebar has floated to the right but it is always positioned under the banner. A couple of things you might try: 1. Float the sidebar left instead of right 2. Don't float the sidebar at all. 3. Give the sidebar a little less than 25% width (e.g. 24%), Some browsers cannot add up Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Semantics of address?
G'day I'm just wondering how you all use the address element, or how you think it -should- be used? There are several threads in the list archives about it. Here's a couple: http://www.mail-archive.com/wsg@webstandardsgroup.org/msg11099.html http://www.mail-archive.com/wsg@webstandardsgroup.org/msg17576.html Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] 3px Space problems
G'day
I have a problem on my pages where there is a space between the navigation
and the image, there is like a 3 pixels space, but only when I view it in
anything else but Internet Explorer.
http://www.pacificfox.com.au
Add this to your style sheet: img { vertical-align:top; }(Or just
for images in a certain section)
Firefox (and perhaps other browsers too) have a default image alignment
of baseline which leaves that gap at the bottom.
Incidentally, you might want to have a look at the site with images
disabled. Or load it over a dial-up connection.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Click here--reference
G'day I'm working on a site that has lots of click here links. I believe it's considered bad form to use click here rather than making the link on words that better represent the title of the page being linked. Does anyone know a rule I can point to (and send my client to read) re accessibility and click here? http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-meaningful-links : 13.1 Clearly identify the target of each link. [Priority 2] Link text http://www.w3.org/TR/WCAG10/wai-pageauth.html#link-text should be meaningful enough to make sense when read out of context -- either on its own or as part of a sequence of links. Link text should also be terse. For example, in HTML, write Information about version 4.3 instead of click here. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] The Big Lie about CSS
G'day a) it's more efficient because the style sheet only gets downloaded once! b) you can reformat your whole site just by changing the CSS file! and what, we just hope nobody notices that they contradict each other? To me it's only a contradiction if you read once to mean once in your lifetime while I'm sure the intention is to say that the presentation does not need to be reloaded with every (x)html page you load on the site during a visit. Having said that, I don't know how long browsers would actually cache the style sheet - I have had plenty of cases where I've updated it and had to resort to Ctrl+F5 to see the update (in various browsers). That might just be a server setting, but I don't know. Changing the css filename is not a good idea as you would then need to edit every html file to point to the updated file? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] The Big Lie about CSS
I wrote: Changing the css filename is not a good idea as you would then need to edit every html file to point to the updated file? Unless like you (John) mentioned, one uses an include (I missed that bit). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] images in html or css
G'day Is the img tag still widly used among list members. Should we put as many of the images we can in the css as backgrounds etc. Right now i put most sitewide images in the css and the page by page content in with the img tag. My approach is (generally) that purely decorative images should ideally go in the css as backgrounds. Images with meaning (e.g. photos of products, mugshots of staff, graphs, etc) should be placed in the (x)html via the img element, with appropriate alt attribute. But I am only speaking for myself - others may have a different approach/opinion. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Style a parent element based on an id selector of the child element
G'day Is there a way to style the td element with a background colour if an a element has a active_menu id? As others have said, you;d need to resort to JavaScript to do this, or change the setup so the id is on the container you want to change. One thing though... Is this in a data table or is part of a navigation list? If the latter, I'd use a list (ul or ol) rather than a table. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] braindead - iframes???
G'day Kenny Graham wrote: Objects of type text/html (or application/xhtml+xml) are what I use. But good luck getting them to work in IE. In my experience, IE will only do it if it's a local (x)html file. Works fine for me in Firefox and Opera 8. Works in IE6 Windows as well, if served as text/html. Don't know about IE5.x If you're serving application/xhtml+xml it's not going to work in IE because IE doesn't like application/xhtml+xml. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables and divs and soon
G'day This is called the web standards group. I imagine that those here essentially adhere to the value of web standards, and discuss things in this context. And we are. Where in the standard does it say we are not *allowed* to use even one table for layout? 3.3. of which says: Use style sheets to control layout and presentation. A table's presentation can be controlled with CSS. No need for bgcolor, background, border etc in the (x)html. 5.3 of which says: Do not use tables for layout unless the table makes sense when linearized See that word unless? The CSS is religious thing is a straw man. The way some people preach against using ANY table for layout as they are evil sure makes it look like a religious obsession. But maybe it's politics rather than religion. Right wing or left wing? Can't sit on the fence or keep changing camps based on our needs, or can we... From the get go the tables for layout approach was a hack Call it a hack if you like. CSS layouts are usually full of them too. HTML (and CSS) did not and do not (and may never) have anything that will just as reliably give all people the layout they want and need in the browsers that most people use. Horses for courses. History teaches us that such things, regardless of their present usefulness, we usually come to regret. I am sure history has plenty of examples of quite the opposite too :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables and divs and soon
G'day again :-) http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#layouttables unless of course you would argue the difference between should not and not allowed, in which case I guess you would win. It's a working draft, not a recommendation or a standard and you're right. I used to work as a QA Auditor (ISO9001). In standards parlance, should not has a different meaning than must not or shall not. Still, if you want to use that document *Generally*, display technologies such as [CSS2] http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#CSS2 can achieve the desired layout effect with improved accessibility. Generally? Meaning there are exceptions? However, *when it is necessary to use a table for layout*, the table must linearize in a readable order. So there are times when it is *necessary* to use a table for layout? Keep reading... http://www.w3.org/TR/2005/WD-WCAG20-HTML-TECHS-20050630/#layouttables-avoid It is *recommended* that authors not use the |table| element for layout purposes *unless the desired effect absolutely cannot be achieved using CSS*. I rest my case. -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables and divs and soon
This thread is getting longer by the minute, but I enjoy the debate :-) I have found a very high correlation between malformed documents and the use of tables (with the errors occurring in direct association with table code). OK, you found a strong correlation, but are you drawing the right conclusion? 1. How many were generated with a WYSIWYG editor? 2. How many were generated by some sort of server side script? 3. How recently had they been updated? 4. Were they nested tables rule! types (which I hate too)? It's a bit like statistics - they can be used to prove almost anything, depending on how you interpret them :-) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables and divs and soon
G'day 1. How many were generated with a WYSIWYG editor? Why would that matter. Not even the tools can get tables right? If a large portion of the sites' developers used a flawed tool, it explains partly why a large portion of them had the same problems. That's why it matters. 2. How many were generated by some sort of server side script? So script writers can;t get tables right either? Well, what does your research show? I have seen plenty of script driven sites that do not validate, whether they use tables or not. 3. How recently had they been updated? Why would that be in any way relevant? If a site is 3-5 years old, do you expect it to be written in the new way? 4. Were they nested tables rule! types (which I hate too)? Some. So now some tables based layouts are good and some not? Which ones are they? Why? Conversely, are all div based layouts good? Why? I'd rather see a simple, clean two or three column table than a page suffering from divitis and classitis (like the Barclays home page mentioned in another thread). It's a bit like statistics - they can be used to prove almost anything, depending on how you interpret them :-) Or rhetoric, which can be used to convince oneself of just about anything. I've seen plenty of evidence of that in this debate, from both camps. So here's a little more of it. In the end it is a matter of choice. A matter of what Standards based design means to the individual web developer. In your case it seems to mean never use a single table for page layout. In my case it means only use a table for layout if the alternative is proving too difficult Tables are only as complex as you make them and yes, I have seen plenty of astoundingly complex table based layouts. I have also seen awfully complex css based designs. Anyway, I've said enough. I'm happy to dwell in the middle ground, doing what I can with what I know. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] td != div
G'day By what you're saying, I could simply have my outer wrapper for the margins/bg stuff, and then the h1 id'ed to replicate the whole header, and the ul id'ed to the nav list. This makes sense. div id=wrapper h1 id=headerImage replaced title here/h1 ...etc... I'd even drop id=header and just style the h1 element. Unless you use more than one h1 per page... Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Tables and divs and soon
Not that I'm into me too posts but here's my 2 cents. I don't think using tables is a very good way of raising the risk of invalid documents as John suggested, but rather people that use tables have got an old-fashioned mindset. Until a few years ago, I used tables for layout, exclusively. However, I made sure my pages validated to html 4.01 strict or xhtml 1.0 strict. Table based designs are not the cause of the errors, nor is it more difficult to make them valid than documents without tables. John: using tables is a very good way of raising the risk of invalid documents. I agree that most sites that have invalid markup use tables (or even frames) for layout. That makes sense, since people who know how to design without tables would more than likely understand the importance of validation. But I don't agree with John's conclusion which seems to reverse that thought. In *many* cases sites that are full of validation errors are either produced a WYSIWYG editor or by some server side script. Indeed, many scripted sites are littered with nested tables and validation errors. So Using programmers is a very good way of raising the risk of invalid documents?Nah! Anyway, ICSS is not a religion to me and I will use a simple layout table if it helps me achieve what I need to achieve :-) And yes, it will validate! Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] braindead - iframes???
G'day
What's out there that displays the contents of a URI and validates?
object type=text/html data=whatever.html id=Something
Alternative content here
/object
Give the object a width and height with CSS
#Something { width: 40em; height: 30em; }
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Expanding height of left column to fill space
G'day we have created an expectation of how a design will *visually* render in a browser. Quick reality check What do most people use when visiting a website? What do clients who pay the bill want? The whole concept of using tables for layout is flawed ... adds unneccessary weight to the design On those sites that use tables nested to the nth degree you're absolutely right. But a simple 1 row, two (or three or ... column table with solid background colours (via CSS) is likely a lot lighter than multiple divs, background images, hacks, conditional comments, javascript etc. It's not that CSS is hard, it's that the implementation is buggy in a lot of browsers. And since we live in the real world, where real people use those buggy browsers, we do what works best. Sometimes that means a table. I agree tables SHOULD not be used for layout but it's not a crime to use one occasionally especially if the non table approach adds unnecessary weight to the design. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Expanding height of left column to fill space
G'day again Once upon a time it was NN4, now it's IE6, and tomorrow who knows? And that's the point of designing to web standards. As for what the client wants, I say it's two of: good, fast, cheap. Yep. And some of those have difficulty with non table based layouts :-) However, I doubt very much that the big driver is the visual design Bert, and I doubt most people visiting or commissioning a web site give two hoots as to how its built. The vast majority of my clients don't care whether I use a table or divs (and would not even know the difference). But they do often want a particular layout and all except a few do look at it with a graphical browser. For the record, the people paying my bills *do* want standards based design - I'm working in e-govt - and they want content that is usable by people, and *easily* manipulated by machines. Standards based (good) does not rule out using the occasional table for layout if it's the quickest way to get something out there (fast and cheap). (e-govt - is that the real world? LOL) If a 2 column CSS layout with a band of color down one side is difficult to implement with todays technology, shouldn't we instead look for designs that work with the technology we are using? If it's your own site and you are happy to have a different layout, sure. Or if you can convince the client that your way is better. But if the client wants a particular look, We should give them what they want. If that means using a *single* table to get two columns of equal length and with different background colors, I will use the table. setting a background on one or two div's *still* uses less code than the equivalent markup for tables. Show me an example?* *Take into account not just the html, but also the css and the file size of any images you might use for the background color(s). No, it's not a crime, but really if your design needs a table in the strucutral layer to support the visual design, should you not revisit the visual design? The visual design is not always negotiable, so I use the means available to me to deliver what I am paid to deliver in the most efficient way I can. To me that means CSS based layouts *most* of the time. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] tabbed content within content pages
G'day unlike the other site I mentioned http://www.miavanloon.be/huifkartochten/essen/ which has tabbed content actually within the page. It may appear that way, but unless I'm missing something, there are 3 different pages: 1. There is a delay (loading a new page) when clicking on a tab 2. The links (in the tabs) are to different urls. 3. There's no (i)frame, object or JavaScript anywhere in the source Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Two column left navigation
G'day
I have a web site with a left navigation system consisting of images
and text in 2 columns.
The image is displayed on the left, with the text link to the right of
it.
...
The width of the container is fixed (at 220px), and the size of the
left images is 100px.
Why not use a simple (unordered) list? Since (as I read it) all the
images are the same size (width AND height?) you can float the image
left. Something like:
ul#nav li { height: 100px; } /* add whatever else you need */
ul#nav img { float:left; width:100px; height:100px; }
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Suckerfish nav moving page background image
G'day Here's a screenshot of what I'm experiencing http://media.compliance.org.au/data/jumpy_bkg.gif Note that you also need to have the page set to the centered layout for it to happen. Uhmmm. What do you mean with have the page set to the centered layout? Is this some obscure browser option or plug-in? I do get the jumping horizontal scrollbar, which is a direct effect of the content expanding with the long text on submenu items. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Site which only works in IE?
G'day
I'm working on the first three pages of a new website,
www.zebragraphics.co.uk/tcs, which seems to only work properly in PC
IE6 and breaks in Firefox (PC Mac) and IE5, Safari and Camino on
the Mac. I'm used to this being the other way around...
If you're referring to the issue of the panel on the left not
stretching, try adding this to the style sheet:
#container:after {
display: block;
content: ;
clear:both;
height:0;
}
Incidentally, your use of heading elements (particularly the h6) seems a
little odd. It's almost as if they were used for presentation. But
maybe I'm mistaken..
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] weird three menu on IE 5
G'day Dwain, the url was shown at the bottom of Setiawan's email: for more detail those code was in : http://embun.net http://embun.net/style/style_black.css http://embun.net/script/script.js Setiawan, it would indeed help if you would tell us what part of the menu looks weird to you. The only thing that looks odd to me in IE5 (PC) is some extra space between the (background) bullet and the text in the menu items IE5 / 5.5 PC is not used by that many people. They would not know how it is ~supposed~ to look and the menu works fine. But if you do want to fix it, the auto left margin on the ul and problems with the IE5 box model may be part of the reason for it (no guarantees). Note for YW Webmaster: a 34kB email to say Can you describe what its doing wrong in IE 5 and 5.5? seems a little over the top. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Need recomendations for CMS system
I thought this thread was CLOSED? Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] html design - best practices
G'day That's a very curious thing for the W3C to publish. I am not aware of any HTML standard in which b and i are deprecated. Can anyone cite such a declaration? Cant find one myself. The closest is: http://www.w3.org/TR/html4/present/graphics.html#h-15./2 (which talks about some font style elements): //Although they are not all deprecated http://www.w3.org/TR/html4/conform.html#deprecated, their use is discouraged in favor of style sheets./ / /So tt,i,b,big and small are not deprecated while strike, s and u *are* officially deprecated. Either way, as standards advocates, I believe we *should* avoid these (and other) presentational elements and attributes in our (x)html, whether deprecated or not. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] CSS rollover with dynamic drop down menu
G'day
I'm trying to combine a CSS image rollover with a drop down menu.
Everything is working fine bar the css image rollover.
For some reason the a:hover is not being read. I've probably missed
something very simple but just can't see it.
Your HTML:
lia id=Home title=Home href=index3.jsp/a/li
Your CSS:
#Home a:hover {background: url(Menu.gif) no-repeat 0px -14px;}
That rule will be applied to a hovered link *inside* another element that has id=Home.
However, in your HTML *the link itself* has that id.
To fix it, either put the id on the list item (li) or change the css to
#Home:hoverSame goes for the other links.
Hope this makes sense.
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Forcing Display of Block
G'day Very simply: div pHello./p p/p /div Is there any way to have the second p appear without inserting a non-breaking space? Question: What's the (semantic or otherwise) meaning of the empty paragraph? If it's only there to add extra white-space, why not add padding-bottom:1em (or whatever you need) to the div? If it's there for another reason, you could try giving it a height (through CSS) Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Spacing Issue
G'day Thanks for the replies. I actually took a step back, re-evaluated the suggestions I got and came up with this test page which appears to work: http://www.olpguitars.com/index2.asp The top links all work and I retained the graphic designer's sliced image. oh yeah...it VALIDATES! A step in the right direction (in my classist opinion anyway). I won't go into all the remaining issues - you're probably aware of them anyway and have done the best you can with what you know. One thing though, what's that tiny text on the left? Is it legalese fine-print you are trying to hide from potential customers, or is it important information they came to the site for? Spare a thought for visitors who use MSIE (which likely will be most of them) and don't have perfect eyesight (which may be many of them). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Firefox JS Image function
G'day The following website uses a Javascript function and a target layer to display a new image every time the page refreshes. http://www.theleadsgroup.co.uk/ This works fine in IE browsers and in Firefox/Mozilla browsers it seems to not display the images at all? Anything I am doing wrong or any advice? You're using MS proprietary Javascript (namely innerHTML). Either use the DOM or simplify things by putting a placeholder image (1x1 transparent gif stretched to desired dimensions?) into the html and changing its src attribute in your javascript. e.g. document.getElementById(randomimage).src=imageArray[picknum]; (and just put the file names and paths into the array) Note: I haven't tested it, but it should work in theory (except in very old, pre DOM browsers) Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] background images fluid
Bruce wrote: I guess I cannot communicate what I mean. I was wondering if an image would stretch as a background image in the stylesheet as a background. That's all. Short answer: No, you cannot, with CSS and HTML as it is today, resize a background image. The only properties available for background are: background-attachment background-color background-image background-position background-repeat There is no CSS property background-size or background-zoom or similar in CSS2. So for now, if you want to stretch it you will have to use a (foreground) image and use trickery (absolute positioning, z-index etc) to make it appear behind other objects. Hope this answers your question -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Site Check: VVE
G'day http://testdrive.fueladvance.com/vve/ http://testdrive.fueladvance.com/vve/Dashboard/Default.ashx Pretty good (looks clean, code and layout wise). I don't like using as many classes as you do, but that's personal preference. The only real problem I see is accessibility - a number of links with the same text [read more] going to different URL's. (Checkpoint 13.1) And there's a couple of errors and warnings in the CSS. Regards -- Bert Doorn, Web Developer Better Web Design http://www.betterwebdesign.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Table versus 4 floated divs
G'day I have a page at: http://www.xert.com.au/workshop/p77ji/ where I have used an isolated table to promote two products. Would it be better to use 4 floated div's here instead? I've not used that many in a row before... If it's not tabular data (and it doesn't look like it), the answer seems pretty clear :-) But you might get away with just having two paragraphs (or divs). If the images are only decoration (they have empty alt attributes so must not have meaning) why not put them in as a (css) background and give the paragraph (or div) some left padding? The only potential pitfall I can see with that is calculating widths - if we have 200px padding on the left, how wide do we make the div to make it 50% of page width. (Yes, easier with tables :-) Incidentally, going along with recent threads, the page doesn't quite fit (horizontally) at 800x600 (on my system). Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] link ?
G'day
I'd say your problem is here:
#navwrapper li a:link, a:visited {
See the a:visited? That affects ALL links on the page.
I think you meant to say:
#navwrapper li a:link, #navwrapper li a:visited {
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] image + title
G'day
I just want to display image with a shrto description below it.
And i want that combination to float.
What is the right semantic markup for this thing. IS it right to use this
p class=lfigure
img /
span/span
/p
Should be no need for the span if you do this:
.lfigure img { display:block }
p class=lfigureimg /Caption/p
And maybe it should be a div rather than a p(aragraph). To float
the paragraph (or div), add a width to .lfigure and give it a
float:left or float:right as appropriate.
HTH
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] image + title
G'day again
so the perfect one would look like this markup
p class=lfigureimg /Caption/p
CSS
.lfigure{
float:left;
text-align:center; /*to center description*/
}
.lfigure img{
display:block;
}
Nothing is perfect in this world :-) You'll need to give the
float a width but other than that it looks about right to me.
You might also want to add margin-right to .lfigure so text that
wraps around the float has a little breathing space.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Site Check: Broadleaf
G'day I just fail to understand people who are concerned about pages under 150k. Well, you probably fail to take a few things into account. Like people leaving a slow loading site rather than complaining. Like the cost of bandwidth. Like availability of broadband. I could go on, but I think we're far enough off-topic already. But how about cutting down the size of your emails and making them plain text? No need to repeatedly quote 40k of text with all that Micro$oft formatting in it. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Large Top Margin
G'day I can't figure out why there is such a large gap at the top of the #content area. I know there should be .5em of h1, but this is larger. http://tagav.com/dev/home.shtml If you put a background on your #header, you will see where the gap comes from. It's in the #header. The browser tries to balance the table cell heights and in so doing makes the header cell taller than you want it. You may be able to fix this by setting a height (in CSS) on the header. Better still, as David hinted, don't use a table for layout. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
