RE: [WSG] IE img border padding error

[Sarah Peeke (XERT)]

Hi Bert

Thanks for the suggestions.

 
 I'm not quite a CSS expert, but I'm not sure that images, being replaced
 elements can officially have padding, since padding goes inside the
 element
 

I am following, to some degree, Russ' tutorial:
http://css.maxdesign.com.au/floatutorial/tutorial0208.htm

So it is possible to style an image to have padding and a border.

Just not sure why my version isn't working in IE Win.

Any other thoughts welcome.

Thanks
Sarah :)

-- 
XERT Communications
email: [EMAIL PROTECTED]
office: +61 2 4782 3104
mobile: 0438 017 416

http://www.xert.com.au/   web development : digital imaging : dvd production
**
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] accessible image form buttons

[Kornel Lesinski]

Hmmm... I have tried to hide the border of an input field in Opera, but
it flatly refused:
input{border:0;}
This is Opera 7.23
oh, that bug. Fixed in 7.50 or 7.60...
For Opera 7.2 use:
input {border: 0 solid;}
--
regards, Kornel Lesiski
**
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 img border padding error

[Bert Doorn]

G'day

 I am following, to some degree, Russ' tutorial: 
 http://css.maxdesign.com.au/floatutorial/tutorial0208.htm
 So it is possible to style an image to have padding and a border.

I don't see image padding mentioned, at least not on that page.   

 Just not sure why my version isn't working in IE Win.

Could be that IE doesn't support it padding on images.   See below.  These
issues may have been fixed in later versions of MSIE and Opera but why not
try padding the container instead?  Should work in almost anything  

*According to
http://www.blooberry.com/indexdot/css/properties/padding/padding.htm :

MSIE4+: Padding properties do not apply to images 

NS4:Applying padding values to a replaced object
 (my test was an IMG element) really messes with 
document content flow

Opera 3.5:  Padding is not applied to replaced items (IMG, 
form field widgets, etc.) 

Regards
--
Bert Doorn, Web Developer
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] Another amazing css zen garden entry

[john]

OMG...I'm not worthy.
~john
_
Dr. Zeus Web Development
http://www.DrZeus.net
content without clutter

on 12/17/2004 5:44 AM Leslie Riggs said the following:
Now THIS is what makes designing with CSS fun!!  I just love this.
Leslie Riggs
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
ean.css
Make sure you look in a good browser and scroll down!
Russ
 

**
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] IE img border padding error

[Sarah Peeke (XERT)]

Hi again

  I am following, to some degree, Russ' tutorial: 
  http://css.maxdesign.com.au/floatutorial/tutorial0208.htm
  So it is possible to style an image to have padding and a border.
 
 I don't see image padding mentioned, at least not on that page.

The CSS code on Russ' tutorial highlights the padding as per below:

 .floatright
{
float: right;
width: 102px;
margin: 0 0 10px 10px;
background-color: #ddd;
padding: 10px;  /* This line uses the padding */
border: 1px solid #666;
}

 Could be that IE doesn't support it padding on images.

I have used Russ' technique here: http://www.xert.org/ and it works well in 
IE Win.

Still a mystery to me why it won't work here:

http://www.xert.com.au/workshop/pbyron628/


Thanks
Sarah
-- 
XERT Communications
email: [EMAIL PROTECTED]
office: +61 2 4782 3104
mobile: 0438 017 416

http://www.xert.com.au/   web development : digital imaging : dvd production
**
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 review plz - Thank you.

[Jacobus van Niekerk]

 The url: http://www.azapi.com/

Just a quick thank you to all that gave comments and suggestions!

Kind Regards
Jacobus van Niekerk


-- 
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.296 / Virus Database: 265.5.4 - Release Date: 2004/12/15
 

**
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 img border padding error

[Bert Doorn]

G'day again.

 The CSS code on Russ' tutorial highlights the padding as per below:
  .floatright
 {
...snip...
 padding: 10px;  /* This line uses the padding */
 border: 1px solid #666;
 }

As I've been saying, that's the container, not the image:

div class=floatrightimg ...  brCaption here/div

..not...

divimg class=floatright .../div

 I have used Russ' technique here: http://www.xert.org/ and it works 
 well in IE Win. Still a mystery to me why it won't work here:
 http://www.xert.com.au/workshop/pbyron628/

Seems an overly complex and totally different setup to me (background
images, lots of spans and classes, no img element with padding).

Anyway, it's up to you what you do :-)

Regards
--
Bert Doorn, Web Developer
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] Nav bar rounding error problem

[Andy Budd]

Hi Folks,
I'm creating a simple vertical nav bar using a styled list. Should be 
pretty easy as it's something I've done a hundred times. However this 
time I've run into problems with browser rounding errors.

