Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cross-Browser issues when creating layout

    Okay, so I'm having some major cross-browser compatibility issues. The layout works fine in both Firefox and Opera and this is what it should look like:
    image1 image2

    However, here are my issues with other browsers:
    IE6
    Safari
    IE7
    IE5

    Also, both the stylesheet and coding have been validated.

    You can all see the picture if you go to BrowserShots.org with the url: http://clogged.boscardin.org/

    I've racked my brain in trying to do this without hacks, except I don't know what to do here.

    This is the main link: http://clogged.boscardin.org/
    This is the style link: http://clogged.boscardin.org/wp-content/th...ewlay/style.css

    Please, any help would be greatly appreciated. Thank you!

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Looks like you are dealing with browser default margins and padding. Add this to the top of your CSS
    Code:
    * {
    margin:0;
    padding:0;
    }
    The * is called the universal selector. The above CSS sets all margins and/or padding to 0 for all elements, this way you get a better starting point. Adding this to your current stylesheet seems to fix most of your issues.

    Now however you will need to manually add margin and/or padding to wherever you need it.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Okay, so the IE part lines up now. Safari still has that break between the "tabs" and the main content.

    Also, I would like to be able to get rid of that black line when viewing in IE. I have a feeling I might have to use some relative positioning and z-indexes, but I figure if Firefox and Opera can do it... so can IE?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well Firefox shouldn't be doing what its doing since the li's are display inline. Try this for your menu css instead
    Code:
    #menu ul {
    padding:0;
    margin: 6px 0;
    list-style-type: none;
    }
    
    #menu li {
    margin:0;
    padding:0;
    float:left;
    padding: 6px;
    position:relative;
    top:2px;
    }
    
    #menu a:link, #menu a:visited, #menu a:hover {
    color: #ffffff;
    text-decoration: none;
    }
    
    #menu li#selected {
    background-color: #ffffff;
    color: #2a4461;
    border: 1px solid #000000;
    border-bottom:0;
    padding-bottom:7px;
    top:1px;
    }
    
    #menu li#selected a:link, #menu li#selected a:visited, #menu li#selected a:hover {
    color: #2a4461;
    text-decoration: none;
    }
    Also add clear:both; to your #container CSS.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Boscardin (12-24-2007)

  • #5
    New to the CF scene
    Join Date
    Dec 2007
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    It works a lot better now, thank you! It doesn't work in some of the older browsers like IE5 or Safari 1, but I figure that's not too much a problem to worry about.

    Thank you for your help!


  •  

    Posting Permissions

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