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:
dl class=guestBook netherlands
dtSusanne de Letter/dt
dd class=loc_dateNetherlands / September 23, 2009/dd
dd class=rating stars5Experience: span5 stars/span/dd
dd class=commentJust 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.br /
br /
Hope it stopped raining? That the dogs are ok and that you didn't have any
exciting night dives with angry pearl fishers anymore.br /
br /
Say hi to Jo Jo and who knows maybe you see me back one daybr /
br /
Thanks Susanne de Letterbr /
Amsterdam the Netherlands/dd
/dl
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
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:
dl class=guestBook netherlands
dtSusanne de Letter/dt
dd class=loc_dateNetherlands / September 23, 2009/dd
dd class=rating stars5Experience: span5 stars/span/dd
dd class=commentJust 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.br /
br /
Hope it stopped raining? That the dogs are ok and that you didn't have any
exciting night dives with angry pearl fishers anymore.br /
br /
Say hi to Jo Jo and who knows maybe you see me back one daybr /
br /
Thanks Susanne de Letterbr /
Amsterdam the Netherlands/dd
/dl
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
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 ***
[WSG] Strange Table Border Rendering in everything BUT FF and IE
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 td class=flag within each of
these two tables. Hummm.
My css is pretty straight forward:
table.guestBook
{
border-top: 1px solid #9CA027;
border-bottom: none;
border-right: none;
border-left: none;
margin-bottom: 20px;
}
table.guestBook td.flag
{
padding: 0;
width: 64px;
}
table.guestBook th, table.guestBook td
{
font-size: 1.2em;
text-align: left;
border: none;
padding: 0px 0px 5px 15px;
}
table.guestBook th.name
{
font-size: 1.4em;
color: #2695c0;
}
table.guestBook img.stars
{
position: relative;
left: 3px;
top: 3px;
}
table.guestBook td.comment
{
padding-top: 10px;
}
Has anyone else come across this non-Firefox, non i.e. issue? Any
suggestions on how to fix it?
Great appreciation for all guidance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***attachment: winmail.dat
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 td class=flag within each of these two tables. Hummm. Hi Cole in the first row the td needs a colspan of 2 I think table cellspacing=0 class=guestBook trtdnbsp;/td/tr should be... table cellspacing=0 class=guestBook trtd colspan='2'nbsp;/td/tr -- Chris Knowles *** 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 td class=flag within each of these two tables. Hummm. Hi Cole in the first row the td needs a colspan of 2 I think table cellspacing=0 class=guestBook trtdnbsp;/td/tr should be... table cellspacing=0 class=guestBook trtd colspan='2'nbsp;/td/tr -- 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 ***