I've come up with another way of doing it, but it's not as elegant as 
the initial version. I've posted up an explanation with a couple of 
test cases and I'd be grateful if the CSS geniuses on the list could 
have a look and suggest a better way of achieving the desired results.

http://www.message.uk.com/test/nav/
As always your help in much appreciated.
p.s. I have to come clean and admit I've also cross posted this to 
css-discuss. Hope nobody minds.

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] Nav bar rounding error problem

[Philippe Wittenbergh]

On 17 Dec 2004, at 8:45 pm, Andy Budd wrote:
Hi Folks,
I'm creating a simple vertical nav bar using a styled list. Should be 
pretty easy as it's something I've done a hundred times. However this 
time I've run into problems with browser rounding errors.

http://www.message.uk.com/test/nav/
#firstAttempt ul#mainNav li a {
/* rest of styles */
line-height:normal /* - this fixes it in Mozilla */
}
Use padding (in px) to create the height of the line box.
http://dev.l-c-n.com/Gecko/moz_spacing.php
for some background.
Philippe
---/---
Philippe Wittenbergh
now live : http://emps.l-c-n.com/
code | design | web projects : http://www.l-c-n.com/
IE5 Mac bugs and oddities : http://www.l-c-n.com/IE5tests/
**
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] Netscape 4 - let it die

[RMW Web Publishing]

Talking about NN4, it seems that the updated OptusNet Helpdesk (for those
O/S - Optus is .au's 2nd largest Telco) has started (not fully - still some
layout tables) to move to Web Standards and not bothered with NN4 prettiness
(the header fails). But the site seems to be doing something a little-funky
to get the nav accessible. Seems without the 'nav_ns4.css' in the header the
links are not useable. There gonna have fun with that front page.

http://www.optusnet.com.au/help/dsl/homepage


- Original Message -
From: Kornel Lesinski [EMAIL PROTECTED]
To: [EMAIL PROTECTED]
Sent: Friday, December 10, 2004 1:19 PM
Subject: [WSG] Netscape 4 - let it die



 Why do you let 8-year-old browser to stop you from making good pages?

 I agree that webpages should be accessible to all - they should work
 without CSS and JavaScript.



**
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] Another amazing css zen garden entry

[Christie Mason]

In my Firefox .9.3, both sites only show text and some colored backgrounds.  I 
had to view them in IE to see the wow factors.

Christie Mason

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of David Laakso
Sent: Friday, December 17, 2004 1:51 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Another amazing css zen garden entry


On Fri, 17 Dec 2004 15:36:18 +1100, russ - maxdesign  
[EMAIL PROTECTED] wrote:

 http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
 ean.css

 Make sure you look in a good browser and scroll down!
 Russ

Thanks Russ, but as for myself, I believe I like the unpretentious
http://www.csszengarden.com/?cssfile=http://lyuanqing.freeprohost.com/verdure/css.css
by his young man:

Name: Lim Yuan Qing
**

**
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] Another amazing css zen garden entry

[Rimantas Liubertas]

On Fri, 17 Dec 2004 07:27:16 -0600, Christie Mason
[EMAIL PROTECTED] wrote:
 In my Firefox .9.3, both sites only show text and some colored backgrounds.  
 I had to view them in IE to see the wow factors.
 
 Christie Mason

I am absoultely sure you did not see real wow factors with IE - for
the very simple reason -
lack of PNG opacity support in IE.

I guess many did not use correct url:

http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css

URL must end with zenocean.css.

Regards,
Rimantas
**
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] Netscape 4 - let it die

[David R]

Kornel Lesinski wrote:
Why do you let 8-year-old browser to stop you from making good pages?
I agree that webpages should be accessible to all - they should work
without CSS and JavaScript.
I don't :)
I just use the @import; rule to prevent NN4 from loading the 
stylesheets, and a bit of server-side trickery to display a message for 
NN4 users, urging them to upgrade (or when thats not possible... just a 
simple div (with display: none; specified in the style-sheets) with 
the upgrade message inside it)

HTH
-David R
**
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 review plz - Thank you.

[Peter Tilbrook]

Very nice! Nice colour scheme also.

And Azapi sounds like a great product also.

One feature I particularly like is the ability to easily resize the screen
font size. As it nears dawn (about 12:30am now) and your eyesight starts
fading that is a really nice touch.

I tried it with FireFox 1.0 under WinXP HE SP2 and it works really well.

I'm off to start writing a major e-commerce site and yours is great
inspiration!

Peter Tilbrook
ColdGen Internet Solutions
Manager, ACT and Region ColdFusion Users Group
4/73 Tharwa Road
Queanbeyan, NSW, 2620
AUSTRALIA

 WWW 1: http://www.coldgen.com/
 WWW 2: http://www.actcfug.com/
Telephone: +61-2-6284-2727
   Mobile: +61-0439-401-823
   E-mail: [EMAIL PROTECTED]



