|
|
Posted by GTalbot on 01/01/08 21:15
On 1 jan, 07:59, Bazley <jmp6...@hotmail.com> wrote:
> I have added margin-bottom: 30px; to the 'main' div (all code below),
> in an attempt to leave 30 px permanently at the bottom of the page.
> But when the content of the main div extends beyond the bottom of the
> screen and a scroll bar appears, it stops scrolling after the border
> of main and ignores the margin. What's the problem? Thanks!
Hello Bazley,
It is always better and preferable to upload all your code into a
webpage and then just post an url to such webpage. Over here, I have
to do all that so that I can examine your webpage. Other readers of
your post wishing to examine your code and provide some explanations,
feedback have to do the same thing too.
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN"
> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Why a transitional DTD? Your HTML document is certainly, definitely
new.
Also, why XHTML... if you are going to serve that HTML document as
"text/html" and not as "application/xhtml+xml"?
> <html xmlns="http://www.w3.org/1999/xhtml">
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>mysite</title>
> <link rel="stylesheet" type="text/css" href="mysite.css" />
Is all your CSS code in the sample below .. or is there more in
mysite.css? Again, uploading your code into a webpage and then posting
an URL would be better for everyone.
> </head>
> <body>
> <div id="main">
>
> help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
>
> help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
>
> help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
>
> help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
>
> help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>help<br>
> </div>
> </body>
> </html>
>
> html, body, main {
> margin: 0;
> padding: 0;
> border: 0;
>
> }
By default, the html element does not have any margin, padding and
border in all modern browsers. You're unneedlessly over-declaring
here.
If you explicitly and specifically want a "30 px permanently at the
bottom of the page", then why do you set all 4 margins of the body
element to 0?
Is it main or #main ? Your CSS code as posted has a parsing error.
>
> html {
> height: 100%;
>
> }
>
> body {
> height: 100%;
> background-color: black;
>
> }
>
> #main {
> position: relative;
> top: 0px;
> margin-left: auto;
> margin-right: auto;
> margin-top: 15px;
> margin-bottom: 30px;
You are re-declaring the 4 margins of your #main node here, otherwise
you had earlier a CSS syntax error.
> width: 300px;
> min-height: 750px;
1- If you want the root element and the body element to fill the
user's browser window viewport's height, then why do you set the #main
to a min-height value? Your CSS declaration is not coherent with the
CSS rules before.
2- If you want the root element and the body element to fill the
user's browser window viewport's height, then why don't you remove the
#main node and transfer its declarations to the body node? Your #main
node duplicates entirely the purpose and function of the body node in
your code. Your DOM tree could be reduced here.
3- if you explicitly wanted to remove the margin-top and margin-bottom
to the body node, then why do you later explicitly set, add a margin-
top and a margin-bottom to the #main node? What you are doing does not
seem to me to be perfectly coherent... otherwise your stylesheet and
DOM tree could be optimized, more compact.
> border: 5px solid aqua;
> background-color: teal;
>
> }
Regards, Gérard
--
Internet Explorer 7 bugs
http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/
[Back to original message]
|