+ Post New Thread
Results 1 to 14 of 14
Web Development Thread, Help needed with new website - link not working in FireFox in Coding and Web Development; I'm working on a redesign of our school website. This time I'm doing it properly, trying to learn CSS as ...
  1. #1

    Join Date
    May 2007
    Location
    Kent
    Posts
    130
    Thank Post
    39
    Thanked 16 Times in 14 Posts
    Rep Power
    29

    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

  2. #2

    HarryMonkey's Avatar
    Join Date
    Mar 2007
    Location
    Bedford
    Posts
    1,203
    Thank Post
    63
    Thanked 238 Times in 180 Posts
    Rep Power
    176
    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.

  3. Thanks to HarryMonkey from:

    mitchell1981 (18th February 2010)

  4. #3

    Join Date
    May 2007
    Location
    Kent
    Posts
    130
    Thank Post
    39
    Thanked 16 Times in 14 Posts
    Rep Power
    29
    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.

  5. #4

    mac_shinobi's Avatar
    Join Date
    Aug 2005
    Posts
    10,053
    Thank Post
    3,584
    Thanked 1,123 Times in 1,025 Posts
    Rep Power
    377
    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
    Last edited by mac_shinobi; 18th February 2010 at 02:15 PM.

  6. Thanks to mac_shinobi from:

    mitchell1981 (18th February 2010)

  7. #5
    dayzd's Avatar
    Join Date
    Nov 2009
    Location
    In front of computer
    Posts
    408
    Thank Post
    79
    Thanked 61 Times in 49 Posts
    Rep Power
    26
    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.

  8. Thanks to dayzd from:

    mitchell1981 (18th February 2010)

  9. #6

    Join Date
    May 2007
    Location
    Kent
    Posts
    130
    Thank Post
    39
    Thanked 16 Times in 14 Posts
    Rep Power
    29
    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!

  10. #7

    sonofsanta's Avatar
    Join Date
    Dec 2009
    Location
    Lincolnshire, UK
    Posts
    5,375
    Thank Post
    958
    Thanked 1,630 Times in 1,103 Posts
    Blog Entries
    47
    Rep Power
    711
    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.

  11. 2 Thanks to sonofsanta:

    mitchell1981 (18th February 2010), pwds (3rd March 2010)

  12. #8
    dayzd's Avatar
    Join Date
    Nov 2009
    Location
    In front of computer
    Posts
    408
    Thank Post
    79
    Thanked 61 Times in 49 Posts
    Rep Power
    26
    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.

  13. 2 Thanks to dayzd:

    mitchell1981 (18th February 2010), pwds (3rd March 2010)

  14. #9

    Join Date
    May 2007
    Location
    Kent
    Posts
    130
    Thank Post
    39
    Thanked 16 Times in 14 Posts
    Rep Power
    29
    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!

  15. #10

    Join Date
    May 2007
    Location
    Kent
    Posts
    130
    Thank Post
    39
    Thanked 16 Times in 14 Posts
    Rep Power
    29
    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.

  16. #11
    Flakes's Avatar
    Join Date
    Nov 2009
    Location
    Newcastle
    Posts
    476
    Thank Post
    38
    Thanked 74 Times in 48 Posts
    Rep Power
    28
    grab, webdevelop and firebug addons for firefox, my html tidy tells me that on line 49 you have an empty paragraph "<p></p>"

  17. Thanks to Flakes from:

    mitchell1981 (3rd March 2010)

  18. #12

    Join Date
    May 2007
    Location
    Kent
    Posts
    130
    Thank Post
    39
    Thanked 16 Times in 14 Posts
    Rep Power
    29
    Think I can live with that for now! Thanks!

  19. #13
    dayzd's Avatar
    Join Date
    Nov 2009
    Location
    In front of computer
    Posts
    408
    Thank Post
    79
    Thanked 61 Times in 49 Posts
    Rep Power
    26
    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.

  20. #14
    IT_Master's Avatar
    Join Date
    Feb 2009
    Location
    West Midlands
    Posts
    102
    Thank Post
    6
    Thanked 4 Times in 4 Posts
    Rep Power
    13
    Make sure firefox can open PDF. The settings for that is in pref. Works for me.



SHARE:
+ Post New Thread

Similar Threads

  1. Replies: 2
    Last Post: 16th November 2010, 02:35 PM
  2. Contact Us link not working properly
    By speckytecky in forum EduGeek Joomla 1.5 Package
    Replies: 7
    Last Post: 11th November 2009, 03:30 PM
  3. School Website not displaying properly in Firefox/Google Chrome
    By firefox_2006 in forum EduGeek Joomla 1.5 Package
    Replies: 9
    Last Post: 14th September 2009, 08:25 AM
  4. Help needed: Odd CSS issue on Safari (IE7, Firefox are OK)
    By netadmin in forum Web Development
    Replies: 2
    Last Post: 4th August 2009, 12:39 AM
  5. Joomla Site Not Working in Firefox
    By MaximusR in forum EduGeek Joomla 1.5 Package
    Replies: 8
    Last Post: 29th January 2009, 10:14 PM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •