Forums

Kobunite

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.

Robskiwarrior

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

Kobunite

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

/* 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

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.

Kobunite

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml/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> 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 :-)

Robskiwarrior

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.

Malice

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.

    <!--[if IE]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"iestyle.css\" />
    <![endif]-->

    <![if !IE]>
    <link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" />
    <![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

Youi're missing a " from your link

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

Kobunite

"box" said:
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.

treehouse : what would you like to learn today?

Forums

A few problems with website display in different browsers.