Text setting in CSS doesn't work

[kylecooper]

Hello,

 

I have a strange problem...

 

I have a right margin for text in a cell set in a CSS file.

I am 100 % that it's correct, yet it doesn't work!

 

Here's the CSS for the cell:

 

td.presentation-cell {

width: 984px;

height: 160px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background: #2A72D9;

vertical-align: center;

font-family: arial;

font-size: 12px;

color: FFFFFF;

margin-right: 5px;

text-indent: 10px;

text-align: justify;

}

 

Then, here's the top CSS setting for the text in general:

 

p {

font-family: arial;

font-size: 12px;

margin-top: 0px;

margin-bottom: 0px;

text-align: justify;

}

 

There is no setting here for right margin, so there's no way the commands are in conflict...

 

I use Frontpage too, because it gives so much flexibility.

When I set the CSS margin to 5 px on the right, then I works in the Frontpage normal view. But not in the preview.

 

And it doesn't work in any browser...

 

What could be wrong?  ???

 

[haku]

Overall your problem is that you are using Frontpage to write code instead of learning to code yourself.

 

On a more immediate level, its impossible to say, since other than telling us that the margin isn't working, you didn't actually tell us what the problem is.

[GameYin]

1) Font family needs MORE THEN 1 font.

2) You forgot # in front of the color codes. In a recent thread I told you to add them.

3) Never use frontpage. It is so bad even Microsoft discontinued it.

4) For margins, remember this order: top, right, bottom , left. That's the order which is being specified here. This way is so much simpler

 

margin: 0px 1px 2px 3px

 

Top got 0 px.

Right got 1px.

Bottom got 2px.

Left got 3px.

[kylecooper]

 

  Hello you two...

 

  I thought I was clear enough: the text right margin has no effect, even though it was set.

  So with 5px it is like with zero...

 

  I am not using Frontpage to build the site, just to copy-past and drag-n-drop, it's much faster than notepad. And it also has a preview which exactly shows how it'll appear in IExplorer

  I am well aware of the program's "limps"... incompatibility and weird HTML way of coding...

 

  Please, why would I need more than Arial for text type in CSS?

  I thought that this is a basic font and every browser has it...

 

  I tried what you said about the margins...

  Well, I have set all 4 and still no result 

 

  I just can't get that damn right margin at 5px.

 

  The white text in the dark blue field must have this 5px edge, so that it doesn't "kiss" the edge of the table...

 

  Frontpage can do it with the paragraph setting... But that's inside the page file itself

  And I want it in the external CSS style  :'(

 

  Here's the complete code:

 

<style type="text/css">

 

body {

background-color: #FFFFFF;

}

 

p {

font-family: arial;

font-size: 12px;

margin-top: 0px;

margin-bottom: 0px;

text-align: justify;

}

 

h1 {

text-indent: 8px;

text-align: justify;

margin-top: 0px;

margin-bottom: 0px;

font-size: 35px;

font-family: arial;

color: #FFFFFF;

}

 

h2 {

text-indent: 18px;

text-align: justify;

font-size: 23px;

font-family: arial;

color: #FF0000;

}

 

h3{

text-indent: 18px;

text-align: justify;

font-size: 18px;

font-family: arial;

color: #0099FF;

}

 

h4, h5, h6 {

text-indent: 18px;

text-align: justify;

font-size: 16px;

font-family: arial;

color: #000000;

}

 

a:link {color: 0099FF; text-decoration: underline; } /* Link settings */

a:hover {color: FF0000; text-decoration: none; } /* Link hover effect */

a:active {color: 0099FF; text-decoration: underline; } /* Active link settings */

a:visited {color: C0C0C0; text-decoration: underline; } /* Visited settings */

 

table.main-table {

border:none;

width: 984px;

border-collapse: collapse;

cellspacing: 0px;

background color: #FFFFFF;

font-family: arial;

font-size: 12px;

color: #000000;

text-indent: 0px;

text-align: justify;

} 

 

td.page-title-cell {

width: 984px;

height: 44px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background: #3C97FF;

vertical-align: top;

font-family: arial;

font-size: 35px;

color: #FFFFFF;

text-indent: 3px;

text-align: justify;

}

 

td.presentation-cell {

width: 984px;

height: 160px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background: #2A72D9;

vertical-align: center;

font-family: arial;

font-size: 12px;

color: FFFFFF;

text-indent: 10px;

text-align: justify;

margin-top: 0px;

margin-right: 5px;

margin-bottom: 0px;

margin-left: 0px;

}

 

td.left-border {

width: 5px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background-image: url('left-grey-vertical-line.gif');

font-family: arial;

font-size: 5px;

color: #000000;

}

 

td.right-border {

width: 5px;

border-top: 0px none;

border-left: 0px none;

border-right: 0px none;

background-image: url('right-grey-vertical-line.gif');

font-size: 5px;

color: #000000;

}

 

</style>

 

[haku]

Post a link to the site. If you don't have a server, there is lots of free hosting out there.

[kylecooper]

 

  My site is not online yet. This is just the code... this will be in it.

  Anyway, the site/server wouldn't have anything to do with the margins...

 

  So here must be somethin' with the CSS coding... I must have made a mistake

[haku]

I'm not saying it has anything to do with the server, but without a live link, we can't see what is happening.

 

There is lots of free hosting. Find a site, post your page. Easy as pie.

[GameYin]

Try setting the margin for everything.

[kylecooper]

 

  Hello,

 

  Well, I tried setting the same margin for all at "p", but it mixes everything else up: backgrounds get mixed up, certain cells get distorted (compared to others, these get smaller), other settings disappear (such as image vertical spacing, which initially worked)... the right edge thing works, though

 

  I need to find a way for it to work without destroying everything...

 

  Oh and,... well my site is so basic, I'm just struggling with a standard page look, isn't worth putting online...

 

  If there would be a way to make the right margin work for 1 cell only...

 

  Hmm  :-\

 

[ToonMariner]

Fairly sure that table cells don apply margins - its cell-spacing that dictates this and even then thats not well supported in IE.

 

If this were tabular data I'd be asking why the hell you'd want this 'margin' on a cell and if its for layout then you have just created a site that will be incredibly hard to manage....

[TheFilmGod]

^^ Words of wisdom! 

 

Just specify

 

padding: 0 5px 0 0;

 

Margin doesn't work in this instance as there isn't a correct width for the text block you want to move. Margin is used to space elements on a page and not to "pad" things.

[kylecooper]

Toon Mariner,

 

The site will not be "hard to manage". It will only be a big site with righ content.

 

Why is there a right margin?

 

Simple: I don't want the text inside a cell "collide with"/"stick" to the right edge...

 

 

[haku]

I don't want the text inside a cell "collide with"/"stick" to the right edge...

 

If you had just said that in your first post, someone could have given you an answer much quicker.

 

Solution: Apply right padding to the cell, not a right margin.

 

[ToonMariner]

The site will not be "hard to manage".

 

Yes it will...

[TheFilmGod]

 

Just specify

 

padding: 0 5px 0 0;

 

Margin doesn't work in this instance as there isn't a correct width for the text block you want to move. Margin is used to space elements on a page and not to "pad" things.

 

Doesn't this answer your question? I have posted this over a day ago.