SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS navigation looks different on Firefox and other browsers

    Hi,

    I am working on the following website:

    Code:
    questboss.com
    The navigation bar below the logo looks different on Firefox and other browser. I like the way it looks on Firefox and I want it to look the same on other browsers as well but I couldn't make it. Do you have any ideas?

    Thanks.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    guestboss.com doesn't connect. Is there another link?

  3. #3
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    guestboss.com doesn't connect. Is there another link?
    Hi, it is not g, it is q.

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks, must be getting sleepy here. Will try again <smile>

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm looking at Firefox and IE8. They look almost exactly the same. Could you be more specific about which browsers do not look right? and describe the differences that you see?

  6. #6
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    I'm looking at Firefox and IE8. They look almost exactly the same. Could you be more specific about which browsers do not look right? and describe the differences that you see?
    Please check it in Chrome, Safari or Opera and you will see the difference. The navigation buttons have the correct padding in Firefox, but not in Chrome or other browsers, including IE. In IE, top and bottom padding for the inner box are not displayed. I could have used images for buttons but I don't want to use images every time I can't fix some CSS3 stuff. I am using a list (ul) for the navbar, perhaps I should use divs?

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    OK, cutting edge CSS3 - there will be retro compatibility problems. Might be better if someone else offers help here. I actually thought the padding in IE8 was more consistent than Firefox. Oh, well.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Location
    Republic of Ireland
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Nail Yener
    Please check it in Chrome, Safari or Opera
    I have looked at your site in Firefox 15.0.1, Chrome 13.0.782.112, Safari 5.0.3, Opera 12.02, Internet Explorer 8.0.6001.1872 and even Kindle Fire (via the Opera Mobile Emulator) on Windows XP.

    All of these browsers show exactly the same layout with only a very minor difference in thickness to the borders in Opera. I don't think there is anything you can do about the way different graphics engines render borders.

    Çok güzel olmuş! Hiç bir sorun yok.

  9. #9
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    UPDATE: Solved.

    Thanks all for trying to help. I finally fixed this by changing the CSS slightly. The buttons look better now on all browsers.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,507
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Thanks for the followup, nayen. I looked at the link posted and it doesn' t look any different to me, but maybe it hasn't been updated, yet. I'm curious to learn how you fixed the buttons.

    Best 2 U

  11. #11
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ronpat View Post
    Thanks for the followup, nayen. I looked at the link posted and it doesn' t look any different to me, but maybe it hasn't been updated, yet. I'm curious to learn how you fixed the buttons.

    Best 2 U
    You can see the current CSS code. What I changed is that I added "float: left" to "li" items and "display: block" to "li a" items in the navbar. That's pretty much it.


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
  •