Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
  1. #1

    css doesn't look right in IE


    REGISTER TO REMOVE ADS


    So I have a problem, I'm building a CSS site layout, and so far the upper left corner looks just how I want it to in Firefox, but it's different in IE, which is bad because there's going to be an image in that corner which needs to line up the same in both browsers. Anyone know what the fix for this is?


    This is just a test page

    here's the same page with an image so the problem is noticeable

    http://toucanets.freehosting.net/str.../str8test.html


    Here's the CSS:

    html, body {
    height: 100%;
    }

    body {
    margin: 0;
    padding: 0;
    background:#E9E9E9;

    }

    #container {
    position: relative;
    min-height: 100%;
    height:100%
    background:#E9E9E9;

    }


    #contents {

    position:relative;
    margin-left:170px;
    margin-right:140px;
    height:100%;
    top: -190px;
    background:#E9E9E9;
    color:#000000;
    border-bottom: none;
    border-right:none;

    }




    #menu{
    position:absolute;
    width:170px;
    top: 175px;
    left: 0;
    height:100%;
    background:#000000;
    color:#ffffff;
    }



    #header{
    position: relative;
    Width: 170px;
    height: 175px;
    background:#000000;
    overflow:hidden;


    }


    #top{
    position: relative;
    height: 84px;
    background:#000000;
    margin-left:170px;
    right:0;
    overflow:hidden;
    top:-175px;

    }


    #topperch {
    position: absolute;
    width:140px;
    top:84px;
    height:174px;
    right:0;
    background:#000000;
    color:#ffffff;

    }


    #rightframe {
    position: absolute;
    width:140px;
    top:174px;
    height:100%;
    right:0;
    background:#000000;
    color:#ffffff;

    }
    Last edited by aracari; 17-12-2008 at 05:09 AM.

  2. #2
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    Apply a CSS reset and try again. That's the best I can suggest without firing up IE6 (which I can't).

  3. #3
    iandevlin's Avatar
    Join Date
    Aug 2008
    Location
    Düsseldorf, Germany
    Posts
    1,739
    Quote Originally Posted by PR Design View Post
    Apply a CSS reset and try again. That's the best I can suggest without firing up IE6 (which I can't).
    Why not?

  4. #4
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    We have it in a testing bay at work because the multiple IE tool is buggy as hell. So my machine doesn't have IE6, and the only one that does can't be used for stuff like this.

    EDIT: It says IE anyway lol, not IE6

  5. #5
    blueocto's Avatar
    Join Date
    Oct 2007
    Location
    Newcastle upon Tyne, United Kingdom
    Posts
    4,104

    My Social Networking

    Follow blueocto On Twitter Add blueocto on Facebook Add blueocto on Google+
    Add blueocto on Linkedin Follow blueocto on Tumblr
    I can't see a difference; this is Firefox on Windows XP (using the active link above)



    and this is what i see in internet explorer on Windows XP:



    If someone can resize those babies I'd much appreciate it!
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	firefox.JPG 
Views:	501 
Size:	35.3 KB 
ID:	842   Click image for larger version. 

Name:	explorer.JPG 
Views:	559 
Size:	35.5 KB 
ID:	843  

  6. #6
    This should help,

    Code:
    #contents {
    
    position:relative;
    margin-left:170px;
    margin-right:140px;
    height:100%;
    top: -175px;
    background:#E9E9E9;
    color:#000000;
    border-bottom: none;
    border-right:none;
    
    }
    Change the -190px to -175px in the above code.

    Code:
    p {
        font-family: serif;
        font-size: medium;
        line-height: 150%;
        text-align: left;
        text-indent: .5in;
        padding-right:5px;
        margin: 0;
    }
    Then add margin: 0; to the end of the code directly above.

    Code:
    #container {
    position: relative;
    min-height: 100%;
    height:100%;
    background:#E9E9E9;
    
    }
    You've also missed out a semi-colon in the above.

    The changes shown in bold make the logo slices line up in IE6/Firefox, though I also noticed you have an 84px gap that appears at the bottom of the page in IE6, which probably corresponds to something in #topperch or #top. (see attachment)
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	page_gap.jpg 
Views:	71 
Size:	2.5 KB 
ID:	845  
    Last edited by Davidbeast; 17-12-2008 at 03:52 PM.

  7. #7

    REGISTER TO REMOVE ADS


    Quote Originally Posted by Davidbeast View Post
    This should help,

    Code:
    #contents {
    
    position:relative;
    margin-left:170px;
    margin-right:140px;
    height:100%;
    top: -175px;
    background:#E9E9E9;
    color:#000000;
    border-bottom: none;
    border-right:none;
    
    }
    Change the -190px to -175px in the above code.

    Code:
    p {
        font-family: serif;
        font-size: medium;
        line-height: 150%;
        text-align: left;
        text-indent: .5in;
        padding-right:5px;
        margin: 0;
    }
    Then add margin: 0; to the end of the code directly above.

    Code:
    #container {
    position: relative;
    min-height: 100%;
    height:100%;
    background:#E9E9E9;
    
    }
    You've also missed out a semi-colon in the above.

    The changes shown in bold make the logo slices line up in IE6/Firefox, though I also noticed you have an 84px gap that appears at the bottom of the page in IE6, which probably corresponds to something in #topperch or #top. (see attachment)
    arrggg those semi colons are so easy to miss. Thanks for pointing that out!
    Anyhow that fixed my particular problem thanks. I can indeed see the gap you mentioned in IE, and in Opera and not in Firefox. I'll have to mess around a bit to fix that as well.

    blueocto: They do pretty much look the same until a picture is added, that's why I posted the second link down.

    EDIT:
    OK, I'm stumped about the space below the contents div (the space that's now black). My initial thought was it had something to do with my use of relative positioning, but I'm thinking now that's not the case. I tried using absolute positioning, and it didn't get rid of the space.
    When I have more time I might try eliminating a few divs just to see how (if at all) the influence that empty space.

    EDIT (again):
    problems solved.
    Last edited by aracari; 21-12-2008 at 12:21 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in