By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,813 Members | 1,236 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,813 IT Pros & Developers. It's quick & easy.

No bottom margin in Opera 7

P: n/a
Hi, I'm a CSS noob, and I'm trying to implement a very basic layout but am
having problems in certain browsers.

Basically, I want a horizontally centred box with a fixed width of 750px,
with a 100px high header, a 50px high footer, and a contents box that grows
to fit the contents. I also want a margin at the top and bottom of the
centred box of a fixed height (30px).

I have the following HTML file which gives the desired results in Internet
Explorer 6, Mozilla 1.7.5, and Firefox 1.0 (all tested on Windows XP SP2).

However, in Opera 7.54, there is NO margin at the bottom of the window.
Instead, the footer hugs the bottom of the browser window. I've been trying
to work out why this is happening for a few days now, but I don't know
what's going on. What am I doing wrong?

Here is the code you can just copy into an HTML file to view the results:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Box Test</title>
<style type="text/css">

html {
height: 100%;
max-height: 100%;
margin: 30px 0px;
padding: 0;
}

body {
height: 100%;
max-height: 100%;
padding: 0;
font-family: Verdana, sans-serif;
font-size: small;
text-align: center;
line-height: 1.5em;
color: #333;
background: #ddd;
}

#box {
height: auto;
width: 750px;
margin-left: auto;
margin-right: auto;
padding: 0;
font-size: 95%;
text-align: left;
border-left: 1px solid #000;
border-right: 1px solid #000;
background: #fff;
}

#header {
height: 100px;
padding: 0;
margin: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
background-color: #EFF7FE;
}

#content {
margin: 0;
padding: 0px 20px;
}

#footer {
height: 50px;
margin: 0;
padding: 10px;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
color: #FFF;
background-color: #000;
}

</style>
</head>
<body>
<div id="box">
<div id="header"></div>
<div id="content">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Jul 21 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Blacksmith wrote:
Hi, I'm a CSS noob, and I'm trying to implement a very basic layout but am
having problems in certain browsers.
me 2
I also want a margin at the top and bottom of the
centred box of a fixed height (30px). However, in Opera 7.54, there is NO margin at the bottom of the window.
Instead, the footer hugs the bottom of the browser window. I've been trying
to work out why this is happening for a few days now, but I don't know
what's going on. What am I doing wrong?

html {
margin: 30px 0px;
padding: 0;
}

body {
padding: 0;
}


i have no Opera, but i would suggest to set padding and margin in body
instead of html.

html {
/* nothing */
}

body {
padding: 30px 0px;
margin: 30px 0px; /* set either padding or margin, try your luck */
}

if this doesnt work, please ignore this post
Jul 21 '05 #2

P: n/a
"Blacksmith" <in*****@email.address> wrote:
Here is the code you can just copy into an HTML file to view the results:


Provide an url instead, it's easier for us and better since it includes
variables otherwise unknown.

--
Spartanicus
Jul 21 '05 #3

P: n/a
hey, that actually worked! thanks very much.
"Ali Babba" <Al******@40Bandits.com> wrote in message
news:cu**********@news.hispeed.ch...
Blacksmith wrote:
Hi, I'm a CSS noob, and I'm trying to implement a very basic layout but
am having problems in certain browsers.


me 2
I also want a margin at the top and bottom of the
centred box of a fixed height (30px).

However, in Opera 7.54, there is NO margin at the bottom of the window.
Instead, the footer hugs the bottom of the browser window. I've been
trying to work out why this is happening for a few days now, but I don't
know what's going on. What am I doing wrong?

html {
margin: 30px 0px;
padding: 0;
}

body {
padding: 0;
}


i have no Opera, but i would suggest to set padding and margin in body
instead of html.

html {
/* nothing */
}

body {
padding: 30px 0px;
margin: 30px 0px; /* set either padding or margin, try your luck */
}

if this doesnt work, please ignore this post

Jul 21 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.