All of my external emails are scanned for viruses using the latest
available Norton AV signatures. Also I do NOT maintain an Address book or
Contact list to minimise the risk of infecting recipients of my messages for
viruses. I also prefer plain text emails for speed and efficiency.

Powered by Lookout:

Lookout is lightning-fast search for your email, files, and desktop works
with Microsoft Outlook.

http://www.lookoutsoft.com/Lookout/


 

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Jacobus van Niekerk 
Sent: Friday, 17 December 2004 9:34 PM
To: [EMAIL PROTECTED]
Subject: RE: [WSG] Site review plz - Thank you.

 The url: http://www.azapi.com/

Just a quick thank you to all that gave comments and suggestions!

Kind Regards
Jacobus van Niekerk


--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.296 / Virus Database: 265.5.4 - Release Date: 2004/12/15
 

**
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] IE img border padding error

[Charlie Barr]

Just have time for a quick glance, but I think it looks nice, it 
validates, and it doesn't have unintelligible markup so my screen reader 
 doesn't struggle with it.  Just to make sure, you're not going to keep 
the Heading Two, Heading Three, etc. right?  Because in my screen 
reader it says Heading Two Heading Two and Heading Two Heading 
Three, respectively.  Otherwise I think it's good!

Charlie
Sarah Peeke (XERT) has created a disturbance in the Force.
I felt its presence on 12/17/2004 2:41 AM.
Its substance was as follows:
Hi all
Was wondering if someone has some time to check out this *in progress* page I'm 
working on:
http://www.xert.com.au/workshop/pbyron628/
I have validated the XHTML and CSS and it appears to be OK on Firefox, Safari, 
NS 7.0, Opera 7.5, IE
Mac 5.2.3, but NOT in IE Win 6.
The problem is that the 5px padding around the images does not show in IE Win 
6.0. Not sure how it
looks in IE Win 5.5.
Any ideas etc greatly appreciated.
**
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 Holy Grail ... CSS Liquid Three-Column Layout

[Paul Connolley]

On 17 Dec 2004, at 03:29, Hugh Todd wrote:
Anyone come up with, or implemented, a 3-column layout of this sort in 
which the left and right columns also stretch as a percentage of the 
page width?
I refer you to Zoe Gillenwater 
(http://www.communitymx.com/content/article.cfm?page=1cid=AFC58). I am 
surprised that she hasn't made comment.

--
Paul Connolley
SQL/Systems Programmer
Egocentric - http://egocentric.co.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] Another amazing css zen garden entry

[Charlie Barr]

The diver doesn't show up in my version of IE6.  I'm thinking that's by 
design.

Rimantas Liubertas has created a disturbance in the Force.
I felt its presence on 12/17/2004 8:44 AM.
Its substance was as follows:
On Fri, 17 Dec 2004 07:27:16 -0600, Christie Mason
[EMAIL PROTECTED] wrote:
In my Firefox .9.3, both sites only show text and some colored backgrounds.  I 
had to view them in IE to see the wow factors.
Christie Mason

I am absoultely sure you did not see real wow factors with IE - for
the very simple reason -
lack of PNG opacity support in IE.
I guess many did not use correct url:
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css
URL must end with zenocean.css.
Regards,
Rimantas
**
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] Another amazing css zen garden entry

[Christie Mason]

Yes, I did use the correct URL, you may want to use something like Tiny URL
for future links.  I may have missed some  opacity in IE but I didn't really
feel like I missed anything, the page was still very wow.  Unfortunately,
I'm not fond of wow.

Christie Mason

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Rimantas Liubertas
Sent: Friday, December 17, 2004 7:44 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Another amazing css zen garden entry


On Fri, 17 Dec 2004 07:27:16 -0600, Christie Mason
[EMAIL PROTECTED] wrote:
 In my Firefox .9.3, both sites only show text and some colored
backgrounds.  I had to view them in IE to see the wow factors.

 Christie Mason

I am absoultely sure you did not see real wow factors with IE - for
the very simple reason -
lack of PNG opacity support in IE.

I guess many did not use correct url:

http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
ean.css

URL must end with zenocean.css.

Regards,
Rimantas
**
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] The Holy Grail ... CSS Liquid Three-Column Layout

[bgilbertnc]

what if you want one of the columns to have a border around it, say the right column. How can this be done?

Bruce Gilbert
webmaster
DPS-Original Message- From: Mani Sheriar <[EMAIL PROTECTED]>Sent: Dec 16, 2004 6:06 PM To: [EMAIL PROTECTED] Subject: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout 
 
  
 

 
  Clean
  Clean
  DocumentEmail
  
  
   
   
   
   
  
  MicrosoftInternetExplorer4
 






Hi Everyone!

This is my first post to this group after reading it for a while. I must say, I’m kinda scared to post to you guys! However, I really need your help.

