SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problem with layout in IE 7,6, and lower

    I've been checking out my layout on multiple browsers. it's been displaying inproperly on ie7,6, and lower.

    i'm using css floats to display my navigation bar(images in a certain order) and it's getting pushed to the right in certain browsers.

    check it out at ai-analysis.com/index.html

    please give me feedback on how i can make this layout more browser compatible.

    thanks.

  2. #2
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a bit of mess, unfortunately. You're trying to force the second set of images (the navigation) onto a new line by clearing the first item, but with some weird CSS mixed in. This is not a good idea.

    Here's what you'd be better off doing:

    - Use a single image for main header (not sure why you've split it in two).
    - Consider making that header image a background image, as it's not actually content for the site. (You could use an image for the logo, or use a text-replacement method).
    -Don't use a 'min-width' for the width of the container if you want the size of the container to match the combined sizes of the images within it.
    - Make the navigation an unordered list (UL), with the individual images as list items (LI), floated. If you've used a background image for the top header image, use padding or margin to position the UL appropriately.
    - Don't mix up units (your container has a minimum width in pixels but padding in percentage; this is going to cause problems and confusion...).
    - Also, cut out all the crazy CSS (e.g., why on earth have you made set the body as an inline block?)

    Sorry, short of time this evening. If no one's done this for you by tomorrow, I'll show you a proper way of doing this layout.

    (Also, really don't bother supporting IE less than 6).

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah trying to make sure this is supported on 6 since a lot of big corporate intranets still use it. and i put the inline block cause i saw somebody recommend using it for a css bug in ie6. But i was testing it out. I'm a confused as to fix this. as i've been messing with it by searching for ways online to fix it, but have come up empty as far as solutions.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Patrick addressed the main points so here's a tidy up that addresses those issues.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ai analysis: leading IT services firm NYC</title>
    <!-- web developer: Wei Chan, programmer: Wei Chan, Designer: Wei Chan -->
    <style type="text/css">
    /* small reset*/
    html, body, table {
        margin: 0;
        padding: 0;
        font-size: 100%;
    }
    object, iframe, blockquote,
     h1, h2, h3, h4, h5, h6, 
     p, dl, dt, dd, ol, ul, 
     fieldset, form, legend, table, caption, th, td {
        margin: 0;
        padding: 0;
        border:none;
    }
    ol, ul {list-style: none;}
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    caption, th, td {
        text-align: left;
        font-weight: normal;
        vertical-align:top;
    }
    a {text-decoration:none;color:#333;}   
    a:visited {color:#333;} 
    a:hover {    text-decoration:underline;}
    a:active {text-decoration:underline;}
    a img, img {border: 0 none;}
    
    /* main page styling */
    html, body {
        height:100%;
    }
    body {
        font-family: arial, helvetica, sans-serif;
        font-size: 100%;
        background:#000;
        color:#fff;
        text-align:center;
    }
    #outer {
        font-size:85%;
        width:600px;
        margin:auto;
        background:#fff;
        color:#000;
        min-height:100%;
        text-align: left;
    }
    * html #outer {
        height:100%;/* min height for ie6 */
    }
    .logo, .logo a {
        margin:0;
        width:600px;
        height:285px;
        overflow:hidden;
        position:relative;
        display:block;
    }
    .logo span {
        position:absolute;
        width:301px;
        height:285px;
        top:0;
        left:0;
        background:url(http://ai-analysis.com/images/sitebanner_01.gif) no-repeat 0 0;
    }
    .logo b {
        position:absolute;
        width:299px;
        height:285px;
        top:0;
        left:301px;
        background:url(http://ai-analysis.com/images/sitebanner_02.gif) no-repeat 0 0;
    }
    ul#nav {
        margin:0;
        height:50px;
        clear:both;
    }
    #nav li, #nav li span, #nav li a {
        float:left;
        height:50px;
        width:100%;
        position:relative;
        text-decoration:none;
        overflow:hidden;
    }
    li#nav-1a {width:100px;}
    li#nav-1b {width: 94px;}
    li#nav-1c {width:96px;}
    li#nav-1d {width:105px;}
    li#nav-1e {width:95px;}
    li#nav-1f {width:110px;}
    #nav-1a span {background:url(http://ai-analysis.com/images/sitebanner_03.gif) no-repeat 0 0;}
    #nav-1b span {background:url(http://ai-analysis.com/images/sitebanner_04.gif) no-repeat 0 0;}
    #nav-1c span {background:url(http://ai-analysis.com/images/sitebanner_05.gif) no-repeat 0 0;}
    #nav-1d span {background:url(http://ai-analysis.com/images/sitebanner_06.gif) no-repeat 0 0;}
    #nav-1e span {background:url(http://ai-analysis.com/images/sitebanner_07.gif) no-repeat 0 0;}
    #nav-1f span {background:url(http://ai-analysis.com/images/sitebanner_08.gif) no-repeat 0 0;}
    ul#nav li span {    
        position:absolute;
        left:0;
        top:0;
    }
    #main {
        clear:both;
        padding:25px;
        min-height:0;
    }
    * html #main{zoom:1.0}
    #main p {
        margin:.75em 0;
        font-size: .85em;
    }
    #main h2 {
        font-size: .85em;
        margin:1em 0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <h1 class="logo"><a href="#">AI Analysis<span><b></b></span></a></h1>
        <ul id="nav">
            <li id="nav-1a"><a href="profile.html">Company Profile<span></span></a></li>
            <li id="nav-1b"><a href="services.html">Services <span></span></a></li>
            <li id="nav-1c"><a href="folio.html">Portfolio<span></span></a></li>
            <li id="nav-1d"><a href="host.html">Web Hosting<span></span></a></li>
            <li id="nav-1e"><a href="train.html">Training<span></span></a></li>
            <li id="nav-1f"><a href="contact.html">Contact Us<span></span></a></li>
        </ul>
        <div id="main">
            <p>ai analysis, established in 1998 is a leading information technology firm based in the heart of the financial district of New York City with consultants around the metropolitan landscape. </p>
            <p>Since ai's appearance on silicon alley, ai has been on top of innovative IT solutions and inventing new ways to solve IT problems for small to medium businesses and providing enterprise solutions. </p>
            <h2>ideas</h2>
            <p>a lot of successful businesses start out from an idea, but without ai analysis, they would stay ideas.
                ai's team of experienced IT consultants brings creativity, ingenuity, and insight into creating, branding, and creating     the foundation for your IT business solution.</p>
            <h2>managed IT services</h2>
            <p>Because managing a large enterprise's IT operations is a very time consuming process, many enterprises and corporations look to outsource to a reliable IT firm such as AI. With it's keen eye and meticulous attention to detail, ai analysis provides the most comprehensive managed IT solution for corporations and small businesses alike. </p>
            <p>Copyright 2011 &copy; ai analysis llc. All rights reserved. all ai analysis and Partner logos and copy remains the sole copyright of the Affiliate or Partner. </p>
            <p><strong> <a href="/careers.html">career opportunities</a></strong></p>
        </div>
    </div>
    </body>
    </html>
    You should make the header image a single image as Patric said as I didn't have time to go and join them up.

    The header and the nav us a gilder/levin image replacement which you can read up on here. That will leave you the choice of doing a rollover image on the nav quite easily now by making a double image and swapping the background-position on hover.

    Use html semantically and don't just use p elements made bold for headings. Use the heading tags (in a logical order) as that was what they were designed for.

    You also had no images showing in Firefox because you had the slash the wrong way around in the path.

    As Patrick said using inline-block on the body is a nonsense as there is never a need for that.

    Hope that helps

  5. #5
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so here's a version of what could work for you. This is very simplified, and I'm making some assumptions, such as that you're using a single image for the header, which includes the logo (this isn't necessarily the best way to do it, but I'm including it for demonstration).

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>ai analysis: leading IT services firm NYC</title>
    <!-- web developer: Wei Chan, programmer: Wei Chan, Designer: Wei Chan -->
    
    <style type="text/css">
    
    body{
    color: #000000;
    font-family: arial, helvetica, sans-serif;
    font-size: .85em;
    margin: 0px;
    padding: 0px;
    
    }
    
    #container {
    margin: 0 auto;
    width: 600px;
    }
    
    ul.nav, .nav li, h1 {
    margin: 0;
    padding: 0;
    }
    
    ul.nav {
    
    list-style: none;
    }
    
    .nav li {
    float: left;
    }
    
    </style>
    
    <body>
    
    <div id="container">
    
    <h1>
    <img src="images/sitebanner_01.gif" alt="AI Analysis"/>
    </h1>
    
    <ul class="nav">
    
    <li>
    <a href="">
    <img src="images/sitebanner_03.gif" alt="Company Profile" />
    </a>
    </li>
    
    <li>
    <a href="">
    <img src="images/sitebanner_04.gif" alt="Company Profile" />
    </a>
    </li>
    
    <li>
    <a href="">
    <img src="images/sitebanner_05.gif" alt="Company Profile" />
    </a>
    </li>
    
    <li>
    <a href="">
    <img src="images/sitebanner_06.gif" alt="Company Profile" />
    </a>
    </li>
    
    <li>
    <a href="">
    <img src="images/sitebanner_07.gif" alt="Company Profile" />
    </a>
    </li>
    
    <li>
    <a href="">
    <img src="images/sitebanner_08.gif" alt="Company Profile" />
    </a>
    </li>
    </ul>
    
    
    <div class="feature">
    
    </div>
    </div>
    </body>
    </html>
    I haven't tested this on IE because I don't have IE here, but I can't see any reason why it wouldn't work.

    Note the changes to your HTML as well as to the CSS.

  6. #6
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, look. Paul got there with a much more comprehensive and accessible version before I did. Use his!

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by PatrickSamphire View Post
    Oh, look. Paul got there with a much more comprehensive and accessible version before I did. Use his!
    Sorry Patrick - I should have waited a bit longer (been away all weekend and just jumped in - sorry.)

  8. #8
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot to both of you gentlemen. This is very helpful. i've uploaded and tested it on netrenderer and it looks good in ie6, i'll check how it looks on a real browser at work.

    hopefully i'll be able to find time to get this whole design cleaned up and finished.

    thanks again. do you know any good sites or books that address the various browser compatibility issues?

  9. #9
    SitePoint Zealot PatrickSamphire's Avatar
    Join Date
    Jul 2006
    Location
    UK
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Sorry Patrick - I should have waited a bit longer (been away all weekend and just jumped in - sorry.)
    Not at all. If I'd seen your answer before I started mine, I would have been very happy to save 10 minutes.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by raycnyit View Post
    thanks again. do you know any good sites or books that address the various browser compatibility issues?

    The Sitepoint online reference lists all the major bugs and compatibility issues associated with properties/values across common browsers. (It's not meant as a tutorial though but as a fully detailed reference.)


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
  •