PDA

View Full Version : Site completely broken in IE7 - Need urgent help!

ste89
04-01-2009, 06:03 PM
Hey guys.

I've made a site, working and looking absolutely fantastic in every browser apart from IE7. Seems typical that I always have problems with IE.

I have no idea how to prevent the problems occurring. My code isn't the best, granted, but it works.

Anyway. In IE7, the navigation is part way over the banner - its risen up 40px or so.

Part of the content that was on the left hand side in the content window has gone completely over to the right, over the top of other content and is even sat outside the wrap border. :mad:

Will post all my code here. Please help me, I am so frustrated.

HTML Index

<body link="#686868" alink="#686868" vlink="#686868" >

<div id="wrapper">
<ul id="nav">
<li><a href="Index.html">Home</a></li>
<ul><a href="http://www.thescuderia.net/forums/index.php?">Forums</a></ul>
<li><a href="f1team.html">F1 Team</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="history.html">History</a></li>
<li><a href="pictures.html">Picture</a></li>
<li><a href="reports.html">Reports</a></li>
<li><a href="standings.html">Standings</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
<div id="content">
<!--
inizio maskedGallery
-->
<div id="gallerynav"><div id="prevbutton"><img class="prev" src="images/prev.png" /></div> <div id="nextbutton"><img class="next" src="images/next.png" /></div></div>
<table style="width:800px; height:auto; margin-left:-15px;" border="0"><tr><td align="center" valign="top">
<div id="g1" class="galleryCont" style="display:inline-block;">
<img src="images/gallery/1.jpg" alt="">
<img src="images/gallery/3.jpg" alt="">
<img src="images/gallery/2.jpg" class="{url:'mbMaskedGallery1.html'}" alt="" >
<img src="images/gallery/5.jpg" class="{script:'alert(\'PIPPO\')'}" alt="">
<img src="images/gallery/4.jpg" alt="">
<img src="images/gallery/6.jpg" alt="">
<img src="images/gallery/7.jpg" alt="">
<img src="images/gallery/8.jpg" alt="">
</div>

</td></tr></table>

<!--
fine maskedGallery
-->



<div id="homepageheading">Welcome to TheScuderia.net - The online voice of Ferrari F1</div>

<div id="register">
For all the latest news, rumours and opinions on Ferrari F1 then our Forums are the place to be, come and join in with the best Tifosi community online!
</div>
<div id="news">
<img src="newsimages/australia.jpg" vspace="25" />
Ferrari failed to get off to a good start in the 2009 season as they left Australia with no points. A race that was dominated by Jenson Button failed to reward Ferrari as Felipe Massa retired with hydraulic problems and Kimi Raikkonen ended his hopes by brushing the wall and causing car damage. Ferrari will be hoping things look brighter next week in Malaysia.
</div>
<div id="topics">
<h3>Latest Topics</h3>
<p><ul class="vb_topics">
Latest Topics go here
</div>
<div id="foot">Forza Ferrari</div>
</div>



</body>
</html>


Cheers,

Ste
ste89
04-01-2009, 06:05 PM
CSS:


@charset "utf-8";
/* CSS Document */

body {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
color: #343434;
background:#000;
margin: 0;
padding: 0;
}
#wrapper {
width: 776px;
margin: 30px auto;
background: #0d0d0d url(../images/header.png) no-repeat;
padding: 55px 25px 25px 25px;
border: 12px solid #2e2e2e;
position:relative;
}
#gallery {
width: 776px;
height:500px;
position:relative;
}

h1 {
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0.3em 0;
text-indent:-99999px;
}
#nav {
list-style: none;
padding: 0;
margin: 181px 0 20px 0;
background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
display: block;
overflow: hidden;
font-size: 0.9em;
height:33px;
text-transform:capitalize;


}

#nav li {
display: inline;
}
#nav li a {
display: block;
float: left;
padding: 10px 9px;
color: white;
text-decoration: none;
}

#nav li a:hover {

background: #1b1b1b url(../images/nav_bar_o.jpg) repeat-x;
}


#nav ul a {
display: inline;
float: left;
padding: 10px 9px;
color: white;
text-decoration: none;
}

#register{
margin-top:-15px;
padding-bottom:15px;
font-size:10px;
color:#FFF;
}

#news{
margin-top:-15px;
padding-bottom:15px;
font-size:10px;
color:#FFF;
width:480px;
margin-top:2px;
position:absolute;
text-align:justify;
}

#nav ul a:hover {

background: #1b1b1b url(../images/nav_bar_o.jpg) repeat-x;
}
#load {
display: none;
position: absolute;
left: 10px;
top: 10px;
background: url(../images/loader_black_2.gif);
width:88px;
height: 14px;
text-indent: -9999em;
}

ul.vb_topics{
text-align:left;
width:200px;
white-space:nowrap;
overflow:hidden;
text-decoration:none;
margin-top:0px;
font-size:9px;

}
a{
text-decoration:none;
}

