SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Browser Compatibility: Basic list margin

    Hi all,

    I am sort of new to web design and wanted to get some feedback regarding the correct way to manage browser compatibility issues.

    I am working on bringing up an e-commerce site and working on formatting the products page.

    When I added an html list of product attributes, it appears skewed to the left in firefox, but looks fine in IE7.

    Here is a link to the sample product page I am working on.

    Is the correct approach to do a browser check and do some conditional CSS margin alignment?

    Any advice is much appreciate!

    Thanks!

    PS: Would send a link, but I am a newbe

  2. #2
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by qaz216 View Post
    Here is a link to the sample product page I am working on.

    PS: Would send a link, but I am a newbe
    ??

    It's hard to tell without seeing what you're seeing. However, different browser have different default margins and paddings on lists. You should explicitly set a declaration for margin and padding on the ul and/or the li element.

    I would recommend to develop with FireFox, then check in other browsers, and inevitably fix/adjust the CSS for IE.
    Last edited by tictike; Aug 11, 2008 at 19:42. Reason: edit

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The normal indent on lists is done in different ways in different browsers - Firefox uses a default left padding on the <ul> whilst IE uses a left margin - setting either of those values without the other will result in display differences. Zeroing the left margin and applying left padding is the best way to bring the bullets into line (bullets are actually outside the <li>s by default) as it brings them inside the <ul> - IE has an annoying habit of hiding the bullets if they are still outside the <ul> in some circumstances.

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the responses!

    Found the issue. I subscribe to a data aggregation service that gives me product info wrapped in <li> tags. When I spit the data back to the product page, it was skewed in FF. After wrapping the li's in a ul tag, both browsers now display correctly.

    As I am new the this forum (not new to sitepoint) I cannot post outbound links.

    Thanks again ....


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
  •