I think I may have found the Holy Grail … that 3-column css liquid layout that allows for different colors and/or backgrounds for the body, the header, the footer, and the three columns NO MATTER WHICH COLUMN IS LONGEST.

What I need help with is this: I have checked this out on Mozilla, FireFox, Netscape, and IE all on the pc. Can anyone who is interested please check it out on some other browsers/platforms?

Also, I read the usual css blogs as much as I have time for, but I’m not sure if someone else (or even several people) have already beaten me to the punch here. If not, I would take the time to write something up about it.

Here’s the link: http://www.ManiSheriar.com/holygrail

By the way, I know that the code for the content comes after the code for the sidebars, but for accessibility concerns I could just put a “skip to content” link at the top, no?

Anyway – thanks for any feedback, and please be gentle with me. ;~)

Mani (like Bonnie)

Mani Sheriar
Sheriar Designs | www.ManiSheriar.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] Another amazing css zen garden entry

[Tom Livingston]

I'm getting weird things in Safari 1.2.3 OS X.3.5. Safari either shows 
no flashlight turning on *or* the bg to the diver is a tall column, 
almost the reverse of the ocean gradient, and the flashlight works. FF 
1.0 Mac works great.

Anyone else??
Tom Livingston
Senior Multimedia Artist
mlinc.com

russ - maxdesign wrote:
http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
ean.css
Make sure you look in a good browser and scroll down!
Russ
**
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] [OT] Link wrapping [was: Another amazing css zen garden entry]

[Felix Miata]

Christie Mason wrote:
 
 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
 
 On Fri, 17 Dec 2004 07:27:16 -0600, Christie Mason [EMAIL PROTECTED] wrote:

  In my Firefox .9.3, both sites only show text and some colored
 backgrounds.  I had to view them in IE to see the wow factors.
 
 I am absoultely sure you did not see real wow factors with IE - for
 the very simple reason -
 lack of PNG opacity support in IE.
 
 I guess many did not use correct url:
 
 http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
 ean.css
 
 URL must end with zenocean.css.

 Yes, I did use the correct URL, you may want to use something like Tiny URL
 for future links.  I may have missed some  opacity in IE but I didn't really
 feel like I missed anything, the page was still very wow.  Unfortunately,
 I'm not fond of wow.

Tinyurl really isn't necessary if all you want to do is prevent line
wrap breaking it in pieces. Just prepend a quote char to the link thus:

 http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css
-- 
I am the way, and the truth, and the life. No one comes to the
Father except through me.John 14:6 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://members.ij.net/mrmazda/auth/


**
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 Holy Grail ... CSS Liquid Three-Column Layout

[Mani Sheriar]

what if you want one of the columns to have a border around it, say the
right column. How can this be done?

If you want one of the columns to have a border, then you just apply the
border property to the column and your 200x1 pixel gif can have that
border on it as well.  Should work fine.

One of the main reasons that I struggled to create this layout is so
that you could have different colors for the background, header, footer,
and all three columns (none of the colors are shining through from
underlying elements).  This can be extended to different backgrounds as
well ... which is the REAL reason that I worked on this design.  If you
wanted some sort of fancy background for the side columns (or any
element) then you would just apply that background to the column and the
wrapper div.

IE 5.2 OS X (Mac): extra padding added to the width of the left and
right columns
Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif
(could be a known CSS bug related to IE implementation of box
model-padding and border added to width)
See: http://tantek.com/CSS/Examples/boxmodelhack.html

Call for help:

Does anyone have any ideas about this problem in IE 5.2 OS X
(screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have
already implemented the box model hack, so I'm not sure what the issue
could be.

 Anyone come up with, or implemented, a 3-column layout of this sort in
which the left and right columns also stretch as a percentage of the
page width?

I haven't tried it yet, but one theory is to make the background
repeater very long (horizontally), and set it to repeat-y, but set its
x-axis start position as a percentage. I haven't tried it yet, but one
theory is to make the background repeater very long (horizontally), and
set it to repeat-y, but set its x-axis start position as a percentage.

I actually started working on an all-liquid layout at first. I ended up
going to a single-column liquid layout just because this would work
better for a project I'm about to embark on.  What you suggest is
exactly how I planned to try to implement the backgrounds (I didn't get
that far yet, though). However, I might try to follow up on the
all-liquid layout just to see if it can be done.  If I get to it and get
it to work, I'll post it here.


Quick Note:

Dejan - Wow ... THANK YOU for your help.  I'm sure those screen shots
will be very helpful and I really appreciate your time.

Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925|914.0741
 
 



**
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] Semantic Mark-Up for Product Catalog

[Chris Kennon]

Hi,
Creating a product catalog/blog for client. It will serve as a site for 
posting used construction equipment. In the following name/value 
listing what would be the most semantic mark-up.


Product Name:
Product Number:
Product Description:
Product Cost:

CK
__
Knowing is not enough, you must apply;
willing is not enough, you must do.
---Bruce Lee
**
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] Another amazing css zen garden entry

