Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › A few problems with website display in different browsers.

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 16, 2008 at 8:24 pm #23785
    Kobunite
    Member

    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.

    December 17, 2008 at 4:58 am #52167
    Kobunite
    Member

    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;
    }

    December 17, 2008 at 5:16 am #52169
    Kobunite
    Member

    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 :-)

    December 17, 2008 at 8:34 am #52172
    Malice
    Member

    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:

    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.

    December 17, 2008 at 10:11 am #52179
    Kobunite
    Member
    "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.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.