CSS Layout Problem 1

[Borvik]

I have been working on a site design - relying only on CSS (first time so...).

I got the site to look the way I wanted in both IE and FireFox (wow! most compatable and least). However when I view in Opera it doesn't work quite right.

Here is a link to the site:

http://www.stdominion.net

And here is a link to the screenshot of Opera.

http://borvik.gotdns.com/screens/opera_screen.bmp

Notice the black gap. The scrollbar - when applicable - show up to the left of that black gap as well.

Anyone have any ideas on how to fix the Opera problem?

 

[Vragabond]

I cannot see your Opera image, the website times out but by your description I would say you're talking about the gap around the page. This is because every browser puts this gap by default but IE and FF use margin on the body to create the gap while Opera uses padding. You reset the margins to 0, but not padding. Add padding to body declaration and the gap should go away:

body {
 margin: 0;
 padding: 0;
 background: #000;
 height: 100%;
}

 

[Borvik]

Thanks!

That worked like a charm. Now if only opera would refresh the div sizes when you resize the window. Oh-well. At least it doesn't break the page anymore.

Thanks a ton.

 

[taylorantone]

Just a tip:

The web and .bmp files don't play well together. Go with .jpg for images and .gif for small stuff.