a:hover{
color:#FFFFFF;

}
#topics{
margin-left:500px;
border-left:solid;
border-width:thin;
}


h2 {
color:#B00;
font-family:Helvetica, Arial, Sans-serif;
}
#homepageheading{
margin-left:115px;
padding-bottom:20px;
color:#B00;
font-family:Helvetica, Arial, Sans-serif;
font-size:18px;
font-weight:bold;
margin-top:10px;

}


h3 {
margin-left:28px;
margin-bottom:0px;
color:#B00;
font-family:Helvetica, Arial, Sans-serif;
}

h4 {
color:#FFF;
text-align:left;
}

p {
margin: 0;
padding-top:10px;
color:#686868;
line-height:1.4em;
}
#content img.right {
float: right;
margin: 50px 0 8px 8px;

}
#contactinfo {

width:800px;
height:15px;
float:left;
padding-top:25px;
text-align:center;
}

#foot {
padding: 15px;
color: white;
text-align: center;
margin: 50px 0 0 0;
border-top:1px solid #222222;
}

#nextbutton {
margin-left:730px;
margin-top:105px;
position:absolute;
z-index:1;
}

#prevbutton {
margin-left:20px;
margin-top:105px;
position:absolute;
z-index:1;
}

#teampics img {
padding-right:10px;
padding-bottom:10px;

}
#teampicscontainer {
margin-left:25px;

}

#downloads {
list-style:none;
height:430px;
width:800px;


}

#historyimagescontainer {
width:160px;
height:600px;
padding-left:90px;
}

#historyimagescontainer img {
padding-bottom:20px;

}

#reportimages img {
padding-right:30px;
list-style:none;
padding-bottom:6px;
}

#reportimages {
padding-right:15px;
list-style:none;
margin-left:200px;

}

#reporttext {
list-style:none;
margin-left:270px;
margin-top:-540px;


}



.galleria{list-style:none;width:776px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */
matthewm27
04-01-2009, 08:37 PM
I didn't really look at your site, but you can make IE and only IE run some script or css or anything else. Tweak this to your needing if you want:

<!--[if IE]>
<style type="text/css">
/*Code needed to push nav down here*/
</style>
<![endif]-->

Replace the comment with what css you need to push the nav-bar.
Reiss
04-02-2009, 05:51 PM
i would add an extra css style for <ul> & <li> to control every margin and padding on both tags. In my experience, browsers seem to add there own margin / padding to <ul> & <li> tags so setting them to what you want and 0 if you dont want any may help.
matthewm27
04-04-2009, 10:07 AM
I know what you mean, but I think IE has the biggest problem with it :rolleyes:. For me it has pushed a lot of my elements (div, span, table, etc). 1 pixel may not seem like that much, but when you're trying to make something look good, and it pushes something that will be seen a lot (like a nav-bar) a pixel down, it gets annoying. That exact scenario happened to me.
Excavator
04-04-2009, 12:01 PM
Hello ste89,
Have you tried validating your code yet? I don't know if you posted your entire code or if you are really not using a DocType but you need one. See the link in my sig about DocTypes. Links there about validating as well.
The validator finds many errors in your code that can easily be fixed.

Your header.png must be 236px by ?
Your menu might work better if that was not a background image.

Post a link to the test site so we can see your menu riding over the image above it.


Here is a start toward valid 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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Untitled Document</title>
<style type="text/css">
body {
font: 0.8em "Lucida Sans Unicode", "Lucida Grande", Arial, Helvetica, sans-serif;
color: #343434;
background:#000;
margin: 0;
padding: 0;
}
#wrapper {
width: 776px;
margin: 30px auto;
background: #0d0d0d url(../images/header.png) no-repeat;
padding: 55px 25px 25px 25px;
border: 12px solid #2e2e2e;
position:relative;
}
#gallery {
width: 776px;
height:500px;
position:relative;
}

h1 {
text-transform: uppercase;
text-align: center;
margin: 0;
padding: 0.3em 0;
text-indent:-99999px;
}
#nav {
list-style: none;
padding: 0;
margin: 181px 0 20px 0;
background: #2e2e2e url(../images/nav_bar.jpg) repeat-x;
display: block;
overflow: hidden;
font-size: 0.9em;
height:33px;
text-transform:capitalize;


}

#nav li {
display: inline;
}
#nav li a {
display: block;
float: left;
padding: 10px 9px;
color: white;
text-decoration: none;
}

#nav li a:hover {

background: #1b1b1b url(../images/nav_bar_o.jpg) repeat-x;
}


#nav ul a {
display: inline;
float: left;
padding: 10px 9px;
color: white;
text-decoration: none;
}

#register{
margin-top:-15px;
padding-bottom:15px;
font-size:10px;
color:#FFF;
}

#news{
margin-top:-15px;
padding-bottom:15px;
font-size:10px;
color:#FFF;
width:480px;
margin-top:2px;
position:absolute;
text-align:justify;
}

#nav ul a:hover {

