Help needed with new website - link not working in FireFox

I'm working on a redesign of our school website. This time I'm doing it properly, trying to learn CSS as I go!

So far only got the first page working but it looks ok, certainly compared to the old website!

Mascalls Website

I've just got one silly problem which I can't work out, but is probably something simple. I've created a basic html link to our Prospectus which is a pdf. The link works in IE, but not in Firefox and I'm not sure why.

Could anyone take a look at my source code and tell me what I've done wrong. Usually setting up links is the easy bit!

(It's line 53 in the source code, and the link is on the 'Prospectus' button at the bottom of the menu on the right)

Thanks,

Tom

Hmmmmm, nice looking page, nice and clean and clear. Not sure about the link problem, maybe Firefox doesn't like the multiple html, head and body tags in one page.

Good point. I'll give that a try. The only reason they are there is becuase I've been using 'Server Side Includes', so it is effectively four pages combined into one. I will take the html, and body tags out of the content pages and see if it makes any difference.

Thanks.

Code:

---

<a href="./pdfs/prospectus.pdf"><img src="buttons/prospectus.jpg" alt="Prospectus" width="164" height="26" border="0"></a>

---

I normally either try it with

Code:

---

<a href="./pdfs/prospectus.pdf">

---

OR

Code:

---

<a href="../pdfs/prospectus.pdf">

---

OR

Code:

---

<a href="prospectus.pdf">

---

Other then that I would use a fully qualified path ie

http://www.yourdomain.sch.uk/pdfs/file.pdf

Other then that I know firefox likes using this sort of path

Code:

---

file:///C:/Documents%20and%20Settings/<USER>/Desktop/content.pdf

---

I think thats more for local files though

Pretty sure the link is ok.
I think the problem is due to the location of the menu div in the source. It's above the "main" div which I imagine is the dynamic part of the template.
As it is above, it is rendered first and positioned, then the main div is rendered later, at full width, effectively on top of the menu div. Firefox is normally pretty good at overcoming odd placements like this (I've not seen a situation before where IE works and FF doesn't) but this is obviously not one of those occasions.

Also, the source is pretty scrappy - there's HTML doctype declarations all over it from your SSIs, plus every include seems to have a 'centering' div, complicating the page.

But then again, I only took a quick look at it... Pretty sure it's a rendering issue, though.

Did you build each part separately then plug them together as indcludes? My approach has always been to create a complete page first, then cut it up into header/menu/footer includes - that way you know you're compiled parts will play nice together.

Give me a shout if you want a hand with anything else.

Thanks abullett.

Yes, this is my first attempt at web design using SSI and CSS, so I'm working it out as I go along and probably not very neatly! I like your idea of getting it all working and then splitting it up. Wish I'd done that. Might start from stratch on it.

My big problem was getting everything to stay relative to the centre of the page and not the top left. I stole some code from someone else who said the only way this could be done was to include a centered wrapper on each page, and stick everything inside it, but I suppose that gets far more complicated when you've got multiple pages using SSI.

Should I get rid of all header information on my includes, and remove the centreing stuff?

Thanks for your advice, and if you know an easy way to make the positioning relative to the centre then let me know!

HTML spec says that there is an absolute maximum of one html tag, one head tag that is then followed immediately by one body tag, and there should only be one doctype tag that the whole thing conforms to.

All your include files don't need that info at all - as abullet says, if you build the complete page and then ltierally just cut and paste out into includes, that's all you need to do. The includes don't need wrapping in all the other stuff as the browser will get all that info from the original/master page.

Also, center tags are bad practice these days :P if you're learning CSS try and use it completely. It's pretty straightforward these days with much better browser implementation; if you want to centre a block element give it the style attribute margin: 0px * 0px *; - you can change the 0px to whatever you need for the top/bottom values respectively, and the * wildcard divides the left/right side equally. This also works with padding if you prefer.

Just had another quick look, and FF may not like the fact the image tag isn't closed with a slash like this:
<a href="pdfs/prospectus.pdf"><img src="buttons/prospectus.jpg" alt="Prospectus" width="164" height="26" border="0" /></a>

This is something you should be doing when using an XHTML doctype. Not sure that it's causing your problem (FF would tell you if it was), but it's good practise ;)

As for the centring business, I normally make the first element on my page a container div that has a set width and is centred. I then put everything else within it.
I haven't looked at how you're centring your divs, but I commonly use:

Code:

---

div#container {
        width:750px;
        margin:0 auto;
}

---

That sets the width of your container absolutely (you may want to add an overflow declaration, depending on how you want it to behave if it ever contains something wider than that) and the margin statement sets the top and bottom margin to 0px, and the left and right to 'auto' effectively splitting the difference and centring the element on the page.

Once that is done, all elements within the container div will be in the middle of the page. From there, you can either use absolute or relative positioning to place your elements, or define widths and use float declarations to control your layout - nothing will go outside of the container.

Thanks for all the help. I'm going to start it from scratch and follow everyone's advice and see how it goes. It should be easy now I've got all the graphic elements sorted.

Will post my improved code once it's finished!

My front page is now completely recoded from scratch and them split into SSIs afterwards. Everything is much neater now, all the links that I have set up are working, and the code validates with W3C.

http://new.mascalls.kent.sch.uk

Ready to do the rest of the site now. It's going to take a while as the school website is huge!

Thanks for all the help. I still find CSS relative positioning quite infuriating, but I know a lot more about it than I did a few weeks ago!

Tom.

grab, webdevelop and firebug addons for firefox, my html tidy tells me that on line 49 you have an empty paragraph ;) "<p></p>"

Think I can live with that for now! Thanks!

Glad you've ironed out your bugs. And learned something along the way! :)
You've got your original design replicated well and the source is much tider than the first implementation. Good work!
Best of luck with the rest of your pages. You know where to come if you run into any roadblocks. ;)

Make sure firefox can open PDF. The settings for that is in pref. Works for me.