[Francesco]

On Fri, 17 Dec 2004 09:41:12 -0600, Christie Mason
[EMAIL PROTECTED] said:
 Yes, I did use the correct URL, you may want to use something like Tiny
 URL for future links.



URL123 (http://url123.com) is really handy for posting long URLs in
email.  It even allows you to save links you've shared, edit them, etc. 
It's a great free service.  Hope that helps.

Francesco
**
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] Semantic Mark-Up for Product Catalog

[Kornel Lesinski]

On Fri, 17 Dec 2004 11:46:20 -0500, Michael Wilson [EMAIL PROTECTED]  
wrote:

Chris Kennon wrote:
In the following name/value listing what would be the most semantic  
mark-up.

Product Name:
 Product Number:
  Product Description:
  Product Cost:
I'd probably use a definition list:
dl
   dtMy Product/dt
   ddProduct Number: 123456/dd
   dd
 pProduct Description:/p
 pThis is my product... Ain't it perty?/p
   /dd
   ddMSRP: $1 Bazillion (will trade for 4x4 in good condition)/dd
/dl
How about a table? They're not always evil...
table summary=pretty bazillion product
captionMy Product/caption
tbody
trthProduct Number/thtd12334/td/tr
trthProduct Description/thtdpretty/td/tr
trthProduct Cost/thtdbazillion/td/tr
/tbody
/table
..and Lynx WILL render that table! :D
--
regards, Kornel Lesiski
**
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] Another amazing css zen garden entry

[Vaska . WSG]

It's not beautiful if you zoom your text.
**
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] Semantic Mark-Up for Product Catalog

[Chris Kennon]

Hi,
Both are viable solutions, would the dl be more scalable for floating 
an image with caption beside it. With the table you mentioned Lynx 
support, does Lynx choke on dl?

C
On Friday, December 17, 2004, at 09:09 AM, Kornel Lesinski wrote:
On Fri, 17 Dec 2004 11:46:20 -0500, Michael Wilson 
[EMAIL PROTECTED] wrote:

Chris Kennon wrote:
In the following name/value listing what would be the most semantic 
mark-up.

Product Name:
 Product Number:
  Product Description:
  Product Cost:
I'd probably use a definition list:
dl
   dtMy Product/dt
   ddProduct Number: 123456/dd
   dd
 pProduct Description:/p
 pThis is my product... Ain't it perty?/p
   /dd
   ddMSRP: $1 Bazillion (will trade for 4x4 in good condition)/dd
/dl
How about a table? They're not always evil...
table summary=pretty bazillion product
captionMy Product/caption
tbody
trthProduct Number/thtd12334/td/tr
trthProduct Description/thtdpretty/td/tr
trthProduct Cost/thtdbazillion/td/tr
/tbody
/table
..and Lynx WILL render that table! :D
--
regards, Kornel Lesiski
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**

CK
__
Knowing is not enough, you must apply;
willing is not enough, you must do.
---Bruce Lee
**
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] Another amazing css zen garden entry

[Helmut Granda]

Everything has a weakness

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Vaska.WSG
Sent: Friday, December 17, 2004 11:12 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Another amazing css zen garden entry

It's not beautiful if you zoom your text.

**
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] Another amazing css zen garden entry

[Brian Cummiskey]

Todd Baker wrote:
hang on a sec.. Ill just pick my jaw up of the ground
Thats amazing.
those bubbles own :)
seriously, awesome job.
But, its not balanced at all.  Until i got to the bottom i was like ok, 
what's the big deal?.  Perhaps thats a feat in and of itself...



http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
ean.css
Make sure you look in a good browser and scroll down!

**
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] Another amazing css zen garden entry

[Mathias Bynens]

That so rocks. Too bad it won't get listed on there, because it causes
IE problems.


On Fri, 17 Dec 2004 13:01:30 -0500, Brian Cummiskey [EMAIL PROTECTED] wrote:
 Todd Baker wrote:
  hang on a sec.. Ill just pick my jaw up of the ground
 
  Thats amazing.
 
 
 those bubbles own :)
 
 seriously, awesome job.
 
 But, its not balanced at all.  Until i got to the bottom i was like ok,
 what's the big deal?.  Perhaps thats a feat in and of itself...
 
 
 http://www.csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenoc
 ean.css
 
 Make sure you look in a good browser and scroll down!
 
 **
 The discussion list for  http://webstandardsgroup.org/
 
  See http://webstandardsgroup.org/mail/guidelines.cfm
  for some hints on posting to the list  getting help
 **
 
 


-- 
Mathias Bynens aka MaThIbUs
http://mathibus.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] The Holy Grail ... CSS Liquid Three-Column Layout

[bgilbertnc]

