STS Template Info box positioning

[rhubarb]

I've recently noticed that whilst creating a site with STS Templates that the spaces between info boxes (left and right) have increased and I'm struggling to find what's caused it.

 

I had made some additions to the stylesheet namely a TD class and some paragraph classes so I immediately thought that would be the cause. So I replaced the stylesheet with the original which changed the colours but had no effect on the spacing of infoboxes (in the vertical).

 

I then tested some changes in the sts_template.html. I tried to add a class ref to the <p> tag for each infobox where the class in the stylesheet had a small font size, but no change. If I remove the <p> tags then there is no space between boxes.

 

Can anyone advise how the spacing should be controlled please?

[paulm2003]

Better use the <div> tag.

 

A <p> tag has margins by default, div's don't. And <p> tags are not allowed to contain block elements, div's are.

 

Only use <p> tags for text paragraphs.

[rhubarb]

Can the margins of a <p> tag be controlled?

 

I understood <div> blocks were layers, I can't remember if they behaved slightly differently in Netscape?

[paulm2003]

Can the margins of a <p> tag be controlled?

sure they can

stylesheet example

p {
margin: 0;
padding:100px;
}

and the default margins are gone, and you have a huge padding

 

Don't think you could say div's are layers, but they surely are blocks that can be layered.

 

To be precise block elements like div's behave different in most IE versions (it is one of those nasty IE bugs :( ). If you don't want trouble unfortunately (thanks to MS) you only can assign margins to div's. Or make sure you know all about the subject to make them cross browser comp.. The padding and borders are very different, they are in or outside the box depending on browser, browser version and browser mode (the last two also for recent IE versions). If you use thin borders (1px) nobody will notice I think. But a 1px padding is quite useless of course.

 

Not 100% sure, but I think p tags also have this IE padding and border problem, but td's don't.

 

(I assume you did not mean NN4, don't use div's on NN4, or better don't use anything on NN4)

[paulm2003]

Correction: padding and borders are not in or outside the box. But the size of the box is:

outer boxwidth=width+padding+borders

inner width=width

("Normal": width is the inside size)

or:

outer boxwidth=width

inner width=width-padding-borders

(Several IE versions: width is the outside size, borders and padding are substracted from the inside space)

 

Confusing?

[rhubarb]

The margin property of the <p> tag solved my problem with the verticl spacing of the boxes, although I seem to have lost my right margin to the right hand column of boxes. There are so many properties in so many files!

 

I've tested html and dhtml between IE and N4 before and, due to the frustrating compatibility issues, I now assume 90% of people viewing my sites are atleast using IE.

 

Thanks for your help!

[paulm2003]

Hi not sure if this is what you are looking for but you can set different margins for:

 

top, right, bottom, left

 

p {
margin: 0 5px 0 5px;
}

 

The danger of creating pages for IE only is that you are working around IE bugs without knowing and that can make your pages look very weird in all other browsers (even make unusable). I would not worry about NN4, but checking new versions of some new versions of major browsers like Mozilla and Opera and IE is what everyone that creates websites should do I think.

Edited January 16, 2004 by paulm2003

[rhubarb]

Thanks for the tip on margins. Yes the effects in other browsers can be surprising. I guess you're right about Mozilla and Opera, I'm sure I've got a copy of each somewhere.

[paulm2003]

You can download Mozilla at www.mozilla.org :)

It is a very pleasant browser, sometimes I have to use IE for a moment but.......... :(

There also are some very usefull free tools for webdevelopment available for Mozilla like http://placenamehere.com/pnhtoolbar/ . You can for example view all table cells or other block elements on the page you are working on with one click! Very handy when you are positioning infoboxes for example (to get back to the topic).

Edited January 17, 2004 by paulm2003