Grow your CSS skills. Land your dream job.

A few problems with website display in different browsers.

  • # December 16, 2008 at 8:24 pm

    I’m having an issue with the website i’m currently making displaying properly in different browsers, i’ve looked around the forum, using search to make sure that I can’t find a fix for myself…nothing came up. For reference, i’m following Videos 12, 13 and 14 – Converting a Photoshop.

    In IE7/8 the CSS doesn’t effect the way the content is displayed in anyway. The font remains unchanged, the link images aren’t there and the page-wrap doesn’t display. So as far as I can see, the CSS isn’t recognised. How do I fix this? This is the most important of the 2 problems, as the perspective users of the website will mostly use IE.

    I really need help with IE7/8…if anyone has any ideas that’d be perfect! Also, if any code’s needed to be looked at, it shouldn’t be a problem.

    Many Thanks,
    Kobunite.

    Rob
    # December 17, 2008 at 3:22 am

    do you have the website in question live anywhere? Would be good if we could look at the code to see… Just know the although IE7 (not sure about 8 but I suspect there isnt much change) is really unforgiving with regaurds to you your CSS. So just make sure you are really specific with what you declare in your style sheet :)

    Other than that it would be good to give us some code to work with :D

    # December 17, 2008 at 4:58 am

    I’m not sure if it’s ok to post code here…but my CSS is below. Sorry if I’m not supposed to :-)

    Quote:
    /* Resets & basic page */
    * { margin: 0; padding: 0;}
    html {overflow-y: scroll;}
    body {font:62.5% Trebuchet MS;}

    ul{list-style: none inside}
    p{font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em}
    a {outline: none;}
    a img {border: none;}
    /*end*/

    /*tools*/
    floatleft {float:left;}
    floatright {float:right;}
    clear {clear:both;}
    /*end*/

    /* structure */
    #banner-wrap {
    width: 738px;
    margin: 0 auto;
    }

    #page-wrap {
    width: 799px;
    margin: 0 auto;
    background: url(images/page-wrap.jpg) repeat-y;
    }
    #main-content {
    padding: 20px 40px 20px 40px;
    color: #ffffff
    }

    /*end*/

    ul#nav {

    }

    ul#nav li {
    display: inline;
    }

    ul#nav li a{
    display: block;
    height: 16x;
    text-indent: -9999px;
    float: left;
    }

    ul#nav li.Home a{
    width: 88px;
    background: url(images/nav-home.jpg) bottom center no-repeat;
    }

    ul#nav li.Info a{
    width: 123px;
    background: url(images/nav-info.jpg) bottom center no-repeat;
    }

    ul#nav li.Organisation a{
    width: 107px;
    background: url(images/nav-organisation.jpg) bottom center no-repeat;
    }

    ul#nav li.Equipment a{
    width: 93px;
    background: url(images/nav-equipment.jpg) bottom center no-repeat;
    }

    ul#nav li.Photos a{
    width: 90px;
    background: url(images/nav-photos.jpg) bottom center no-repeat;
    }

    ul#nav li.Where a{
    width: 116px;
    background: url(images/nav-where.jpg) bottom center no-repeat;
    }

    ul#nav li.Calendar a{
    width: 118px;
    background: url(images/nav-calendar.jpg) bottom center no-repeat;
    }

    ul#nav li a:hover{
    background-position: center top;
    }

    box
    # December 17, 2008 at 5:11 am

    Post your html too – or beter still, post a link to a live page. If your CSS isn’t being seen, then you perhaps haven’t linked to it correctly. So check you LINK element in your html head and make sure the path-to-css-file is correct.

    # December 17, 2008 at 5:16 am

    I personally can’t see anything wrong with the link code, but I may be wrong (infact thats quite likely)… :-P

    Quote:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
    1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;

    <head>
    <meta http-equiv="content-type"
    content="text/html; charset-UTF-8" />

    <title> Squadron Website</title>

    <link rel="stylesheet type="text/css" href="style.css" />

    </head>

    <body>

    <div id="banner-wrap">
    <img src="images/header.jpg" alt="Website Header">

    <ul id="nav">
    <li class="Home"><a href="home.html">Home</a></li>
    <li class="Info"><a href="#">Squadron Info</a></li>
    <li class="Organisation"><a href="#">Organisation</a></li>
    <li class="Equipment"><a href="#">Equipment</a></li>
    <li class="Photos"><a href="#">Photos</a></li>
    <li class="Where"><a href="#">Where to Find Us</a></li>
    <li class="Calendar"><a href="#">Squadron Calendar</a></li>
    </ul>
    <br>
    <br>
    </div>
    <div id="page-wrap">
    <div id="main-content">
    <h1> Squadron Website Now Active! </h1>
    <br>
    <p></p>
    </div>
    <div id="sidebar">
    </div>
    </div>

    <div id="footer">
    </div>
    </body>

    <html>

    Thanks for you help :-)

    Rob
    # December 17, 2008 at 7:40 am

    Dude – can you just give us a link to your files live? We cant see if the images are changing with that code, because we dont have the images lol – and I can’t be bothered recreating it all in background colours lol

    Seriously it would be so much easyer.

    # December 17, 2008 at 8:34 am

    Until he gets the site posted I’ll add this.

    I use this on my site right now because I can’t seem to fix my display issues.

    Code:

    < ![if !IE]>

    < ![endif]>

    Plop that in your HTML file just after the <head> statement and what that will do is select a secondary CSS stylesheet depending on the browser.

    This is absolutely not the best way to do it but it worked for me and my hair is starting to grow back in places.

    box
    # December 17, 2008 at 8:53 am

    Youi’re missing a " from your link

    <link rel="stylesheet" type="text/css" href="style.css" />

    # December 17, 2008 at 10:11 am
    "box" wrote:
    Youi’re missing a " from your link

    <link rel="stylesheet" type="text/css" href="style.css" />

    I thank you good sir! All fixed in IE now. Many Thanks, and have a good Christmas.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".