SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox and IE display issues.

    http://www.servicesfirstltd.co.uk

    I have been redesigning this website, this is my first attempt at doing some serious css editing, I am now happy with the design, however the site displays slightly differently in firefox and ie. the top and bottom images seem to be 1 pixel out, I can adjust it to look good in one one of the browsers by editing the margin settings, at present it looks fine in Internet Explorer, but I would like it to look the same in both IE and firefox, I can't work this one out.

    /* structure */
    .inner-container {
    background: #FFF;
    font-size: 1.2em;
    margin-left: 230px; margin-right: auto;
    padding: 0px 10px;
    width: 780px;
    }

  2. #2
    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)
    Use the outer container to set the width, and centre this :
    Code:
    .inner-container {
    	background: #FFF;
    	font-size: 1.2em;
            padding: 0px 10px;
    }
    
    .outer-container {
    	background: url('img/bottombar.jpg') no-repeat center bottom;
            padding-bottom: 37px;
            width: 800px;
            margin: 0 auto;
    }

  3. #3
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Read this, it will fix your problem. Its due to browsers not agree-ing to stick to standards issued by W3C. Basically you just have to make an additional IE only CSS file which will override the properties of the FF style sheet, if IE is loaded.

  4. #4
    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)
    Quote Originally Posted by jonhurlock View Post
    an additional IE only CSS file which will override the properties of the FF style sheet, if IE is loaded.
    Which is totally not needed in this case.

  5. #5
    SitePoint Member
    Join Date
    Oct 2007
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry indeed Centauri is correct, i misread the original post. I quickly modified the CSS file, on my local machine and change the following elements & classes. Looks a bit different to Centauri's but essentially yields the same results.

    Code:
    .inner-container {
    	background: #FFF;
    	font-size: 1.2em;
    	margin: auto;       
    	padding: 0px 10px;
    	width: 780px;
    }
    
    .outer-container {
    		background: url('img/bottombar.jpg') no-repeat bottom;
            padding-bottom: 37px;
    }

  6. #6
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks both, it looks perfect in firefox, however in ie, the top image is now out of line, the bottom image lines up ok.

    body {
    background: #4E4E50 url('img/topbar.jpg') no-repeat center top;
    padding-top: 26px;
    width: 800px;
    margin: 0 auto;
    color: #444;
    font: normal 62.5% Tahoma,sans-serif;

  7. #7
    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 is a problem in IE that at certain resolutions a centred background image is 1px out of line with a centred container. Try moving the top background image from the body to .inner-container.

  8. #8
    SitePoint Member
    Join Date
    Apr 2007
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That did the trick, thank you for your help.


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
  •