I have completed (for the most part) my first website using Dreamweaver.
However, I have a small problem: When previewing the site in IE 6, it looks
like how i want it to (like it does in Dreamweaver). When I preview it in
Firefox, the top of the site (the navigation and images) are pushed away from
the top of the browser. Also, the main content/ text (everything under the
navigation/ images, including league stadings) is pushed down too far. I've
tried changing the valign to top for the navigation and images, but then it
only aligns the image on the right (the red/white helmet) to the top. And i
can't find a way to make it so it doesn't push the content down as far as it
does. Here's a link to the site: http://www.waterloowarriors.ca Compare the
site in Firefox and IE, you'll notice that Firefox pushes the content away and
doesn't align to the top (as if the navigation and images had a border/ padding
on the top/bottom, but they don't)

I have the same problem,but mine is with IE . I open up my website in Firefox and it looks great then internet explorer and it looks weird.

Hello,

Different browsers have different default margins for certain tags, such as
p li form h1, h2, h3, h4 and h5, for example.
If you don't set margins for these in your CSS, the browser uses it's
default margin.

You are seeing your images pushed down in FF because you have them in a p
tag.
FF is using it's default margin for the p tag which is different than IE as
you have no margin defined for the p tag.
Actually, there is no need for the p tag there, so just remove it as well as
the white space between the closing </p> and </td> in that cell.

"Welcome to waterloo..." is further down in FF because, again, FF is using
it's default margin for the h5 tag which is bigger than IE's default margin.
You just need to give h5 a margin value so it's the same cross browser:

Change this:

#topp #mainp #mid h5 {
font-family: Helvetica, sans-serif, "Arial Black";
font-size: 14px;
font-style: normal;
font-weight: 200;
color: #800000;
}

To this:

#topp #mainp #mid h5 {
font-family: Helvetica, sans-serif, "Arial Black";
font-size: 14px;
font-style: normal;
font-weight: 200;
color: #800000;
margin: 5px;
}

Adjust as needed.

Same with your other H tags.
Give them each a margin in the CSS.
For example, make the H2 tag:
:
#mainp h2 {
font-family: "Century Gothic", Verdana;
font-size: 20px;
font-weight: bold;
background-position: center;
word-spacing: 0px;
display: block;
color: #8B6508;
margin: 5px;
}

A few tips, if I may.

You have a lot of extraneous code in your CSS.
For example, instead of having font-family: Helvetica, sans-serif, "Arial
Black"; in every rule except mainp H2, just add that to the body CSS. It
will apply to everything except where told to use a different font, like the
H2 rule.

Also, there is some handy CSS shorthand for margins and padding.

Instead of having:
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;

you can use;

margin: 0px;
This means all four sides are 0.

If you had 4 different margins, such as top 5, right 10, bottom 15 and left
20 you could use:

margin: 5px 10px 15px 20px;

Think of a clock to remember the order: top (12:00) , right (3:00) ,
bottom (6:00) , left (9:00).

If you have top and bottom the same at 10px, and left and right the same at
20px, it is:
margin: 10px 20px;

If any of the four values are missing, it knows to make whatever is missing
the same as the opposite direction. Bottom and Left values are missing in
this example, so it knows bottom is the same as the top at 10px and left is
the same as the right at 20px.

Take care,
Tim




"Twinbird24" <webforumsuser@macromedia.com> wrote in message
news:fo315b$27u$1@forums.macromedia.com...
>I have completed (for the most part) my first website using Dreamweaver.
> However, I have a small problem: When previewing the site in IE 6, it
> looks
> like how i want it to (like it does in Dreamweaver). When I preview it in
> Firefox, the top of the site (the navigation and images) are pushed away
> from
> the top of the browser. Also, the main content/ text (everything under the
> navigation/ images, including league stadings) is pushed down too far.
> I've
> tried changing the valign to top for the navigation and images, but then
> it
> only aligns the image on the right (the red/white helmet) to the top. And
> i
> can't find a way to make it so it doesn't push the content down as far as
> it
> does. Here's a link to the site: http://www.waterloowarriors.ca Compare
> the
> site in Firefox and IE, you'll notice that Firefox pushes the content away
> and
> doesn't align to the top (as if the navigation and images had a border/
> padding
> on the top/bottom, but they don't)
>

On Sat, 2 Feb 2008 23:27:45 -0500, "TC2112" <nospam@nospam.com> wrote:




>A few tips, if I may.
>
>You have a lot of extraneous code in your CSS.
>For example, instead of having font-family: Helvetica, sans-serif, "Arial
>Black"; in every rule except mainp H2, just add that to the body CSS. It
>will apply to everything except where told to use a different font, like the
>H2 rule.
>

Indeed - and more than that - I was once advised by a css guru over on
the css list to do something like this - to ensure everything is set
to a known standard:



body {
font: normal 13px/normal Geneva, Arial, Helvetica, sans-serif;
text-transform: none;
color: #000000;
margin: 0;
padding:0;
border-width: 0;
background-color: gray;
letter-spacing: normal;
text-indent: 0px;
vertical-align: middle;
word-spacing: normal;
white-space: normal;
border-style: none;
min-height:100%;
margin-bottom:1px;
}


p, td, th, div, blockquote, ul, li, dl, ol { font-size: 1em; }
p, td, th, blockquote, ul, dl, ol { margin: 0.65em 0;}
h1, h2, h3, h4, h5, h6 { font-family: "Times New Roman", Times, serif;
font-weight:bold;}

h1 { font-size: 1.5em; margin: 0 .25em 0.65em 0; }
h2 { font-size: 1.2em; margin: 0 .25em 0.65em 0; }
h3 { font-size: 1.1em; margin: 0.25em 0; }
h4, h5, h6 { font-size:1em; margin: 0.2em 0;}
--

~Malcolm N....
~

Thanks for all your help, I'll use your advise next time a make a site in Dreamweaver.

On Sun, 3 Feb 2008 08:07:16 -0500, "Murray *ACE*"
<forums@HAHAgreat-web-sights.com> wrote:

>
>This is pretty verbose and redundant. All you would really need would be
>this -
>

Not arguing Murray - I forget who it was - but certainly a well known
CSS figure - it might even have been Eric Meyer himself.

He shows an even more verbose sample style sheet in appendix C of CSS
Definitive guide :-))



>> h1 { font-size: 1.5em; margin: 0 .25em 0.65em 0; }
>> h2 { font-size: 1.2em; margin: 0 .25em 0.65em 0; }
>> h3 { font-size: 1.1em; margin: 0.25em 0; }
>> h4, h5, h6 { font-size:1em; margin: 0.2em 0;}
>
>These look useful, though.

Yes I have these styles as standard

--

~Malcolm N....
~

I have this problem only when using Firefox