I have just started on what I think is a simple CSS page, it appears OK on IE but not on Firefox.

Are there any steps or rules that one must adhere to or apply before putting in the codes so that the
page will appear well on all browsers? I think I must have missed out something simple and yet
fundamental before I commenced.

Please help.

Hard one to answer without something to look at or reference.

When you say simple just how simple. If it is a plain-jane simple page then there shouldn't be a problem unless you have missed something in your coding. IE is more forgiving then FF.

Can you post a link to the page for viewing?
If not can you give us the CSS and the HTML here.

The URL is: http://www.golfntours.com/en/golftips2.php

Please scroll down to the footer and see the content
from the Content Div overlapping on the content of the
Footer Div

I think this error may be your problem:

class=bottommenu01 Should be: class="bottommenu01"

There's another one like it near the top of the page. topmenu, I think, from memory. I'd be going over the whole page.

Best wishes,
Laurie.

As Laurie suggested, go through and insure all your class and id declarations have the quote marks.

In looking over the styling you have declarations that are fighting each other. The content is not overlapping the footer the footer is being place over the content. You have a div that is canceling out other style declarations.

In the style sheet, in #pgfoot replace the position:absolute with position:relative, remove the position declarations so all you have is position:relative; width:790px;

In the style declarations for your "denounce statement" delete text-align:right;

You can remove the div styling for the copyright and address information, it is not needed.

On another note to help make things easier get in the habit of doing all your coding in lower case, and not capitals or a combination of both.

to fix the golfer images, I'd put the attribute "clear:left;" in the style section of the div closest to those images.  What this does is insure that the division doesn't come up beside an object that is floated left.  It will force it down to the next line.  I'd also put <br style="clear:left;" /> just before the end </div> to correct the bottom line.  Divs are notorious in that if you float an object inside it, the bottom won't necessarily wrap around the bottom.  Putting that break with clear:left, clear:right, or clear:both (depending on what objects you have floating in the div) forces it to reach down to the bottom of the break.

Thank you all Gurus,

Laurie

class=bottommenu01 Should be: class="bottommenu01"

You are right. I do that too. But, these coding things never fail to amaze me.
This class without "  " has been applied since the site was first made by a contracted web designer. It's in all the pages. It doesn't seem to cause any problem. I did not bother to check either. I do not know why.


coloEagle

in #pgfoot replace the position:absolute with position:relative,

I have followed your suggestion, please see page again at http://www.golfntours.com/en/golftips2.php
The dark area (the footer div) now follows the clearance of the Content Div (10px) when it should be only 5px.
In fact it was at this point that I decided to try using position: absolute before I was forced to consult the forum.
We are back to the square one.

[Have to go now. Will come back.  Thanks alot.]

You've missed applying or changing a couple of things.
See http://validwebdesigns.com/construction/golf/index.html the only changes I've made are those suggested earlier.

You have a few CSS coding errors that need correcting such as:
In your wrapper styling you have left-margin:100px this should be (if needed) margin-left:100px
Some of these errors may be creating you other errors causing you to make style declarations in other areas you may not need.

Take a look at your CSS check at http://jigsaw.w3.org/css-validator/vali … ftips2.php

Ah, golfntours. G'day, Mate.

Laurie

    class=bottommenu01 Should be: class="bottommenu01"

You are right. I do that too. But, these coding things never fail to amaze me.
This class without "  " has been applied since the site was first made by a contracted web designer. It's in all the pages. It doesn't seem to cause any problem. I did not bother to check either. I do not know why.

It doesn't seem to cause any problem.

Well, it does, actually. In fact, all of those classes with these coding errors are not working. That's where your problem lies. You have what we in Australia call a "stuff up." You'll need to go through the whole site and fix it.

Because I'm such a generous bloke, I'll show you the easy way to establish whether or not what I've said is correct, for yourself. No doubt about it then, huh?

Go to this page: http://www.w3schools.com/css/tryit.asp? … n_relative

You'll see the following code in the left panel:

<h2>This is a heading in normal position</h2>

<h2 class="pos_left">This heading is moved left to its normal position</h2>

<h2 class="pos_right">This heading is moved right to its normal position</h2>

Have a look at the position of the three headings in the right panel.

Now edit the second and third h2 in the above quoted code, removing one quote mark from each. Then click the button that says "edit and click me."

When the page has refreshed, you'll notice that the position of the second and third headings is now the same as the first one. That's because the two classes that were moving the headings left and right respectively, no longer exist. That's all it takes to destroy a class.

If you wish to follow through on this, give us a hoy and I'll run two possible ways past you, to fix the stuff up, with the minimum of effort. Your other alternative may be to put it onto your contractor. However, I'd be giving him a wide berth, myself.

Regards,
Laurie.

Laurie_m

Fully agree not to mess with missing the closing tag or leaving out a " when there should
be two.

ColoEagle

Have removed the div that was not necessary.

Steven_A_S

Have added <br style="clear:left;" /> to the end of the div before the Footer Div

But have a look at these:

(1) http://www.golfntours.com/en/golftips2.php
This is the original one with the problem. Scroll down to the footer and notice the
Footer Div (dark green area) not fitting in as in the Header Div (with 5px clearance).

(2) http://www.golfntours.com/en/golftips3.php
I reduced the content in (1) above so the entire file size is now about 20Kb (while (1)
is about 40Kb) and wallah, the Footer Div appears OK!  How's that possible?

Hope you are all seeing the same thing as I do on IE. Have to fix this problem on IE
first before coming to FFox.
Many thanks 

#pgfoot (the division containing your footer) is set to the same width as #wrap (the div containing everything).  The problem is the width attribute doesn't include any margin, padding, or border you may add to an element.  In this case, #pgfoot is inside #content which has a 5px padding so if you want to keep it in #content, you should take 10px off of the width, making it 780px.  Your #pghead on the other hand is just inside #wrap, and has no horizontal margin or padding, so it fits correct.  If you want #pgfoot to fit like #pghead, you may want to take it out of #content.  I hope this makes sense.

Steven_A_S

#pgfoot (the division containing your footer) is set to the same width as #wrap

Side-to-side for:
#wrap - width=790px, padding=5px, border=1px, margin=0, total=802px
#pgfoot - width=790px, padding=0, border=0, margin=0, total=790px

#wrap is supposed to contain 3 distinct divs, namely #pghead, #content and #pgfoot

#pgfoot is inside #content

I thought the <div>...</div> codings would have put all 3 divs distinctly within #wrap.
Please correct if I'm wrong on this.

Why did you say "#pgfoot is inside #content" (I could be missing something here)?

If you want #pgfoot to fit like #pghead, you may want to take it out of #content

I have already added <br style="clear:both;" /> just before </div> for #content just in case the
floats inside #content play up, doesn't this suffice to 'take it out of #content'?

Other:
Much appreciated if you could shed some light on the pages (1) and (2) in my previous reply. Does
file size have bearing on CSS 'reaction'?

Thanks alot.

Sorry, I didn't look as thoroughly at golftips3.php as golftips2.php last time.  In golftips2.php, #pgfoot is inside #content.  In golftips3.php, it's been moved outside #content.  That appears to be what fixed the alignment problem you were having.  But yes, image dimensions can force their way outside of your intended area.

The first tip I gave you (with the <br style="clear:left"> and adding "clear:left" to the style on <div> surrounding the golf swing images) on the 25th was meant to fix the alignment of the series of golf swing images at the top.

Steve

That appears to be what fixed the alignment problem you were having

Both files ( ../golftips2.php and ../golftips3.php) are the same except that I reduced the content
of golftips3 (the golf tips) so that the file size is about 20Kb..I did not do anything to the code..that's why the
question (of mystery). I did nothing to fix anything in case you've mistaken, certainly
not having 'moved the Footer div outside of Content Div' in ../golftips3.php.

As for the images, they appear alright on my IE browser but not on FFox; seems like the width
on FFox is narrower resulting in the right 3 or 4 golfer images falling on the second line. This is another
problem I have to tackle soon as I get the footer right.

Thanks for your time Steve..hope you could help on the footer div thing. That test page (../golftips2.php)
is to become my new template page so I can transfer all the existing pages into the new one for a
faster-loading new look for my site.

Ok, had been looking at the html through the Firebug extension for Firefox.  It's a handy tool for checking out your css, but unfortunately in this case, it tends to clean up code according to how the browser interprets it.

So, I dug into the code for golftips2.php, and here's what I found that pertains to this problem.  In the paragraph that starts "Who's the BOSS?" you have an extra div tag that looks like this: <DIV align=justify>.  There is no matching </DIV> tag for that, so it assumes the next one it sees is its endtag.  Well, the next one it sees is actually supposed to be the endtag for #content.  This prevents #content from being closed before #pgfoot comes up.  So in effect, #pgfoot is inside #content.

In golftips3.php, you left out several paragraphs including the one I mention above, so without that extra div tag, that endtag is assumed to be for #content like it should be.

Steve_A_S

Thank you ( and all the gurus) for your kind advice. The problem is basically solved.
Do accept my apologies for taking up your precious time for some simple errors that
I should have spotted myself before coming here.

IE v FFox

IE is more forgiving. But why is it so difficult to get it right on FFox?
Are there some specific codings for FFox?
Everytime I got it OK on IE; only to find I have to spend lots more time
on FFox to make it OK as well.
Any advice or can lead me to some read-ups?
Thanks

golfntours wrote:

IE is more forgiving. But why is it so difficult to get it right on FFox?
Are there some specific codings for FFox?
Everytime I got it OK on IE; only to find I have to spend lots more time
on FFox to make it OK as well.
Any advice or can lead me to some read-ups?
Thanks

Actually, if you're having trouble with the way a page displays in Firefox, it's probably not showing correctly in other browsers as well.  Internet Explorer is the least standards compliant browser out there right now, so if you are designing for it first, you could still have problems.  Several of us here prefer to design for Firefox first, then fix as needed for Internet Explorer.