I was able to achieve the border on my right column with adding a border to by 
bgimage, thanks Mani. One problem I am having though. I have a header image 
that is exactly 800px, so I want my whole page to be no more than 800px wide. I 
have set my #wrapper to 800px. In IE my right column overlaps the header to the 
right a little bit. It doesn't do this in moz, ff, netscape. Is there way to 
compensate for this IE irregularity? (no padding or margin on wrapper)

Bruce Gilbert
webmaster
DPS

-Original Message-
From: Mani Sheriar [EMAIL PROTECTED]
Sent: Dec 17, 2004 9:22 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] The Holy Grail ... CSS Liquid Three-Column Layout

what if you want one of the columns to have a border around it, say the
right column. How can this be done?

If you want one of the columns to have a border, then you just apply the
border property to the column and your 200x1 pixel gif can have that
border on it as well.  Should work fine.

One of the main reasons that I struggled to create this layout is so
that you could have different colors for the background, header, footer,
and all three columns (none of the colors are shining through from
underlying elements).  This can be extended to different backgrounds as
well ... which is the REAL reason that I worked on this design.  If you
wanted some sort of fancy background for the side columns (or any
element) then you would just apply that background to the column and the
wrapper div.

IE 5.2 OS X (Mac): extra padding added to the width of the left and
right columns
Screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif
(could be a known CSS bug related to IE implementation of box
model-padding and border added to width)
See: http://tantek.com/CSS/Examples/boxmodelhack.html

Call for help:

Does anyone have any ideas about this problem in IE 5.2 OS X
(screenshot: http://www.motive.co.nz/temp/041217-hoygrail.gif). I have
already implemented the box model hack, so I'm not sure what the issue
could be.

 Anyone come up with, or implemented, a 3-column layout of this sort in
which the left and right columns also stretch as a percentage of the
page width?

I haven't tried it yet, but one theory is to make the background
repeater very long (horizontally), and set it to repeat-y, but set its
x-axis start position as a percentage. I haven't tried it yet, but one
theory is to make the background repeater very long (horizontally), and
set it to repeat-y, but set its x-axis start position as a percentage.

I actually started working on an all-liquid layout at first. I ended up
going to a single-column liquid layout just because this would work
better for a project I'm about to embark on.  What you suggest is
exactly how I planned to try to implement the backgrounds (I didn't get
that far yet, though). However, I might try to follow up on the
all-liquid layout just to see if it can be done.  If I get to it and get
it to work, I'll post it here.


Quick Note:

Dejan - Wow ... THANK YOU for your help.  I'm sure those screen shots
will be very helpful and I really appreciate your time.

Mani Sheriar
Sheriar Designs | www.ManiSheriar.com
925|914.0741
 
 



**
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] Semantic Mark-Up for Product Catalog

[Gary Menzel]

Yes both are viable.

I would use the dl when I was expecting to have a few per page
type layout that would be more like a brochure layout.

I would use the table when what I wanted was - you guessed it - a
table layout.

My own personal guideline for table VS anything else is simply
asking myself the question Is this a table?.  If the answer is Yes
then I use a table.  Otherwise I use an appropriate tag.

In the case of a set of products (or similar, Contacts, Events, News,
in fact mostly any single entity that you may have a collection of
with a name) I regularly use dl because you can say all of those
have a This generic term (e.g. Product Name) equates to this specific
instance (e.g. CSS Stylesheet Editor) relationship.  That is - this
equals that.  (Which is basically what a definition list is
semantically).

But I would use it differently to the original suggestion...

dl id=cssed1
dtPhoto:/dt
ddimg src=csseditor.gif/dd
dtName:/dl
ddCSS Stylesheet Editor/dd
dtDescription:/dt
ddGreat editor for CSS stylesheets/dd
dtPrice:/dl
ddFor you... $10/dd
/dl

That markup has many possibilities (including being able to style each
product individually if you want)  I have also used the exact same
markup to provide different views of the information depending on
the context of the surrounding container tag (e.g. a main page body
versus a side bar).

Regards
Gary


On Fri, 17 Dec 2004 09:19:22 -0800, Chris Kennon [EMAIL PROTECTED] wrote:
 Both are viable solutions, would the dl be more scalable for floating
 an image with caption beside it. With the table you mentioned Lynx
 support, does Lynx choke on dl?
**
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] Semantic Mark-Up for Product Catalog

[Graham]

And please, please, if using a table remember to include row and column
scope. On a table as small as this it is not really essential, but once the
table grows (or if served from a database where it could be any size) good
column and row headings with scope attributes are essential. 

table summary=pretty bazillion product
captionMy Product/caption
tbody
tr
th scope=rowsProduct Number/th
td12334/td
/tr
tr
th scope=rowsProduct Description/th
tdpretty/td
/tr
tr
th scope=rowsProduct Cost/th
tdbazillion/td
/tr
/tbody
/table

Graham Cook

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Kornel Lesinski
Sent: Saturday, 18 December 2004 4:09 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Semantic Mark-Up for Product Catalog

On Fri, 17 Dec 2004 11:46:20 -0500, Michael Wilson [EMAIL PROTECTED]  
wrote:

 Chris Kennon wrote:
 In the following name/value listing what would be the most semantic  
 mark-up.

 Product Name:
  Product Number:
   Product Description:
   Product Cost:

 I'd probably use a definition list:

 dl
dtMy Product/dt
ddProduct Number: 123456/dd
dd
  pProduct Description:/p
  pThis is my product... Ain't it perty?/p
/dd
ddMSRP: $1 Bazillion (will trade for 4x4 in good condition)/dd
 /dl


How about a table? They're not always evil...

table summary=pretty bazillion product
captionMy Product/caption
tbody
trthProduct Number/thtd12334/td/tr
trthProduct Description/thtdpretty/td/tr
trthProduct Cost/thtdbazillion/td/tr
/tbody
/table

..and Lynx WILL render that table! :D

-- 
regards, Kornel Lesiski

**
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] Semantic Mark-Up for Product Catalog

[Chris Kennon]

Hi,
Any browser idiosyncrasy with dl? I'm hoping none exist with tables.
CK
PS
Thanks for the many viable solutions
On Friday, December 17, 2004, at 01:49 PM, Graham wrote:
And please, please, if using a table remember to include row and column
scope. On a table as small as this it is not really essential, but 
once the
table grows (or if served from a database where it could be any size) 
good
column and row headings with scope attributes are essential.

table summary=pretty bazillion product
captionMy Product/caption
tbody
tr
th scope=rowsProduct Number/th
td12334/td
/tr
tr
th scope=rowsProduct Description/th
tdpretty/td
/tr
tr
th scope=rowsProduct Cost/th
tdbazillion/td
/tr
/tbody
/table
Graham Cook
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Kornel Lesinski
Sent: Saturday, 18 December 2004 4:09 AM
To: [EMAIL PROTECTED]
Subject: Re: [WSG] Semantic Mark-Up for Product Catalog
On Fri, 17 Dec 2004 11:46:20 -0500, Michael Wilson 
[EMAIL PROTECTED]
wrote:

Chris Kennon wrote:
In the following name/value listing what would be the most semantic
mark-up.

Product Name:
 Product Number:
  Product Description:
  Product Cost:
I'd probably use a definition list:
dl
   dtMy Product/dt
   ddProduct Number: 123456/dd
   dd
 pProduct Description:/p
 pThis is my product... Ain't it perty?/p
   /dd
   ddMSRP: $1 Bazillion (will trade for 4x4 in good condition)/dd
/dl
How about a table? They're not always evil...
table summary=pretty bazillion product
captionMy Product/caption
tbody
trthProduct Number/thtd12334/td/tr
trthProduct Description/thtdpretty/td/tr
trthProduct Cost/thtdbazillion/td/tr
/tbody
/table
..and Lynx WILL render that table! :D
--
regards, Kornel Lesiski
**
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
**

CK
__
Knowing is not enough, you must apply;
willing is not enough, you must do.
---Bruce Lee
**
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] Semantic Mark-Up for Product Catalog

[Kornel Lesinski]

And please, please, if using a table remember to include row and column
scope.
What is the default scope?
--
regards, Kornel Lesiski
**
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 img border padding error

[Sarah Peeke (XERT)]

Hi Charlie

 RE: http://www.xert.com.au/workshop/pbyron628/

 Just have time for a quick glance, but I think it looks nice, it 
 validates, and it doesn't have unintelligible markup so my screen reader 
   doesn't struggle with it.  Just to make sure, you're not going to keep 
 the Heading Two, Heading Three, etc. right?  Because in my screen 
 reader it says Heading Two Heading Two and Heading Two Heading 
 Three, respectively.  Otherwise I think it's good!

You're right the headings (and paragraph text) are just temporary. Thanks for 
the feedback though,
as I have not done much testing with screen readers.

Sarah ;-)
-- 
XERT Communications
email: [EMAIL PROTECTED]
office: +61 2 4782 3104
mobile: 0438 017 416

http://www.xert.com.au/   web development : digital imaging : dvd production
**
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] Another amazing css zen garden entry

[Andrew Krespanis]

I know I'm way out on a limb with this one, but the ocean thing really
doesn't do anything for me... The diver/flashlight effect is cool
(even though it looks a bit nasty as it goes over the gradient) and
the rendered ocean floor has really nice lighting, but besides that...

Comments like I'm not worthy are somewhat surprising; but hey, to
each their own :)

Andrew.
---
http://leftjustified.net/
**
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] Another amazing css zen garden entry

[JohnyB]

