SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2007
    Location
    Toronto
    Posts
    172
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Website Browser Problem (Firefox Vs IE)

    So my website is almost copmplete. I've been using Internet Explorer to view and beta test my site. However when I view my website in Firefox the whole template shifts. Is there away in which I don't have to alter my design but add a snippet of code so both browsers see the website the same.

    If you notice my navagational system at the top is the main problem.
    Its funny how this only occurs on certain pages of the site within Firefox.

    http://www.nyxxunderground.com/SEPTA.../index-15.html

    Please let me know what I can do.
    ]

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I've no idea what you mean by "whole template shifts" but I can see that the top navigation has dropped to the next line in Firefox.

    Unfortunately its Firefox that's correct and you are wrong. There are 2 errors here.

    Code:
    <td width="684" valign="top" style="background:url('http://www.nyxxunderground.com/SEPTAGONBETA/site/Html/images/bg_head.jpg') no-repeat top  ; "><table width="685" sty
    The outer td is 684px wide and then you have nested a table inside that that is 685px wide. How does that work? You can't have something biiger on the inside than it is on the outside

    Ie will stretch the width to accommodate which isn't what should happen. The element should just overflow and any extra is ignored.

    The second error is a compounding of the above in that in that 684px wide table you have now nested navigation images that equal 692px width.Even bigger still!!

    The table and td needs to be at least 692px for all this to fit.

    Code:
        <td width="692" valign="top" style="background:url('http://www.nyxxunderground.com/SEPTAGONBETA/site/Html/images/bg_head.jpg') no-repeat top  ; "><table width="692" style
    You must be exact with your measurements as this is a basic requisite of sound coding or you will run into issues time and again. Make sure what you tell the browser is physically possible and then you have a better chance of making it work

    Also you are relying heavily on tables for parts that could be done more easily without tables. Also inline styling is to be avoided at all costs or you may as well revert to using font tags as you lose all the benefits of using CSS in the first place .

  3. #3
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also worth mentioning that your first mistake was to rely on IE in the first instance as your first point of checking rendering.

    You'll have much more success in the future if you build for the modern standards compliant browsers (Firefox, Opera and Safari) and then put in any fixes for the bugs that old browsers may display.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually Dave, I'd include Internet Explorer in the initial set of testing, working around any problems in that browser while making sure the changes don't break the others (like that candy bar broke one of my molars last night).

  5. #5
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    Actually Dave, I'd include Internet Explorer in the initial set of testing, working around any problems in that browser while making sure the changes don't break the others
    Yeah I agree, much easier to fix problems as they occur than a whole host of problems at the end

    Quote Originally Posted by Dan Schulz View Post
    (like that candy bar broke one of my molars last night).
    Ouch

  6. #6
    SitePoint Member
    Join Date
    Feb 2007
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Testing in multiple browsers as you go will save time in the end. It's especially helpful if you have a Mac and a PC to test on.

  7. #7
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is this fixed now?

    Whenever I hear about pages shifting in Firefox I immediately think about the Firefox scrollbar issue (IE permanently has a scrollbar - Firefox only has a scrollbar on appropriate pages and therefore everything shifts to the left slightly on the shorter pages).

    If the above tips haven't solved the issue then you might want to add this to your stylesheet to force a scrollbar in Firefox:

    Code:
    html { min-height: 100&#37;; margin-bottom: 1px; }
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And every other browser, which is why I don't use it.

  9. #9
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This solution does work for Firefox though...

    Code:
    html {
    overflow-y: scroll;
    }


Bookmarks

Posting Permissions

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