Re: [WSG] List Item Background Disappearing in IE
On Jun 23, 2004, at 2:34 pm, Andrew Coffey wrote:
I have an unordered list using css to load/position a graphical bullet
point.
ul li {background:transparent url("images/li_sprite.gif")
no-repeat 0 0}
It works fine across the board until the text within the
wraps.
At this point the bullet disappears in IE5 and up (and Opera).
Adding a colour to the background (let's say white #fff) certainly
fixes the problem.
ul li {background:#fff url("images/li_sprite.gif") no-repeat
0 0}
But in this particular instance I can't use a background colour (hence
transparent) and I've exhausted all my options.
Try applying the 'holly hack' to your
/* hide from IE mac \*/
* html ul li {height:1%}
/* - end hiding - */
(wild guess - you don't provide much mark up as a context).
Philippe
---/---
Philippe Wittenbergh
now live :
Re: [WSG] List Item Background Disappearing in IE
Oh, also IE doesnt like images under 1k in size. Try to make your
bullets a little over 1k and see if that does the trick.
Nataie :)
On Wed, 23 Jun 2004 16:27:12 +1000, Natalie Buxton <[EMAIL PROTECTED]> wrote:
>
>
> Hve you tried adding:
>
> list-style: inside;
>
> or
>
> list-style: outside;
>
> I dont know if it will fix your problem, but it has helped me on a
> couple of occassions.
>
> Natalie
>
> - Original Message -
> From: Andrew Coffey <[EMAIL PROTECTED]>
> Date: Wed, 23 Jun 2004 15:34:25 +1000
> Subject: [WSG] List Item Background Disappearing in IE
> To: [EMAIL PROTECTED]
>
> I've googled and discovered that yeah it's a known bug, Im just
> wandering if anyone has any suggestions on how to remedy it?
>
> DETAILS:
> I have an unordered list using css to load/position a graphical bullet point.
>
>ul li {background:transparent url("images/li_sprite.gif")
> no-repeat 0 0}
>
> It works fine across the board until the text within the wraps.
> At this point the bullet disappears in IE5 and up (and Opera).
>
> Adding a colour to the background (let's say white #fff) certainly
> fixes the problem.
>
>ul li {background:#fff url("images/li_sprite.gif") no-repeat 0 0}
>
> But in this particular instance I can't use a background colour (hence
> transparent) and I've exhausted all my options. Im not alone in the
> world:
>
> http://www.alistapart.com/discuss/taminglists/18/#c4087
>
> But there just doesn't seem to be a definitive solution... any
> info/ideas or otherwise on a way to fix this would be a great help.
>
> Cheers
> Andy
> *
> 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] List Item Background Disappearing in IE
Oh, also IE doesnt like images under 1k in size. Try to make your
bullets a little over 1k and see if that does the trick.
Nataie :)
On Wed, 23 Jun 2004 15:34:25 +1000, Andrew Coffey
<[EMAIL PROTECTED]> wrote:
>
>
>
> I've googled and discovered that yeah it's a known bug, Im just wandering if anyone
> has any suggestions on how to remedy it?
>
> DETAILS:
> I have an unordered list using css to load/position a graphical bullet point.
>
> ul li {background:transparent url("images/li_sprite.gif") no-repeat 0 0}
>
> It works fine across the board until the text within the wraps.
> At this point the bullet disappears in IE5 and up (and Opera).
>
> Adding a colour to the background (let's say white #fff) certainly fixes the
> problem.
>
> ul li {background:#fff url("images/li_sprite.gif") no-repeat 0 0}
>
> But in this particular instance I can't use a background colour (hence transparent)
> and I've exhausted all my options. Im not alone in the world:
>
> http://www.alistapart.com/discuss/taminglists/18/#c4087
>
> But there just doesn't seem to be a definitive solution... any info/ideas or
> otherwise on a way to fix this would be a great help.
>
> Cheers
> Andy
*
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] List Item Background Disappearing in IE
Hve you tried adding:
list-style: inside;
or
list-style: outside;
I dont know if it will fix your problem, but it has helped me on a
couple of occassions.
Natalie
- Original Message -
From: Andrew Coffey <[EMAIL PROTECTED]>
Date: Wed, 23 Jun 2004 15:34:25 +1000
Subject: [WSG] List Item Background Disappearing in IE
To: [EMAIL PROTECTED]
I've googled and discovered that yeah it's a known bug, Im just
wandering if anyone has any suggestions on how to remedy it?
DETAILS:
I have an unordered list using css to load/position a graphical bullet point.
ul li {background:transparent url("images/li_sprite.gif")
no-repeat 0 0}
It works fine across the board until the text within the wraps.
At this point the bullet disappears in IE5 and up (and Opera).
Adding a colour to the background (let's say white #fff) certainly
fixes the problem.
ul li {background:#fff url("images/li_sprite.gif") no-repeat 0 0}
But in this particular instance I can't use a background colour (hence
transparent) and I've exhausted all my options. Im not alone in the
world:
http://www.alistapart.com/discuss/taminglists/18/#c4087
But there just doesn't seem to be a definitive solution... any
info/ideas or otherwise on a way to fix this would be a great help.
Cheers
Andy
*
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] List Item Background Disappearing in IE
Title: List Item Background Disappearing in IE
I've googled and discovered that yeah it's a known bug, Im just wandering if anyone has any suggestions on how to remedy it?
DETAILS:
I have an unordered list using css to load/position a graphical bullet point.
ul li {background:transparent url("images/li_sprite.gif") no-repeat 0 0}
It works fine across the board until the text within the wraps.
At this point the bullet disappears in IE5 and up (and Opera).
Adding a colour to the background (let's say white #fff) certainly fixes the problem.
ul li {background:#fff url("images/li_sprite.gif") no-repeat 0 0}
But in this particular instance I can't use a background colour (hence transparent) and I've exhausted all my options. Im not alone in the world:
http://www.alistapart.com/discuss/taminglists/18/#c4087
But there just doesn't seem to be a definitive solution... any info/ideas or otherwise on a way to fix this would be a great help.
Cheers
Andy
RE: [WSG] Recommended Books
Kay wrote: > > Designing for Web Standards > I can't recommend Jeffrey Zeldman's "Designing for Web Standards" > enough. It's the absolute bees knees :) ditto, very good book, my copy is making the rounds at work, everybody is very positive. It has not made it into the hands of the one and only tables lives guy yet. also: "Web Design on a Shoestring" by Carrie Bickner, or how to rebuild the NY Public Library websites, with two people and no budget. > > CSS "More Eric Meyer on CSS" learnt more CSS reading this than anything in the past few months and Kay next time I go to a Port-80 meeting I bring it along. Usability "Defensive Design for the Web" as Andy says contingency design is not sexy, but this is a very readable book on the subject. (When "More Eric Meyer on CSS" getting heavy going on the bus on the way home I switch to this). Nick * 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] Mac testers please
Thanks Chris. Shane On Jun 22, 2004, at 6:44 PM, ckimedia wrote: http://www.webstandardsawards.com/tests/bigtext.php Twinsparc Tuesday April 6th, 2004 It's easy to forget that a powerful design doesn't have to be chock full o' graphics. Twinsparc lives up to their own credo of "Smart Design for Print and Web" by taking full advantage of web standards, simplicity and extensive use of white space. Worth noticing: the 800 pixel high center column forces a scrollbar to appear for all pages. This effectively stops the content from "jumping" horizontally and provides a "frames-like" experience where only the content appears to be refreshed when viewed in a browser that auto-hides the scrollbars. Smart. If you ever submitted a site to WSA you'd know that our own technique of forcing a vertical scrollbar is slightly more radical. :) Hi, The above is from the WSA, this is where I learned the technique, see the entry for Twinsparc. Reviewed by Johan Edlund :: Comments (6) On Tuesday, June 22, 2004, at 09:48 AM, Shane Helm wrote: Looks great in Safari. Nice clean design. Great work. The site is not centering in IE 5 on the map. You have about 200px of white space between site and right border/shadow. I'm interested to know CKIMEDIA is saying about forcing white space so that the site doesn't jump horizontal when a scrollbar is needed. I hat the jump. What's this mean? How do you fix it? Sonze On Jun 22, 2004, at 8:29 AM, ckimedia wrote: Hi, Works good in safari, you could force white space so the site does not jump horizontal when a scrollbar is needed. On Tuesday, June 22, 2004, at 02:14 AM, t94xr.net.nz webmaster wrote: Hi all, I was wondering if anyone could be so kind as to test my site using IE for Mac 5+ and Safari http://www.v2.shockmedia.com.au Thanks. Damn, forget the rest of the site - put her as the only thing on the page and you'll have everyone still agreeing its a great site. * 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 * * 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 * * 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] Mac testers please
http://www.webstandardsawards.com/tests/bigtext.php Twinsparc Tuesday April 6th, 2004 It's easy to forget that a powerful design doesn't have to be chock full o' graphics. Twinsparc lives up to their own credo of "Smart Design for Print and Web" by taking full advantage of web standards, simplicity and extensive use of white space. Worth noticing: the 800 pixel high center column forces a scrollbar to appear for all pages. This effectively stops the content from "jumping" horizontally and provides a "frames-like" experience where only the content appears to be refreshed when viewed in a browser that auto-hides the scrollbars. Smart. If you ever submitted a site to WSA you'd know that our own technique of forcing a vertical scrollbar is slightly more radical. :) Hi, The above is from the WSA, this is where I learned the technique, see the entry for Twinsparc. Reviewed by Johan Edlund :: Comments (6) On Tuesday, June 22, 2004, at 09:48 AM, Shane Helm wrote: Looks great in Safari. Nice clean design. Great work. The site is not centering in IE 5 on the map. You have about 200px of white space between site and right border/shadow. I'm interested to know CKIMEDIA is saying about forcing white space so that the site doesn't jump horizontal when a scrollbar is needed. I hat the jump. What's this mean? How do you fix it? Sonze On Jun 22, 2004, at 8:29 AM, ckimedia wrote: Hi, Works good in safari, you could force white space so the site does not jump horizontal when a scrollbar is needed. On Tuesday, June 22, 2004, at 02:14 AM, t94xr.net.nz webmaster wrote: Hi all, I was wondering if anyone could be so kind as to test my site using IE for Mac 5+ and Safari http://www.v2.shockmedia.com.au Thanks. Damn, forget the rest of the site - put her as the only thing on the page and you'll have everyone still agreeing its a great site. * 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 * * 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 *
[WSG] Accessibility in FLASH MX 2004
Hi, Before dashing the XHTML/CSS solution to my interface execution, how robust is the accessibility feature in MX 2004? The interface must be as 508 compliant as possible. Don't Crucify the Flash Guy, Chris * 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 looks fine when previewing in IE, but messy in IE online
Wow Hugh. It's great that you took the time to help me and grant me
encouragement. I greatly appreciate it.
This makes all the sense in the world. The one thing is I was confused
about was dl, dt, & dd. I found some info online to learn up on it.
I really can't thank you enough.
Shane Helm
On Jun 22, 2004, at 5:44 PM, Hugh Todd wrote:
Shane, you said,
Sorry. I am so new. I'm not sure what you mean by inheritance for
my elements. Are spans bad?
Your aim should be to create HTML that is clean and independent of
your particular style sheet. I say *aim*, because it's a difficult
goal to reach entirely.
This is where "inheritance" becomes your friend. By dividing your
pages into boxes with your divs, you are making it easier to target
specific elements without the need to rely on classes and spans.
So, for example, you may have five main boxes on your page. Each of
them is unique, so can be given an id (#). You know this already.
Now you can choose to make any or all of the elements *within* each id
behave either the same or differently from your master elements (if
you have them) - by which I mean any top-level styles you may have
applied to the body, h's, etc.
Thus you may set up your basic font parameters in the body like this:
body
{ background: #fff;
font-family: verdana, arial, sans-serif;
font-size: 76%;
color: #666;
line-height: 1.2em;
}
the p in your #main box like this:
#main p
{ font-size: 1.2em;
margin: 1em 1.5em 0 1.5em;
}
and the p in your right hand div like this:
#contactinfo p
{ font-size: 1em;
margin: 0;
}
(Note, these examples are illustrative only.)
In this way you sidestep the need to apply specific classes to
elements, which lock you in to ongoing maintenance and a reliance on
your particular stylesheet.
Looking at your code I saw that, in the right hand column, you had
applied a class to the contact name. To avoid this, (and because it
makes semantic sense) I suggested that you use a dl instead. The
contact name becomes the dt, and the address details become the dd. In
this way you are able to apply styles as I suggested, without the use
of special classes.
The only place where I could not work out a way to avoid applying a
span was with the qualification after your contact's name. But to do
that, better to put it into your main (external) stylesheet and give
it a semantic name, like ".qualification". This tells you what the
style *means* rather than what it does.
All the best! You're going well!
-Hugh Todd
PS A cheap PC with Win 2000 or WinXP on it sounds like a great idea.
Someone has put together a package that installs IE5, 5.5 & 6 on the
same machine -- an invaluable service. (Only works on the OSs I
mention.)
*
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] Site looks fine when previewing in IE, but messy in IE online
Shane, you said,
Sorry. I am so new. I'm not sure what you mean by inheritance for my
elements. Are spans bad?
Your aim should be to create HTML that is clean and independent of your
particular style sheet. I say *aim*, because it's a difficult goal to
reach entirely.
This is where "inheritance" becomes your friend. By dividing your pages
into boxes with your divs, you are making it easier to target specific
elements without the need to rely on classes and spans.
So, for example, you may have five main boxes on your page. Each of
them is unique, so can be given an id (#). You know this already.
Now you can choose to make any or all of the elements *within* each id
behave either the same or differently from your master elements (if you
have them) - by which I mean any top-level styles you may have applied
to the body, h's, etc.
Thus you may set up your basic font parameters in the body like this:
body
{ background: #fff;
font-family: verdana, arial, sans-serif;
font-size: 76%;
color: #666;
line-height: 1.2em;
}
the p in your #main box like this:
#main p
{ font-size: 1.2em;
margin: 1em 1.5em 0 1.5em;
}
and the p in your right hand div like this:
#contactinfo p
{ font-size: 1em;
margin: 0;
}
(Note, these examples are illustrative only.)
In this way you sidestep the need to apply specific classes to
elements, which lock you in to ongoing maintenance and a reliance on
your particular stylesheet.
Looking at your code I saw that, in the right hand column, you had
applied a class to the contact name. To avoid this, (and because it
makes semantic sense) I suggested that you use a dl instead. The
contact name becomes the dt, and the address details become the dd. In
this way you are able to apply styles as I suggested, without the use
of special classes.
The only place where I could not work out a way to avoid applying a
span was with the qualification after your contact's name. But to do
that, better to put it into your main (external) stylesheet and give it
a semantic name, like ".qualification". This tells you what the style
*means* rather than what it does.
All the best! You're going well!
-Hugh Todd
PS A cheap PC with Win 2000 or WinXP on it sounds like a great idea.
Someone has put together a package that installs IE5, 5.5 & 6 on the
same machine -- an invaluable service. (Only works on the OSs I
mention.)
*
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] Recommended Books
Hi all To not lose these examples in a thread somewhere I have set up a resource category on the website. As with code editors, please put your recommended books up on the site in the category "Offline resources (books, magazines etc)" We can then refer back to this listing if the topic comes up again. All members can login and edit that resource category. First taxi off the rank is Andy Budd's book listing at http://webstandardsgroup.org/resources/#cat31 - Andy, feel free to update the listing. Cheers James * 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] automated response
I will be out of the office from June 23rd through July 5th. If this is an emergency, please email the helpdesk at [EMAIL PROTECTED], otherwise I will reply to your email when I return. Thank you, Nancy Johnson * 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] small gap
Thank you very much... oh boy do I feel stupid :o)
Kim
- Original Message -
From: "Mordechai Peller" <[EMAIL PROTECTED]>
To: <[EMAIL PROTECTED]>
Sent: Tuesday, June 22, 2004 7:03 PM
Subject: Re: [WSG] small gap
> Kim Kruse wrote:
>
> > I'm sorry to ask this question but I've been looking at this page for
> > too long and I can't see why there is a small gap between the top nav
> > and the content.
>
> #menu #current a {padding-bottom:5px;}
>
> versus
>
> #menu a {padding-bottom:4px;}
>
> Change either to match the other and you should be fine.
> *
> 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] Recommended Books
Hey everyone! This is my first post in the list, although I´d read it a long time. I am from Germany so please be clemently with my English ;) Here is another book for usability: Don´t make me think! Steve Krug I like this very much. Greetings from "the other side of the world" ;) Ute * 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] definition lists
I'm not sure if this is what you need, but try these links: http://www.wpdfd.com/editorial/basics/cssbasics12.html http://www.wpdfd.com/editorial/basics/cssbasics5.html Good luck, Shane Helm \\ Sonze Design Studio On Jun 22, 2004, at 12:35 PM, Ted Drake wrote: I feel stupid. I put together this huge collections project that was built on the back of the mighty definition list. Now, a mere 3 months later, I can't even get a simple dl list to line up the dt and dd elements without throwing everything out of whack. I remember there was a great tutorial on using definition lists and included several variations to make them look like tables, lists, you name it. Does anyone know where that would be? Thanks Ted * 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] definition lists
http://css.maxdesign.com.au/index.htm -Original Message- From: [EMAIL PROTECTED] on behalf of Ted Drake Sent: Tue 6/22/2004 12:35 PM To: [EMAIL PROTECTED] Subject: [WSG] definition lists I feel stupid. I put together this huge collections project that was built on the back of the mighty definition list. Now, a mere 3 months later, I can't even get a simple dl list to line up the dt and dd elements without throwing everything out of whack. I remember there was a great tutorial on using definition lists and included several variations to make them look like tables, lists, you name it. Does anyone know where that would be? Thanks Ted * 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] definition lists
I feel stupid. I put together this huge collections project that was built on the back of the mighty definition list. Now, a mere 3 months later, I can't even get a simple dl list to line up the dt and dd elements without throwing everything out of whack. I remember there was a great tutorial on using definition lists and included several variations to make them look like tables, lists, you name it. Does anyone know where that would be? Thanks Ted * 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 looks fine when previewing in IE, but messy in IE online
Thanks Jeff. Shane Helm On Jun 22, 2004, at 12:49 AM, Jeff Davies wrote: Looks good in Firefox .9. In IE 6 the "For more information contact: " column appears bottom left rather than on the right Jeff At 07:36 22/06/2004, you wrote: Hello WSG! I have been using CSS for text styles for the last few months, but now I want to make my sites with divs and no tables! I began over the weekend learning the process and working on my first non-tables site. I have been overly excited about the process and everything was going fine until I uploaded my latest version to the web. It looks great in Safari (btw, I am a Mac user), but in IE5 it's all jumbled (why must we deal with such a crappy browser). I am very confused for a couple of reasons: First, I am obviously new to this form of web standard. Second, and most important, it looked fine in IE5 previewing it locally. So when I uploaded it and checked the page, well, I felt like Coldplay by having "a rush of blood to my head". I have validated my html code & css code. That's a plus. I have only tested thus far on a Mac with Safari and IE5. Here is a link to the html page: http://sonze.com/isl/temp/ Here is a link to the css page: http://sonze.com/isl/temp/css/int.css Please help if you have a moment. Thank you very much. Keep up the great work everyone! I'm ready to do my part to change the world. Shane Helm Sonze Design Studio * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help * web-arts: the art & craft of web design http://www.web-arts.biz * 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] Site looks fine when previewing in IE, but messy in IE online
Thanks Hugh. Thanks for saying it looks superb.
I guess I'm too dependent on the Flash cool factor. I have changes
somewhat. I steer clients away from total Flash sites. Especially
after the length of time it took me to make
http://www.johngrammatis.com/
So a good rule of thumb is use margins on text and images instead of
CSS boxes?
I haven't tested on PC. I need to by a cheap PC to test on.
So it looks fine in Mac IE 5.2.3. That's strange. I have IE 5.2,
didn't know there was a newer version. So I just downloaded it and
well it looks great. Your right. I guess though for accessibility, I
still need to correct the problem for IE 5.2. But now that I installed
IE 5.2.3 , I can't open IE 5.2 because it forces it 5.2.3 to open.
Frustrations man, frustrations... :)
Sorry. I am so new. I'm not sure what you mean by inheritance for my
elements. Are spans bad?
Thanks for your help. I'll add the new classes and hopefully that will
help.
Have a great day!
Shane Helm
On Jun 22, 2004, at 1:45 AM, Hugh Todd wrote:
Shane,
It looks fine in all of the Mac browsers I've tried it on... IE 5.2.3,
Opera 7.5, Firefox, Safari. Are you having problems with PC versions
of IE?
I notice from the CSS that you are not specifically using inheritance
for your elements. For example, in the right hand column you have used
spans to designate the font sizes.
A better way to handle your CSS, if you wish to give different
attributes to different elements, is to use their context to apply
them.
For example (in truncated form),
#right p
{ font-size: 0.9em;
margin: 0 0 1em 0;
}
#right dl
{ margin-top: 1em;
}
#right dt
{ font-size: 1.2em;
font-weight: bold;
}
#right dd
{ font-size: 0.9em;
margin: 0 0 0 0;
}
(Use the dt for the name, Jonny Totten, and dd for the address
details.)
Use a span named "qualifications" or something like that for the
smaller "CRS" type. (This gives it some semantic meaning.)
One benefit of doing things this way is that you can apply all of your
padding and margins to the type and image elements, which avoids some
of the nasty IE PC bugs.
http://www.positioniseverything.net/explorer.html
It looks superb. Your navigation, however, dependent as it is on
Flash, will not please those concerned with the accessibility of
websites. (That said, there seems to be no completely
cross-platform/browser way of achieving semantically correct cascading
navigation.)
-Hugh Todd
Here is a link to the html page:
http://sonze.com/isl/temp/
Here is a link to the css page:
http://sonze.com/isl/temp/css/int.css
*
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] small gap
I'm sorry to ask this question but I've been looking at this page for too long and I can't see why there is a small gap between the top nav and the content. I think it's due to the padding-bottom in the #current selector. Try to apply the padding to the links just once, then add current-specific stuff (like color:white) cheers, /Anton -- What your lacks, your compensates. * 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] small gap
Kim Kruse wrote:
I'm sorry to ask this question but I've been looking at this page for
too long and I can't see why there is a small gap between the top nav
and the content.
#menu #current a {padding-bottom:5px;}
versus
#menu a {padding-bottom:4px;}
Change either to match the other and you should be fine.
*
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] Mac testers please
Looks great in Safari. Nice clean design. Great work. The site is not centering in IE 5 on the map. You have about 200px of white space between site and right border/shadow. I'm interested to know CKIMEDIA is saying about forcing white space so that the site doesn't jump horizontal when a scrollbar is needed. I hat the jump. What's this mean? How do you fix it? Sonze On Jun 22, 2004, at 8:29 AM, ckimedia wrote: Hi, Works good in safari, you could force white space so the site does not jump horizontal when a scrollbar is needed. On Tuesday, June 22, 2004, at 02:14 AM, t94xr.net.nz webmaster wrote: Hi all, I was wondering if anyone could be so kind as to test my site using IE for Mac 5+ and Safari http://www.v2.shockmedia.com.au Thanks. Damn, forget the rest of the site - put her as the only thing on the page and you'll have everyone still agreeing its a great site. * 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 * * 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] small gap
Hi, I'm sorry to ask this question but I've been looking at this page for too long and I can't see why there is a small gap between the top nav and the content. The page is located here http://www.mouseriders.dk/index.htm I would really appreciate a pair of fresh eyes. Thank you Kim
Re: [WSG] Mac testers please
Hi, Works good in safari, you could force white space so the site does not jump horizontal when a scrollbar is needed. On Tuesday, June 22, 2004, at 02:14 AM, t94xr.net.nz webmaster wrote: Hi all, I was wondering if anyone could be so kind as to test my site using IE for Mac 5+ and Safari http://www.v2.shockmedia.com.au Thanks. Damn, forget the rest of the site - put her as the only thing on the page and you'll have everyone still agreeing its a great site. * 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] Mac testers please
> > Hi all, > > > > I was wondering if anyone could be so kind as to test my site using IE > > for > > Mac 5+ and Safari > > > > http://www.v2.shockmedia.com.au > > > > Thanks. Damn, forget the rest of the site - put her as the only thing on the page and you'll have everyone still agreeing its a great site. * 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] Recommended Books
HTML & XHTML - The Definitive Guide 5th Edition (O'Reilly-2002) O'Reilly Cascading Style Sheets The Definitive Guide New Riders - Speed Up Your Site- 1st Ed 2003 [CHM] Website Analysis & Reporting Generally anything & I mean ANYTHING of Eric Meyers Camz * 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] Recommended Books
"Speed Up Your Site: Web Site Optimization" is a must, $ for $ it has been the most useful reference book i have purchased. http://www.amazon.com/exec/obidos/ASIN/0735713243/ref%3Dnosim/websiteoptimi-20/103-4423944-0927841 -- Neerav Bhatt http://www.bhatt.id.au Web Development & IT consultancy Mobile: +61 (0)403 8000 27 http://www.bookcrossing.com/mybookshelf/neerav Jamie Mason wrote: Hey all, The Head of Design here is ordering in some books soon for the designer's reference, I was wondering whether anyone has any recommended books on; CSS Designing for Web Standards Accessibility Usability HCI (A study on how people interact with computers) And ideally, some kind of book on advice on implementing the above across a very large business involving teams seperate design, development and editorial teams. Thanks in advance, ** ** *Jamie Mason* * 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] Recommended Books
> Designing for Web Standards I can't recommend Jeffrey Zeldman's "Designing for Web Standards" enough. It's the absolute bees knees :) > CSS Eric Meyer's books are great - "Eric Meyer on CSS". I think the next one is called "More Eric Meyer on CSS" but I don't have it yet. > Accessibility I've heard good things about Joe Clarke's book, not sure of the name. I've been planning to get it. Can't help you with the others, sorry. K. -- Kay Smoljak http://kay.smoljak.com * 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] :focus not applying to all elements in form
Thanks Patrick
Specificity was the problem, and i grabbed your Javascript to make it
work in IE as well :-)
Is there a name for what your javascript does, someone was trying to
explain applications of the DOM to me the other day, would this be an
example of that?
--
Neerav Bhatt
http://www.bhatt.id.au
Web Development & IT consultancy
Mobile: +61 (0)403 8000 27
http://www.bookcrossing.com/mybookshelf/neerav
Patrick Griffiths wrote:
Neerav wrote:
problem where the change in background-color on focus works on all but
one element ( #full_name ) in Firefox & Opera.
#contactus #full_name, #email_address, #referral,
#phonenumber_website,
#inquiry
{
background-color: #0099ff;
color: #00;
}
It's to do with specificity ("#contactus #fullname" beats "#contactus
input:focus" in a fight). Just pull out "#contactus" from the above
rule.
And, on a side note, if you want :focus to work in IE, try this:
http://htmldog.com/articles/suckerfish/focus/
Patrick
Patrick Griffiths (PTG)
http://www.htmldog.com/ptg/
http://www.htmldog.com
- Original Message -
From: "Neerav" <[EMAIL PROTECTED]>
To: "WSG" <[EMAIL PROTECTED]>
Sent: Tuesday, June 22, 2004 9:15 AM
Subject: [WSG] :focus not applying to all elements in form
Hi
I've been experimenting with :focus on form elements (input &
textarea)
at http://www.bhatt.id.au/contactus.php , but have struck a strange
problem where the change in background-color on focus works on all but
one element ( #full_name ) in Firefox & Opera.
Of course in IE theres no difference either way as it doesnt support
:focus but thats another matter
The relevent css is below, the html can be seen by viewing the source
of
http://www.bhatt.id.au/contactus.php
#contactus #full_name, #email_address, #referral,
#phonenumber_website,
#inquiry
{
background-color: #0099ff;
color: #00;
}
#contactus input:focus
{
background-color: #ff;
}
#contactus textarea:focus
{
background-color: #ff;
}
I have validated the XHTML and CSS code and it is fine so im
scratching
my head over this one...
--
Neerav Bhatt
*
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] Tim Berners-Lee - Keeping Web Universal
> From: Stephanie [...] > In > fact, if you disable javascript and then go to the article, you can't > even see the first page. I was just working on something else at the time, and had javascript disabled...and that's what happened when I followed the link to the article. Confused the hell out of me, until I realised my (? debatable!) mistake. Anyway, sorry for steering this thread off course ;) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk * 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] Recommended Books
Here are my book recommendations. http://www.andybudd.com/books/ Jamie Mason wrote: Hey all, The Head of Design here is ordering in some books soon for the designer's reference, I was wondering whether anyone has any recommended books on; CSS Designing for Web Standards Accessibility Usability HCI (A study on how people interact with computers) And ideally, some kind of book on advice on implementing the above across a very large business involving teams seperate design, development and editorial teams. Andy Budd * 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] Mac testers please
On 6/22/04 1:52 AM "Andy Budd" <[EMAIL PROTECTED]> sent this out: >> I was wondering if anyone could be so kind as to test my site using IE >> for >> Mac 5+ and Safari >> >> http://www.v2.shockmedia.com.au I see no flaws in my Safari. That is impressive site. Rick Faaberg * 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] Recommended Books
Title: Message Hey all, The Head of Design here is ordering in some books soon for the designer's reference, I was wondering whether anyone has any recommended books on; CSS Designing for Web Standards Accessibility Usability HCI (A study on how people interact with computers) And ideally, some kind of book on advice on implementing the above across a very large business involving teams seperate design, development and editorial teams. Thanks in advance, Jamie Mason
Re: [WSG] Mac testers please
Very slick. Nice Marc Greenstock wrote: Hi all, I was wondering if anyone could be so kind as to test my site using IE for Mac 5+ and Safari http://www.v2.shockmedia.com.au Thanks. Andy Budd http://www.message.uk.com/ * 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] :focus not applying to all elements in form
Neerav wrote:
> problem where the change in background-color on focus works on all but
> one element ( #full_name ) in Firefox & Opera.
> #contactus #full_name, #email_address, #referral,
#phonenumber_website,
> #inquiry
> {
>background-color: #0099ff;
>color: #00;
> }
It's to do with specificity ("#contactus #fullname" beats "#contactus
input:focus" in a fight). Just pull out "#contactus" from the above
rule.
And, on a side note, if you want :focus to work in IE, try this:
http://htmldog.com/articles/suckerfish/focus/
Patrick
Patrick Griffiths (PTG)
http://www.htmldog.com/ptg/
http://www.htmldog.com
- Original Message -
From: "Neerav" <[EMAIL PROTECTED]>
To: "WSG" <[EMAIL PROTECTED]>
Sent: Tuesday, June 22, 2004 9:15 AM
Subject: [WSG] :focus not applying to all elements in form
> Hi
>
> I've been experimenting with :focus on form elements (input &
textarea)
> at http://www.bhatt.id.au/contactus.php , but have struck a strange
> problem where the change in background-color on focus works on all but
> one element ( #full_name ) in Firefox & Opera.
>
> Of course in IE theres no difference either way as it doesnt support
> :focus but thats another matter
>
> The relevent css is below, the html can be seen by viewing the source
of
> http://www.bhatt.id.au/contactus.php
>
> #contactus #full_name, #email_address, #referral,
#phonenumber_website,
> #inquiry
> {
>background-color: #0099ff;
>color: #00;
> }
>
> #contactus input:focus
> {
>background-color: #ff;
> }
>
> #contactus textarea:focus
> {
>background-color: #ff;
> }
>
> I have validated the XHTML and CSS code and it is fine so im
scratching
> my head over this one...
>
> --
> Neerav Bhatt
> http://www.bhatt.id.au
> Web Development & IT consultancy
> Mobile: +61 (0)403 8000 27
>
> http://www.bookcrossing.com/mybookshelf/neerav
> *
> 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
*
[WSG] :focus not applying to all elements in form
Hi
I've been experimenting with :focus on form elements (input & textarea)
at http://www.bhatt.id.au/contactus.php , but have struck a strange
problem where the change in background-color on focus works on all but
one element ( #full_name ) in Firefox & Opera.
Of course in IE theres no difference either way as it doesnt support
:focus but thats another matter
The relevent css is below, the html can be seen by viewing the source of
http://www.bhatt.id.au/contactus.php
#contactus #full_name, #email_address, #referral, #phonenumber_website,
#inquiry
{
background-color: #0099ff;
color: #00;
}
#contactus input:focus
{
background-color: #ff;
}
#contactus textarea:focus
{
background-color: #ff;
}
I have validated the XHTML and CSS code and it is fine so im scratching
my head over this one...
--
Neerav Bhatt
http://www.bhatt.id.au
Web Development & IT consultancy
Mobile: +61 (0)403 8000 27
http://www.bookcrossing.com/mybookshelf/neerav
*
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 looks fine when previewing in IE, but messy in IE online
Shane,
It looks fine in all of the Mac browsers I've tried it on... IE 5.2.3,
Opera 7.5, Firefox, Safari. Are you having problems with PC versions of
IE?
I notice from the CSS that you are not specifically using inheritance
for your elements. For example, in the right hand column you have used
spans to designate the font sizes.
A better way to handle your CSS, if you wish to give different
attributes to different elements, is to use their context to apply
them.
For example (in truncated form),
#right p
{ font-size: 0.9em;
margin: 0 0 1em 0;
}
#right dl
{ margin-top: 1em;
}
#right dt
{ font-size: 1.2em;
font-weight: bold;
}
#right dd
{ font-size: 0.9em;
margin: 0 0 0 0;
}
(Use the dt for the name, Jonny Totten, and dd for the address details.)
Use a span named "qualifications" or something like that for the
smaller "CRS" type. (This gives it some semantic meaning.)
One benefit of doing things this way is that you can apply all of your
padding and margins to the type and image elements, which avoids some
of the nasty IE PC bugs.
http://www.positioniseverything.net/explorer.html
It looks superb. Your navigation, however, dependent as it is on Flash,
will not please those concerned with the accessibility of websites.
(That said, there seems to be no completely cross-platform/browser way
of achieving semantically correct cascading navigation.)
-Hugh Todd
Here is a link to the html page:
http://sonze.com/isl/temp/
Here is a link to the css page:
http://sonze.com/isl/temp/css/int.css
*
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 looks fine when previewing in IE, but messy in IE online
Looks good in Firefox .9. In IE 6 the "For more information contact: " column appears bottom left rather than on the right Jeff At 07:36 22/06/2004, you wrote: Hello WSG! I have been using CSS for text styles for the last few months, but now I want to make my sites with divs and no tables! I began over the weekend learning the process and working on my first non-tables site. I have been overly excited about the process and everything was going fine until I uploaded my latest version to the web. It looks great in Safari (btw, I am a Mac user), but in IE5 it's all jumbled (why must we deal with such a crappy browser). I am very confused for a couple of reasons: First, I am obviously new to this form of web standard. Second, and most important, it looked fine in IE5 previewing it locally. So when I uploaded it and checked the page, well, I felt like Coldplay by having "a rush of blood to my head". I have validated my html code & css code. That's a plus. I have only tested thus far on a Mac with Safari and IE5. Here is a link to the html page: http://sonze.com/isl/temp/ Here is a link to the css page: http://sonze.com/isl/temp/css/int.css Please help if you have a moment. Thank you very much. Keep up the great work everyone! I'm ready to do my part to change the world. Shane Helm Sonze Design Studio * The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help * web-arts: the art & craft of web design http://www.web-arts.biz * 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 *