background: #1b1b1b url(../images/nav_bar_o.jpg) repeat-x;
}
#load {
display: none;
position: absolute;
left: 10px;
top: 10px;
background: url(../images/loader_black_2.gif);
width:88px;
height: 14px;
text-indent: -9999em;
}

ul.vb_topics{
text-align:left;
width:200px;
white-space:nowrap;
overflow:hidden;
text-decoration:none;
margin-top:0px;
font-size:9px;

}
a{
text-decoration:none;
}

a:hover{
color:#FFFFFF;

}
#topics{
margin-left:500px;
border-left:solid;
border-width:thin;
}


h2 {
color:#B00;
font-family:Helvetica, Arial, Sans-serif;
}
#homepageheading{
margin-left:115px;
padding-bottom:20px;
color:#B00;
font-family:Helvetica, Arial, Sans-serif;
font-size:18px;
font-weight:bold;
margin-top:10px;

}


h3 {
margin-left:28px;
margin-bottom:0px;
color:#B00;
font-family:Helvetica, Arial, Sans-serif;
}

h4 {
color:#FFF;
text-align:left;
}

p {
margin: 0;
padding-top:10px;
color:#686868;
line-height:1.4em;
}
#content img.right {
float: right;
margin: 50px 0 8px 8px;

}
#contactinfo {

width:800px;
height:15px;
float:left;
padding-top:25px;
text-align:center;
}

#foot {
padding: 15px;
color: white;
text-align: center;
margin: 50px 0 0 0;
border-top:1px solid #222222;
}

#nextbutton {
margin-left:730px;
margin-top:105px;
position:absolute;
z-index:1;
}

#prevbutton {
margin-left:20px;
margin-top:105px;
position:absolute;
z-index:1;
}

#teampics img {
padding-right:10px;
padding-bottom:10px;

}
#teampicscontainer {
margin-left:25px;

}

#downloads {
list-style:none;
height:430px;
width:800px;


}

#historyimagescontainer {
width:160px;
height:600px;
padding-left:90px;
}

#historyimagescontainer img {
padding-bottom:20px;

}

#reportimages img {
padding-right:30px;
list-style:none;
padding-bottom:6px;
}

#reportimages {
padding-right:15px;
list-style:none;
margin-left:200px;

}

#reporttext {
list-style:none;
margin-left:270px;
margin-top:-540px;


}



.galleria{list-style:none;width:776px}
.galleria li{display:block;width:80px;height:80px;overflow:hidden;float:left;margin:0 10px 10px 0}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */
</style>
</head>
<body>
<div id="wrapper">
<ul id="nav">
<li><a href="Index.html">Home</a></li>
<li><a href="http://www.thescuderia.net/forums/index.php?">Forums</a></li>
<li><a href="f1team.html">F1 Team</a></li>
<li><a href="downloads.html">Downloads</a></li>
<li><a href="history.html">History</a></li>
<li><a href="pictures.html">Picture</a></li>
<li><a href="reports.html">Reports</a></li>
<li><a href="standings.html">Standings</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="gallery.html">Gallery</a></li>
</ul>
<div id="content">
<!--
inizio maskedGallery
-->
<div id="gallerynav"><div id="prevbutton"><img class="prev" src="images/prev.png" /></div> <div id="nextbutton"><img class="next" src="images/next.png" /></div></div>
<table style="width:800px; height:auto; margin-left:-15px;" border="0"><tr><td align="center" valign="top">
<div id="g1" class="galleryCont" style="display:inline-block;">
<img src="images/gallery/1.jpg" alt="" />
<img src="images/gallery/3.jpg" alt="" />
<img src="images/gallery/2.jpg" class="{url:'mbMaskedGallery1.html'}" alt="" />
<img src="images/gallery/5.jpg" class="{script:'alert(\'PIPPO\')'}" alt="" />
<img src="images/gallery/4.jpg" alt="" />
<img src="images/gallery/6.jpg" alt="" />
<img src="images/gallery/7.jpg" alt="" />
<img src="images/gallery/8.jpg" alt="" />
</div>

</td></tr></table>

<!--
fine maskedGallery
-->



<div id="homepageheading">Welcome to TheScuderia.net - The online voice of Ferrari F1</div>

<div id="register">
For all the latest news, rumours and opinions on Ferrari F1 then our Forums are the place to be, come and join in with the best Tifosi community online!
</div>
<div id="news">
<img src="newsimages/australia.jpg" />
Ferrari failed to get off to a good start in the 2009 season as they left Australia with no points. A race that was dominated by Jenson Button failed to reward Ferrari as Felipe Massa retired with hydraulic problems and Kimi Raikkonen ended his hopes by brushing the wall and causing car damage. Ferrari will be hoping things look brighter next week in Malaysia.
</div>
<div id="topics">
<p>&nbsp;</p>
<h3>Latest Topics</h3>
</div>
<div id="foot">Forza Ferrari</div>
</div>
</div>


</body>
</html>