Redesign -- Strange Css

[schussat]

Hi all-

 

I became discontent with my old blog design, so I've been tinkering with a new one that you can see at schussman.com/testbed. I'd love to have any feedback!

 

But the real purpose of this post is to share a strange CSS situation. To format paragraphs in the main column of the new design (the gray column on the left) I have this code:

>#maincolumn p {
margin: 0 230 10 10;
padding-top: 5px;
text-align: left;
}

 

This works perfectly when I mock up the site on my local PC. The margins are all good. But I have found that when I put the site online, the "margin: 0 230 10 10;" line doesn't work. I've had to replace the above code with:

>#maincolumn p {
//margin: 0 230 10 10;
margin-left: 20px;
margin-right: 240px;
margin-bottom: 10px;
padding-top: 5px;
text-align: left;
}

 

in order to get the margins that you see on the testbed page. Has anybody ever encountered something like this? I wonder if Textpattern does something strange when it puts the page together -- but, that doesn't seem likely, as all Txp does is load the stylesheet, as far as I know. I'd be interested to hear any suggestions as to why this takes place, and, of course, I'm really interested in hearing if this design totally breaks your browser!

 

-Alan

[borfast]

Alan, that's a strange thing. The first form of the margin property is it's "short form", meaning that in effect, the browser should translate it to the second form you pasted.

 

The only thing I notice is that on the short form you don't specify the units you want to use (px) but if your browser gets those correctly when loading the page from your disk, it should also load them correctly from your online account (theoretically, at least).

 

Try adding the units specification to the short form and see if it solves the problem.

[schussat]

Good suggestion, Raul! Adding the unit to the short form line seems to do the trick! I don't have any idea why it works locally without the units specified, but fails when it's remote. At any rate, it looks like I'm good to go now.

 

Thanks for the help.

[TCH-Dick]

Always put the unit, all tags vary but margin can be set to px,%, or auto.

Also when you comment out something in CSS use the following format.

>/*comment*/

In this section:

>#container {
width: 760px;
margin: 10px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

margin: 10px; is controlling all four sides.You need to remove margin-right and margin-left.

I sent you a PM, I hope it helps. The only thing is, I did not make the above change in the one I sent you.

[borfast]

Good catch, Dick, I didn't notice those two