Forums | MacLife

Short Circuit · 2003-12-02 2:35 pm

Hi!

I recently discovered that you CAN center layers /boxes (weeeee!!) but I hit a snag, I cant place them at a set height.

I try to use this code:

Code:

#main {
visibility: visible;
width: 642px; 
height: 332px;
margin: 0px auto;
margin-top: 63px;
}

..and for some odd reason it wont work in Safari or IE but it works in Mozilla.
What is even more odd is that this code:

Code:

#layer1 {
background-color: #000;
visibility: visible;
width: 200px; 
height: 100px;
margin: 0px auto;
margin-top: 50px;
}
#layer2 {
background-color: #FFFFFF;
visibility: visible;
width: 198px; 
height: 98px;
margin: 0px auto;
margin-top: -99px;
}

Works in all browsers... confused

Aye, its drivin' me nuts!

W

Zalgren · 2003-12-02 10:41 pm

You might want to try including padding in your style sheet.
Some browsers use the margin while others use the padding.

If I remember correctly gecko based browsers will use the margin while others (like IE) will use the padding.

Just something for you to play with.

-Ed

Gipetto · 2003-12-03 12:01 am

I think your margins are causing problems.
What I think might be more compatible with that technique would be:

Code:

margin-right: auto;
margin-left: auto;
margin-top: 50px;

When you define 2 dimensions in a margin setting, the first will be applied to the top and bottom while the 2nd is applied to left and right. If you define 3 settings, it'll apply them in this order: top, left & right get the 2nd value, then bottom. If you supply 4 values it'll go as top, left, right, bottom. So that part is right.

But when you define a 'margin: 0px auto' and then do 'margin-top: 50px' you might override the previous margin setting.

I've used the above technique and it works. I can't remember, but I might have put that inside a container first. I think I made a generic div that just centered the content, which cleaned up for 1 occaision where it didn't work.

So really, I just typed way more than I needed - try making a div that encompases all your content and that has a centering command in it.

Hope that makes sense

Short Circuit · 2003-12-03 3:10 pm

kinda...

you see the code works as such, but in the first instance the top margin varies from browser to browser, while in the second, it is perfect in all browsers that I have tried.

Thats where the dog is buried!

W

Forums | MacLife

#1 2003-12-02 2:35 pm

CSS: absolute height margin, but relative widht ?

Code:

Code:

#2 2003-12-02 10:41 pm

Re: CSS: absolute height margin, but relative widht ?

#3 2003-12-03 12:01 am

Re: CSS: absolute height margin, but relative widht ?

Code:

#4 2003-12-03 3:10 pm

Re: CSS: absolute height margin, but relative widht ?

Board footer