www.webdeveloper.com
Results 1 to 4 of 4

Thread: Multiple Browser Issue

  1. #1
    Join Date
    Jan 2013
    Posts
    5

    Multiple Browser Issue

    Hi there,

    I am working on a navigator for a site that's still in the beginning stage. When I preview the index page(http://temp2692.smartetailing.com/) in Firefox, the navigator looks the way I want it to. But, when I preview it in Safari, Explorer, and Chrome, the page displays some extra content around the navigator. I am sure this is a CSS issue, but I can't seem to find the piece of code that is causing this problem.

    Any help offered would be terribly appreciated.
    Paul

    P.S. Please let me know if there is any additional information I could provide which would help in the problem solving process.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    969
    So I've just checked the page in Firefox, Chrome and Internet Explorer (7-9). Other than some slightly different positioning and widths (only a matter of a few pixels and occurs in general due to different rendering engines), everything seemed to the the same. IE7 and 8 had a few issues with sub-menus in your dropdown but other than that everything seemed just as functional as well.

    Perhaps you could show a screenshot or two of what you are seeing in Firefox and other browsers.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jan 2013
    Posts
    5
    Good Idea, here's the link for the image(http://temp2692.smartetailing.com/me...av_problem.png).

    I actually looked into a little further, and the problem only appears when I view the page on my 13" MacBook Pro. When I preview it on my Desktop PC, it looks fine.
    Any ideas on why it would be looking different on my mac? I know the pixel ratio is different, so I guess it may just be a resizing issue.
    Let me know what you think.

  4. #4
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    All browsers (except compliant ones) like to place their own value for every element for padding, margin, border.

    Using the following code as the FIRST line of your CSS resolves this issue:

    * {border:0; padding:0; margin:0;} /* Set everything to "zero" */

    At any rate, it strips the superfluous extra pixel or two that IE adds, making everything look the same in all browsers.
    I build for: Firefox and tweak for IE

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
  •  
HTML5 Development Center



Recent Articles