Re: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Cole Kuryakin wrote: [...] One MAJOR problem with using background images for the flag buttons is the fact that each entry could carry any one of 200+ flags. That's a WHOLE LOT of background declarations! No matter what type of more semantic structure I end up using for this I'm afraid I'll have to use image tags for the flag. Anyone else have any suggestion of what a "preferred" semantical structure "should be" for a guestbook? Nope. A table doesn't seem far-fetched - it looks like tabular data to me... On the subject of the flags, you could make one tall (or wide) image containing all the flags, and simply change the background-position property for each entry's CSS selector. This would likely save you coding a whole bunch of IMG tags - and images... Search for "css background image sprites" for more about this technique. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Kepler -
Hey, thanks for taking so much effort for all that you've written below.
Yes, it's true, I'd like to make these entries more semantically structured
(I hadn't thought of a def list option) but I was under a nighmarish
deadline on this module of the project so just initially opted for a table
layout.
One MAJOR problem with using background images for the flag buttons is the
fact that each entry could carry any one of 200+ flags. That's a WHOLE LOT
of background declarations! No matter what type of more semantic structure I
end up using for this I'm afraid I'll have to use image tags for the flag.
Anyone else have any suggestion of what a "preferred" semantical structure
"should be" for a guestbook?
Cole
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Kepler Gelotte
Sent: Sunday, September 27, 2009 2:24 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Strange Table Border Rendering in everything BUT FF and
IE
Hi,
What Chris wrote will take care of the border issue. I would suggest using a
structure other than a table though for guestbook entries. You could use a
definition list (other people on this list may disagree and have a more
semantic structure you could use).
For example, the CSS:
dl.guestBook
{
font-size: 75%;
border-top: 1px solid #9CA027;
border-bottom: none;
border-right: none;
border-left: none;
margin-bottom: 20px;
padding-top: 15px;
}
dl.netherlands
{
background: url('nl.jpg') 0 15px no-repeat;
}
dl.australia
{
background: url('au.jpg') 0 15px no-repeat;
}
dl.guestBook dt, dl.guestBook dd
{
text-align: left;
border: none;
padding: 0 0 0 15px;
margin: 0 0 10px 64px;
}
dl.guestBook dt
{
font-size: 1.4em;
font-weight: bold;
color: #2695c0;
}
dl.guestBook dd.loc_date,
dl.guestBook dd.rating
{
color: #9CA027;
}
dl.guestBook dd.stars5
{
background: url('5.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars4
{
background: url('4.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars3
{
background: url('3.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars2
{
background: url('2.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars1
{
background: url('1.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.rating span
{
display: none;
}
And the HTML:
Susanne de Letter
Netherlands / September 23, 2009
Experience: 5 stars
Just want to send a quick email that I had a lovely stay
in the resort. Nice food, nice people and great diving. Even if you are a
single lady traveller like me it's a great place to stay.
Hope it stopped raining? That the dogs are ok and that you didn't have any
exciting night dives with angry pearl fishers anymore.
Say hi to Jo Jo and who knows maybe you see me back one day
Thanks Susanne de Letter
Amsterdam the Netherlands
That's not perfect, but I can only imagine it is easier to view in a text
browser than the table version.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Hi,
What Chris wrote will take care of the border issue. I would suggest using a
structure other than a table though for guestbook entries. You could use a
definition list (other people on this list may disagree and have a more
semantic structure you could use).
For example, the CSS:
dl.guestBook
{
font-size: 75%;
border-top: 1px solid #9CA027;
border-bottom: none;
border-right: none;
border-left: none;
margin-bottom: 20px;
padding-top: 15px;
}
dl.netherlands
{
background: url('nl.jpg') 0 15px no-repeat;
}
dl.australia
{
background: url('au.jpg') 0 15px no-repeat;
}
dl.guestBook dt, dl.guestBook dd
{
text-align: left;
border: none;
padding: 0 0 0 15px;
margin: 0 0 10px 64px;
}
dl.guestBook dt
{
font-size: 1.4em;
font-weight: bold;
color: #2695c0;
}
dl.guestBook dd.loc_date,
dl.guestBook dd.rating
{
color: #9CA027;
}
dl.guestBook dd.stars5
{
background: url('5.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars4
{
background: url('4.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars3
{
background: url('3.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars2
{
background: url('2.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars1
{
background: url('1.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.rating span
{
display: none;
}
And the HTML:
Susanne de Letter
Netherlands / September 23, 2009
Experience: 5 stars
Just want to send a quick email that I had a lovely stay
in the resort. Nice food, nice people and great diving. Even if you are a
single lady traveller like me it's a great place to stay.
Hope it stopped raining? That the dogs are ok and that you didn't have any
exciting night dives with angry pearl fishers anymore.
Say hi to Jo Jo and who knows maybe you see me back one day
Thanks Susanne de Letter
Amsterdam the Netherlands
That's not perfect, but I can only imagine it is easier to view in a text
browser than the table version.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Chris - That did it my friend - thanks for being my seeing eye dog! Much appreciated. Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Knowles Sent: Sunday, September 27, 2009 1:05 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Strange Table Border Rendering in everything BUT FF and IE Cole Kuryakin wrote: > Hello All - > > This is the first time I've come across this issue. > > First, go here in either FireFox or IE7 or greater: > http://www.sangat.ph/index.php?cmd=08.01.00 > > Both of these browsers render two guestbook entries (displayed in a table) > with a thin green line set on the top border of each of the two tables. This > is the way it should look. > > Now, if you go to the same page with Opera, Safari (windows), or Chrome, the > table border only renders to the width of within each of > these two tables. Hummm. > Hi Cole in the first row the td needs a colspan of 2 I think should be... -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Cole Kuryakin wrote: Hello All - This is the first time I've come across this issue. First, go here in either FireFox or IE7 or greater: http://www.sangat.ph/index.php?cmd=08.01.00 Both of these browsers render two guestbook entries (displayed in a table) with a thin green line set on the top border of each of the two tables. This is the way it should look. Now, if you go to the same page with Opera, Safari (windows), or Chrome, the table border only renders to the width of within each of these two tables. Hummm. Hi Cole in the first row the td needs a colspan of 2 I think should be... -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
