Why I get a top margin. Going crazy here. Need some help, please.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

shapper - 27 Dec 2006 23:57 GMT

Hello,

I am creating a centered web site with various div's inside the main
(pBase) div.

Somehow, I am getting a gap on the top of my browser window both in IE
and Firefox.

I tried everything I could think of. Here is my entire HTML code:

<!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>Test</title>
</head>
<body style="text-align: center">
<div id="pBase" style="clear:both; margin: 0px auto; text-align:left;
width:960px">
    <div id="pHeader">pHeader</div>
    <div id="pContent">
        <div style="clear:both"></div>
        <div id="pLogo" style="float:left;width:107px;">Logo</div>
        <div id="pMenu" style="float:left;width:600px;">Menu</div>
        <div style="clear:both"></div>
        <div id="pWhatsUp" style="float:left;width:647px;">WhatsUp</div>
        <div id="pLogin" style="float:left;width:100px;">Login</div>
        <div style="clear:both"></div>
        <div id="pLeft" style="float:left;width:100px;">Left</div>
        <div id="pCenter" style="float:left;width:100px;">Center</div>
        <div id="pRight" style="float:left;width:100px;">Right</div>
        <div style="clear:both"></div>
    </div>
    <div id="pFooter">pFooter</div>
    </div>
</body>
</html>

Could someone please help me out? I don't know what else to try!

Thanks,
Miguel

Reply to this Message

dorayme - 28 Dec 2006 00:25 GMT

In article
<1167263829.760926.154210@79g2000cws.googlegroups.com>,

> Hello,
>
[quoted text clipped - 5 lines]
>
> I tried everything I could think of. Here is my entire HTML code:

> Could someone please help me out? I don't know what else to try!

I cannot make head nor tail of what you are doing really? But if
you want to be rid of gaps at the top try

<body style="margin:0;padding:0;>

at least...

You id things but there is no css sheet... Perhaps post a url.

Signature

dorayme

Reply to this Message

shapper - 28 Dec 2006 01:00 GMT

Hi,

I am not using CSS because I added all CSS styles in HTML code.
I tried your suggestion. I keep having the gap on the top.

Any idea?

Thanks,
Miguel

> In article
> <1167263829.760926.154210@79g2000cws.googlegroups.com>,
[quoted text clipped - 19 lines]
>
> You id things but there is no css sheet... Perhaps post a url.

Reply to this Message

shapper - 28 Dec 2006 01:04 GMT

In fact it does work. I needed to clear the browser cache.

One question I have is:
Should I use a container around divs which float left?

I always get different answers or opinions.

I am a little bit lost about it since it is working in Firefox 2.0 and
IE 6.0 without the container.

Thanks,
Miguel

> Hi,
>
[quoted text clipped - 29 lines]
> >
> > You id things but there is no css sheet... Perhaps post a url.

Reply to this Message

dorayme - 28 Dec 2006 01:23 GMT

In article
<1167267841.979049.18160@79g2000cws.googlegroups.com>,

> > > I cannot make head nor tail of what you are doing really? But if
> > > you want to be rid of gaps at the top try
[quoted text clipped - 4 lines]
> > >
> > > You id things but there is no css sheet... Perhaps post a url.

> In fact it does work. I needed to clear the browser cache.
>
[quoted text clipped - 5 lines]
> I am a little bit lost about it since it is working in Firefox 2.0 and
> IE 6.0 without the container.

First, please do not top post (fixed slapdashedly by me here...).

Your code snippet does not, of itself, exactly show what you are
wanting to do, it produces a few words here and there. Please
provide a URL and some good description of what you are meaning
to do to help out.

What is this business of fixing some item 960px to the right?
What about those with smaller screens.

Frankly, scrap the lot and look at some template you like and go
from there.

Signature

dorayme

Reply to this Message

shapper - 28 Dec 2006 01:47 GMT

Hi,

I will try to explain it better:

I am trying to create a centered web site with 3 main sections:
header, content and footer.

HEADER
CONTENT
FOOTER

All these sections should be 960px width.

Inside content section/div there will be various sections/divs using
the following layout:

Here is a drawing of the design inside CONTENT:

LOGO (width=107px) MENU (width=600px)

WHATSUP (width=647px) INSIDE
(width=100px)

LEFT (width=100px) CENTER (width=100px) RIGHT
(width=100px)

Basically that's it.

The words I added to my code is to identify where each div is going.

Could you give me some feedback about my code?

Thanks,
Miguel

> In article
> <1167267841.979049.18160@79g2000cws.googlegroups.com>,
[quoted text clipped - 33 lines]
> Frankly, scrap the lot and look at some template you like and go
> from there.

Reply to this Message

dorayme - 28 Dec 2006 02:16 GMT

In article
<1167270470.121375.142210@79g2000cws.googlegroups.com>,

> I am trying to create a centered web site with 3 main sections:
> header, content and footer.
[quoted text clipped - 4 lines]
>
> All these sections should be 960px width.

You continue to top post, please don't as it makes it harder for
many people here on their newsreaders.

You don't address my warning and question about the 960px. we
need to get this straight before plunging into actual mark up. It
is an important overall question.

Signature

dorayme

Reply to this Message

Beauregard T. Shagnasty - 28 Dec 2006 01:54 GMT

> Hi,
>
> I am not using CSS because I added all CSS styles in HTML code.
> I tried your suggestion. I keep having the gap on the top.

It works for me, with your code. Add this in the <head> section:

<style type="text/css">
body { margin: 0; padding: 0; }
</style>

Why is your new document using a Transitional doctype? That's for ..
well .. transitioning old documents. You should use Strict.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Please don't top-post. Thanks.

Signature

-bts
-Motorcycles defy gravity; cars just suck

Reply to this Message

shapper - 28 Dec 2006 02:06 GMT

Sorry,

but what do you mean with top-post?

Thanks,
Miguel

> > Hi,
> >
[quoted text clipped - 14 lines]
>
> Please don't top-post. Thanks.

Reply to this Message

dorayme - 28 Dec 2006 02:23 GMT

In article
<1167271568.280356.207190@h40g2000cwb.googlegroups.com>,

> Sorry,
>
> but what do you mean with top-post?
>
> Thanks,
> Miguel

Ah! OK, fair enough...

Top posting is posting your reply before quoting what you are
replying to.

(btw, as they say, Google is your friend, try "top posting", this
one is not too bad:

<http://en.wikipedia.org/wiki/Top-posting>

and discusses some issues)

Signature

dorayme

Reply to this Message

shapper - 28 Dec 2006 02:55 GMT

> In article
> <1167271568.280356.207190@h40g2000cwb.googlegroups.com>,
[quoted text clipped - 10 lines]
> Top posting is posting your reply before quoting what you are
> replying to.

Ok, thanks for the info.
Let's see If I am getting this right. :-)

Thanks once again,
Miguel

> (btw, as they say, Google is your friend, try "top posting", this
> one is not too bad:
>
> <http://en.wikipedia.org/wiki/Top-posting>
>
> and discusses some issues)

Reply to this Message

dorayme - 28 Dec 2006 03:27 GMT

In article
<1167274516.478552.325780@79g2000cws.googlegroups.com>,

> > >what do you mean with top-post?

> > Ah! OK, fair enough...
> >
[quoted text clipped - 3 lines]
> Ok, thanks for the info.
> Let's see If I am getting this right. :-)

Actually, you are doing even better now, answering in context, a
variation on bottom posting :-)

> > (btw,

Signature

dorayme

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2006

Why I get a top margin. Going crazy here. Need some help, please.