I know I'm way out on a limb with this one, but the ocean thing really
doesn't do anything for me... The diver/flashlight effect is cool
(even though it looks a bit nasty as it goes over the gradient) and
the rendered ocean floor has really nice lighting, but besides that...
I have to agree with your post, Andrew.
This is quite interesting toy for playing, but the overall look'n'feel 
really doesn't seem wow to me...

--
Jan Brasna :: alphanumeric.cz | webcore.cz | designlab.cz | janbrasna.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] Another amazing css zen garden entry

[J4Web]

Some of us are pretty impressed and even mystified at the guy's technical 
creativity at utilising standards-based techniques to achieve the effects 
of the diver and the light and the bubbles and the crab.

It is that sense of seeing art at the cutting-edge of science that makes us 
go wow.

Sure, we've all seem much more impressive deep diver ocean scenes, but 
using only HTML and CSS?

Could the people who think it is so non-wow, please explain to us in a few 
simple words, how it is done? Then I am going to do something similar by 
afternoon-tea time

John
At 11:57 AM 18/12/2004, JohnyB wrote:
I know I'm way out on a limb with this one, but the ocean thing really
doesn't do anything for me... The diver/flashlight effect is cool
(even though it looks a bit nasty as it goes over the gradient) and
the rendered ocean floor has really nice lighting, but besides that...
I have to agree with your post, Andrew.
This is quite interesting toy for playing, but the overall look'n'feel 
really doesn't seem wow to me...

**
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] Another amazing css zen garden entry

[Francesco]

On Sat, 18 Dec 2004 14:58:11 +1100, J4Web [EMAIL PROTECTED] said:



When I first saw it, I thought ooh this is a nice color scheme and use
of animated gifs and that was about it.  It is quite creative.


Francesco Sanfilippo, Developer / Designer
---
Blackcoil Productions - http://blackcoil.com 
URL123 Link Service - http://url123.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] accessible image form buttons

[Philippe Wittenbergh]

On 17 Dec 2004, at 10:01 am, Kornel Lesinski wrote:
divinput//div
div {background: darkcolor url(darkimage);}
input {opacity: 0.5; -moz-opacity: 1; background: lightcolor 
url(lightimage);}

As far as I know currently it is quite safe, but it will start to 
cause trouble when Opera implements opacity and/or Gecko drops -moz- 
variant.
Gecko browsers support the opacity property correctly, without the -moz 
prefix, since Gecko1.6 (meaning: Firefox1.0 supports opacity).

What is wrong with solution 3:
input type=image src=Searchbutton.gif alt=Search title=search 
/
adding a title attribute for good measure and increased accessibility, 
providing your image doesn't use tiny text, and has good contrast 
between text and background ?

All my Mac browsers display the 'title' as a 'tooltip'.
Philippe
---/---
Philippe Wittenbergh
now live : http://emps.l-c-n.com/
code | design | web projects : http://www.l-c-n.com/
IE5 Mac bugs and oddities : http://www.l-c-n.com/IE5tests/
**
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] accessible image form buttons

[Andreas Boehmer [Addictive Media]]

 -Original Message-
 From: Philippe Wittenbergh [mailto:[EMAIL PROTECTED]
 Sent: Saturday, 18 December 2004 3:55 PM
 To: [EMAIL PROTECTED]
 Subject: Re: [WSG] accessible image form buttons

 What is wrong with solution 3:
 input type=image src=Searchbutton.gif alt=Search title=search
 /
 adding a title attribute for good measure and increased accessibility,
 providing your image doesn't use tiny text, and has good contrast
 between text and background ?

I prefer giving my users the ability to increase font, if possible. Not
everybody with a visual disability has got a screenreader to read out the
alt text. Pure text can't go wrong.


**
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] Another amazing css zen garden entry

[Andrew Krespanis]

 It is that sense of seeing art at the cutting-edge of science that makes us
 go wow.

Good point John, I can't argue with that :) The backgrounds are great,
the css is cutting edge. That doesn't make it a great design though.

 Could the people who think it is so non-wow, please explain to us in a few
 simple words, how it is done? Then I am going to do something similar by
 afternoon-tea time

I haven't looked at the css, but if I was trying to achieve this it
would be setup something like:
diver : top layer (z-index), fixed positioning, 24-bit png.
gradient: second layer, attached to top, 24-bit png.
light: bottom layer, fixed positioning, 24-bit png.

Everything else would be animated gifs on :hover states, two reasons
the effect doesn't work in IE.
The ocen floor is either a photo or render, treasure chest added after
the fact. Crab is animated gif, drawn over the sand but cut back to
binary transparency.

That said, the conception of such a technique is usually more work
than the application, and this technique is pretty damn slick. What I
should have said is that while the 'diver trick' is cool, I don't rate
it amongst my favourite zen entries.


Andrew.
**
The discussion list for  http://webstandardsgroup.org/

 See http://webstandardsgroup.org/mail/guidelines.cfm
 for some hints on posting to the list  getting help
**