SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with cross browser compatibility

    I have a website that looks perfect on Firefox 3.

    www.gpinsider.com.au

    However, on IE7 there are a couple of issues.

    - there is extra white space between the set of icons and the "screenshots" text.
    - the space between the 1st and 2nd row of screenshot mages is smaller than on other browsers
    - there is extra white space between the the bottom of the screenshot images and the "recent questions" text.
    - the search form is not vertically centred.

    And in Safari 3 and Firefox 2

    - the login form at the top is not vertically centred.

    Any help appreciated...

    PJ.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You can cure the space between the screenshot images by finding and changing these styles as follows.

    Code:
    .colbox2 img {
        margin:  0;
        border: 2px solid #343333;
    }
    .colbox2 p {
        height: 208px;
        margin:10px 0;
    }
    Form elements always vary wildly between browsers and you will either just live with them or you can give IE its own styles to offeset the differences a little.

    e.g.
    Code:
    <!--[if IE ]>
    <style type="text/css">
    #submitsearch {height:21px}
    </style>
    <![endif]-->
    Don't over-use absolute positioning as you lose the flow of the document and it makes it hard to get things to match betwen browsers because you are expecting every element to be the same size cross browser which is very difficult to achieve. If you use the flow of the documen (flaost and static positioning) then elements wil line up without being positioned and the odd pixel difference between browesrs won't nitoce because the elements will line up correctly on each browser.

    Make you sure you take care of all the default margins and padding applied to all elements as this varies between browser. Also ensure that when you set a height it matches the height you want. You set your screenshot p tags height to less than the height of the content it contained.


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
  •