[WSG] shrinking p whitespace
Hi, This is my first request for help to this list I think. Hope it's appropriate since it's kind of a CSS help thing but I can't bear going back on css-discuss if you know what I mean. ;-) At here: http://www.lucernemedia.com/ I'm trying to shrink the whitespace after the video titles (.video_title is the relevant style I'm pretty sure). See anything obvious that's keeping the whitespace so big after the titles? Stylesheet here: http://www.lucernemedia.com/css/newestbase.css CSS and markup mainly validate, with a few margin errors perhaps. TIA Rick Faaberg ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] shrinking p whitespace
Hi Rick, Welcome to the group :D as for the whitespace around the P have you removed padding and margin from it? and if so have you removed it from any surrounding elemenets? thats normaly the main cause of whitespace around a P Hope that helps you on your way a bit... Mark Harwood Phunky.co.uk / Zinkmedia.co.uk / XhtmlandCss.co.uk ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] shrinking p whitespace
On 9/28/04 4:06 AM Mark Harwood [EMAIL PROTECTED] sent this out:
as for the whitespace around the P have you removed padding and margin from
it?
and if so have you removed it from any surrounding elemenets? thats normaly
the main cause of whitespace around a P
All I've specified for p is a font family...
p { font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular,
sans-serif }
As far as surrounding elements, I hoped you folks would spot something
obvious that I'm missing because I've looked real hard. :-)
Thanks,
Rick
http://www.lucernemedia.com/
SS http://www.lucernemedia.com/css/newestbase.css
Need to get rid of the white space after the video titles - the style is
video_title
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] shrinking p whitespace
Rick, You could put margin:0 in .video_title and .video_synop and that should fix the space issue. You might want to consider more semantic code though, perhaps use the h element (or even a definition list?). cameron. Rick Faaberg wrote: Hi, This is my first request for help to this list I think. Hope it's appropriate since it's kind of a CSS help thing but I can't bear going back on css-discuss if you know what I mean. ;-) At here: http://www.lucernemedia.com/ I'm trying to shrink the whitespace after the video titles (.video_title is the relevant style I'm pretty sure). See anything obvious that's keeping the whitespace so big after the titles? Stylesheet here: http://www.lucernemedia.com/css/newestbase.css CSS and markup mainly validate, with a few margin errors perhaps. TIA Rick Faaberg ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] shrinking p whitespace
Title: RE: [WSG] shrinking p whitespace
Hi Rick
I have altered the markup as follows:
table id=releases
tr
thNew video releases (all available in VHS, DVD, and Digital)/th
/tr
tr
tdh3Electing the President 2004: How the Electoral College Works/h3
Including footage of the 2004 presidential race, this timely program explains the U.S. election system. It examines the function of the Electoral College from its inception to the present day, the rise of political parties, changes in voter eligibility, the influence of TV. Teacher#146;s Guide. (16 min. Gr. 6-12) /td
/tr
tr
td class=item_tdh3Bullying at School: Decisions and Consequences/h3
Harassment by classmates drives a boy to an act of violence against one of them that leads to his being charged with assault. Issues raised stimulate discussion about emotional and physical bullying, conflict resolution, and violence prevention. Discussion Guide. (12 min. Gr. 5-8, Adult) /td
/tr
tr
tdh3img src="" alt= height=83 width=70 align=right border=0 livesrc=images/flag_our_country.jpgOur Country's Flag/h3How did the Stars and Stripes come to be the patriotic symbol of the United States? Beginning with Colonial and Revolutionary War flags, we trace the evolution of our flag as the nation grew. Many actual flags are shown as well as their use in historic events. Teacher#146;s Guide. (12 min. Gr. 3-6)/td
.and so on. This is more semantically correct. The table is showing release details. Once the table has been given an 'id' attribute it is then easy to remove the unnecessary classes which only serve to clutter the markup. Once this has been done then the following styles can be added to the stylesheet. You can control whitespace around the content in the td's by adding padding the their declaration ( ie table#releases td {padding: 3px; }
Here are the styles:
table#releases
{
padding: 0;
margin: 0;
width: 100%;
font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; //this only needs to be declared here if it isn't already set in the body styles for the page. It 'cascades' to its children/descendants
}
table#releases th
{
color: #e10372;
font-weight: bold;
font-size: 12px;
text-align: center;
margin-top: 6px;
margin-bottom: 6px;
}
table#releases td h3
{
padding: 0;
margin: 0;
color: #0b3e7f;
font-weight: bold;
font-size: 11px;
}
table#releases td
{
color: #0b3e7f;
font-size: 10px;
line-height: 11px;
margin-right: 12px;
margin-bottom: 6px;
margin-left: 12px
}
I have set the font-weight property to bold. This should suffice in most circumstances.
I hope this helps.
Peter Goddard
-Original Message-
From: Rick Faaberg [mailto:[EMAIL PROTECTED]]
Sent: 28 September 2004 11:30
To: [EMAIL PROTECTED]
Subject: [WSG] shrinking p whitespace
Hi,
This is my first request for help to this list I think. Hope it's
appropriate since it's kind of a CSS help thing but I can't bear going back
on css-discuss if you know what I mean. ;-)
At here:
http://www.lucernemedia.com/
I'm trying to shrink the whitespace after the video titles (.video_title is
the relevant style I'm pretty sure).
See anything obvious that's keeping the whitespace so big after the titles?
Stylesheet here:
http://www.lucernemedia.com/css/newestbase.css
CSS and markup mainly validate, with a few margin errors perhaps.
TIA
Rick Faaberg
**
The discussion list for http://webstandardsgroup.org/
Proud presenters of Web Essentials 04 http://we04.com/
Web standards, accessibility, inspiration, knowledge
To be held in Sydney, September 30 and October 1, 2004
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] shrinking p whitespace
On Tuesday, Sep 28, 2004, at 20:29 Australia/Sydney, Rick Faaberg wrote: At here: http://www.lucernemedia.com/ I'm trying to shrink the whitespace after the video titles (.video_title is the relevant style I'm pretty sure). See anything obvious that's keeping the whitespace so big after the titles? Rick: First, by 'whitespace' do you mean the line of space between p.video_title and p.video_synop? Is that what you're trying to close up? Because if so, you need to add margin-bottom:0 to the css declaration for p.video-title, and margin-top: 0 to p.video_synop. A p, by default , will always give you a line of whitespace before the next p... Or is your issue something else? If so, browser, version, platform, please - and a clear description of where the unwanted whitespace is? Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ Proud presenters of Web Essentials 04 http://we04.com/ Web standards, accessibility, inspiration, knowledge To be held in Sydney, September 30 and October 1, 2004 See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
