13 replies [Last post]
downplay
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2008-01-13
Posts: 6
Points: 0

If I understand correctly, I am supposed to style
my text with paragraph tag styles. When I do this,
it has the side effect of adding the extra paragraph
space before and after my text and pads the size of
my cell. What can I do to avoid this problem. I am
just learning CSS and don't mind reading if there is
a topic I just haven't found to cover this. Please
point me in the right direction. Maybe I'm going
about it all wrong.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 7 years 30 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Try: td p { margin : 0px ;

Try:

td p { margin : 0px ; }

But that is not a good idea if you expect to have multiple paragraphs in a single cell.

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

downplay wrote: If I

downplay wrote:

If I understand correctly, I am supposed to style
my text with paragraph tag styles. When I do this,
it has the side effect of adding the extra paragraph
space before and after my text and pads the size of
my cell. What can I do to avoid this problem. I am
just learning CSS and don't mind reading if there is
a topic I just haven't found to cover this. Please
point me in the right direction. Maybe I'm going
about it all wrong.

Not sure I entirely like the sound of this; what are you using the table construct for ? As a very generalised rule I wouldn't consider a table used correctly to display tabulated data would require paragraphs in cells, but that isn't to say they can't have, can you explain what the content is and why you require a table, is it a table based layout?

Margins on paragraphs are not a side effect but a necessity you can remove them as explained in the previous post but that has problems if more than one of them.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

downplay wrote: If I

downplay wrote:

If I understand correctly...Maybe I'm going
about it all wrong.

Yes, you do seem to be going about it all wrong. Sorry to be the bearer of bad news.

You should not even consider how your page will look when you are creating your HTML. HTML is for marking up content in a meaningful way, that is semantically, and how it is going to look is irrelevant for that.

Once you have your content properly marked up, you use CSS to determine how it is going to look. CSS can do pretty well everything you want, all by itself, but only when you give it a basis of valid and semantic HTML markup. The problem you cited with paragraphs is easily fixed by a simple CSS rule, for example.

The is the CSS Creator site, after all. The only really successful way to create with CSS is to use HTML for what it was originally intended, to mark up the meaning of content, not it's appearance.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

downplay
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2008-01-13
Posts: 6
Points: 0

Yes, I understand the

Yes, I understand the purpose of CSS. Separation of content and
appearance of the content. Understanding that fact doesn't mean
that I know CSS well enough to achieve all of the "appearances"
that I need.

So, is the idea that you simply shouldn't use tables for most
purposes with the advent of CSS?

Besides, I am not trying to consider the appearance while creating
content, I am trying to replace HTML attributes in an old web
page and make it look exactly like it did originally. I have
succeeded in every way except for the margins around the cell
created in the table when using

classes to style my text.

Here is a link to the web page: http://www.mistyckcreations.com

The web page design, etc is not my own. I simply recreated a
drawing made by the owner of the website. As it appears in
FireFox, it is almost exactly what she drew.

So, should I try to somehow recreate the positioning of the
elements not using any tables?

It seems to me that the HTML table is inherently a layout/appearance
mechanism. Is there a reason it is not deprecated? Because
it would break so many legacy web pages?

Adding "margin: 0px" to my paragraph class worked like magic.
However, if this web page is laid out substandard, I want to
figure out how to do it right.

Please give your opinion and point me to the proper css style
mechanisms to utilize.

THANKS!!!

downplay
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2008-01-13
Posts: 6
Points: 0

I've figured out a basic

I've figured out a basic layout to replace my tables
using css.

My solutions are borrowed and stuck together to work
but it feels inelegant.

Below is my css. Please feel free to make any
suggestions. Here is the link to the page:

http://www.mistyckcreations.com

body
{
margin: 5px 0px; padding: 0px;
text-align: center; background-color: #FFCCFF
}

#Content
{
width: 612px;
margin: 0px auto;
text-align: left;
padding: 1px;
border: 2px solid #000000;
background-color: #FFCCFF;
}

#Businessname
{
width: 800px;
margin: 0px auto;
text-align: left;
padding: 0px;
}

#navlinks
{
width: 800px;
margin: 0 auto;
padding: 0px;
text-align: center
}

.mainmenu
{
float: left;
width: 100%;
margin: 1em 0;
padding: 0px 0.5em;
background: #FFCCFF none;
}

.mainmenu ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

.mainmenu li
{
margin: 0;
padding: 0;
float: left;
width: 19%;
text-align: center;
}

#frontpagetagline
{
width: 800px;
margin: 0px auto;
text-align: center;
padding: 0px;
}

#beforelabel
{
float: left;
width: 300px;
margin: 0;
padding: 0em;
text-align: center
}

#afterlabel
{
margin-left: 308px;
text-align: center
}

#before
{
float: left;
width: 300px;
margin: 0;
padding: 0em;
}

#after
{
margin-left: 308px;
}

a:link
{
color: #9933FF
}

a:visited
{
color: #9933FF
}

a:hover
{
color: #FFFFFF
}

a:active
{
color: #FFFFFF
}

a.sitenavlinks
{
font-family: Georgia; font-size: 18px
}

p.centered
{
text-align: center
}

p.frontpagetagline
{
font-family: Georgia; font-size: 28px; font-style: italic; font-weight: 300; color: #6600FF
}

p.beforeafter
{
font-family: Georgia; font-size: 18px; margin: 0px; color: #6600FF
}

img.banner
{
width: 800px; height: 120px
}

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

downplay wrote:Yes, I

downplay wrote:
Yes, I understand the purpose of CSS. Separation of content and
appearance of the content. Understanding that fact doesn't mean
that I know CSS well enough to achieve all of the "appearances"
that I need.

So, is the idea that you simply shouldn't use tables for most
purposes with the advent of CSS?

The idea is that one uses tables to mark up tabular content. If your content is naturally arranged in rows and columns with each column having a separate and distinct meaning that applies to all it's rows, such as output from a typical SQL query, then tables are not merely appropriate but are generally the only appropriate markup. That isn't true of the page you provided a link to, by the way.

For anything else, and particularly for positioning, they are not appropriate. And they cause far more trouble than they are worth.

Quote:
Besides, I am not trying to consider the appearance while creating
content, I am trying to replace HTML attributes in an old web
page and make it look exactly like it did originally.

(empahsis mine)

Take a second look at that. You contradicted yourself in a single sentence!

Quote:
The web page design, etc is not my own. I simply recreated a
drawing made by the owner of the website. As it appears in
FireFox, it is almost exactly what she drew.

This is a recipe for disaster. Don't let drawings on paper determine your markup. The web is not paper! Nothing you can do will make it into paper. Some things that work fine on paper just don't work on the web. You have to work with the medium you have and trying to transfer something unchanged from one medium to another is just not generally going to work. Just watch some 1950's TV and see what I mean.

Nothing about the site you've linked to even remotely requires a table, and using tables will only make the page bigger, messier, and slower to load.

Quote:
So, should I try to somehow recreate the positioning of the
elements not using any tables?

You should mark it up in valid and semantic html using a STRICT doctype. Then when you have that done, and only then, should you go about positioning and decorating things. This may require the addition of a few strategically placed unsemantic elements (generally DIVS and SPANs) for grouping elements and providing appropriate CSS hooks.

Once you have valid semantic markup come on back and we'll help you style and position it. But what makes you think that just because someone drew a graphic on paper that that is necessarily the best way to present the content on the web. To my eye there are several design flaws, even ignoring the code behind it. In my opinion the site really needs a complete redesign from the ground up, not a makeover to get rid of the tables.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

downplay wrote: I've figured

downplay wrote:

I've figured out a basic layout to replace my tables
using css.

My solutions are borrowed and stuck together to work
but it feels inelegant.

Way too complicated. You don't need all those DIVs. Maybe two or three at the very most. I bet I could do that exact layout with no more than one DIV.

Also you have a lot of html errors - invalid characters and the like. You must have valid html if you expect CSS to work. That is not an option.

Really, do yourself a favour. Forget about how it looks for awhile. Recode it all in valid and semantic HTML with a proper standards triggering STRICT doctype. Until you do you are wasting time.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

downplay
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2008-01-13
Posts: 6
Points: 0

Quote:Besides, I am not

Quote:
Besides, I am not trying to consider the appearance while creating
content, I am trying to replace HTML attributes in an old web
page and make it look exactly like it did originally.

(empahsis mine)

Take a second look at that. You contradicted yourself in a single sentence!

Semantics, semantics, semantics...I meant the content was already
created. What I said can only be contradictory if I am creating
content.

You guys are totally right, but what attitude!

Now I remember why I left the software industry years ago...the
people I had to deal with!

downplay
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2008-01-13
Posts: 6
Points: 0

Quote: In my opinion the

Quote:

In my opinion the site really needs a complete redesign from the ground up, not a makeover to get rid of the tables.

This is a really old web page. The customer can't afford a total redesign
and I can't afford to spend a whole week to learn all the nuances of css
just because browsers finally started enforcing and properly implementing
the standards.

If I can make it work in css that will work across the common browsers,
that will have to do.

I have a computer science degree. I understand doing things correctly and pefectly by the standards definitions...but in the real world sometimes there is not enough resources to do everything perfectly.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 38 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

downplay wrote:<snip>The

downplay wrote:
<snip>The customer can't afford a total redesign
and I can't afford to spend a whole week to learn all the nuances of css just because browsers finally started enforcing and properly
implementing the standards.

You won't need all the nuances, but you will need the basics. Consider the results of wrong syntax in any programming language.

Quote:
If I can make it work in css that will work across the common
browsers, that will have to do.

The only way to do that on the cheap, timewise, is to start with well structured, semantic markup, using correct syntax. Plus, you absolutely must use a complete and proper DTD, preferably strict, so that IE renders according to W3 standards instead of its own.

Quote:
I have a computer science degree. I understand doing things
correctly and pefectly by the standards definitions...but in the
real world sometimes there is not enough resources to do everything
perfectly.

The thing is, html and css are not programming languages, and nearly everything you do with them is roughly equivalent to a "hello world" effort in your favorite language. Because you can do so much on a trivial level, there is no excuse for not getting the syntax perfect and employing best practices.

Let's look at your specimen page.

To start, the banner image is the header for the page, so we'll wrap it in an h1 tag.

Next we have a global menu—that's a list.

The tagline? that's a paragraph.

Now we have some structural choices. We can group the four images by job, by before/after or individually. I chose to group the befores and the afters. Wrap each grouping in a div. Put a header on each group. Those are the second level, so h2.

An instruction to click for a bigger image; a paragraph.

Finally, let's wrap the whole thing so we can treat the page as a unit.

The only positioning was to center the page, and to set our picture groups side by side.

The javascript is removed from the page (well, it and the css are embedded in the header for this demo, but in production would be in separate files). After the page loads, an event handler is added to the image links. Notice that links not of a particular rel value don't get the event handler.

So the page, needing only color and fonts, etc., is ready to go. It's only marginally less trivial than "hello world", but we don't have to compile it.Smile






/**/

//





Misty Creations



  • Home


  • Mural Gallery


  • Testimonials


  • Terms & Conditions


  • Contact



Custom artwork to feed your imagination …




Before




Patio before adding mural




Pool privacy wall before adding mural





After




Patio wall after adding mural




Pool wallafter adding mural




Click on an image to see a larger version.




cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

ABCruz
ABCruz's picture
Offline
Enthusiast
Pilipinas
Last seen: 7 years 30 weeks ago
Pilipinas
Timezone: GMT+8
Joined: 2005-06-16
Posts: 279
Points: 0

Good work, Gary!

Good work, Gary! :thumbsup:

I am a Man of Truth.
I am a Free Human Person.
I am a Peacemaker.

http://www.abcruz.com

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 40 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

downplay wrote:Quote:

downplay wrote:
This is a really old web page. The customer can't afford a total redesign and I can't afford to spend a whole week to learn all the nuances of css just because browsers finally started enforcing and properly implementing
the standards.

Well, perhaps if you'd told us this back at the start you would have gotten a different answer. You seem to have moved the goal posts. If you want good advice you have to provide the relevant facts.

My advice in light of this would be to forget about re-writing it without the tables. Give each page a correct html 4.01 transitional doctype, fix up the worst of the syntax errors, make sure it is useable on IE6, and move on. And stop worrying about minor display issues.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

downplay
Offline
newbie
Last seen: 13 years 45 weeks ago
Joined: 2008-01-13
Posts: 6
Points: 0

kk5st, now that's what I'd

kk5st, now that's what I'd call constructive feedback
and with no unnecessary attitude! Shock)

Thank you all, seriously. I am going to incorporate
css and the feedback here in the rest of the website
as best I can with the time I have. I may revisit and
try to improve the implementation over time.

I don't write software anymore. I was never a web designer.
I write magazine articles now and I am embroiled in my
first book project.

This is a website I through together several years ago for
a good friend on the cheap. She is the struggling artist
type (but talented) and very bad at business. Even though
I cannot follow through with the full measure of all the
good advice here, you guys have been a big help. I thank
you for Misty and Myself.