Ie 7 and older = broken

HTML & CSS
1

http://72.32.79.3/index.php


<!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>
<title>ORSCA -  Outlaw Racing Street Car Association</title>
<link href="stylesheets/main.css" rel="stylesheet" type="text/css" title="default" />
<script language="JavaScript" type="text/javascript">
           //<!--
           //<![CDATA[

           first = 1;
           last = 4;
           current = 1;

           function nextPicture() {
               // Hide current picture
               object = document.getElementById('slide' + current);
               object.style.display = 'none';

               // Show next picture, if last, loop back to front
               if (current == last) { current = 1; }
               else { current++ }
               object = document.getElementById('slide' + current);
               object.style.display = 'block';
           }

           function previousPicture() {
               // Hide current picture
               object = document.getElementById('slide' + current);
               object.style.display = 'none';

               if (current == first) { current = last; }
               else { current--; }
               object = document.getElementById('slide' + current);
               object.style.display = 'block';
           }
           //]]>
           // -->
       </script>
       <style type="text/css">
       <!--
           .slideShow {
               background-color: #ebebeb;
               text-align: center;
               margin-bottom: 10px;
               padding: 5px;
           }
           .slides {
               position: relative;
               z-index: 1;
               display: none;
           }
           .setTitle, .slideTitle {
               font-family: "Franklin Gothic Book", Arial, Helvitica, sans-serif;
           }
           .setTitle {
               color: #995a01;
               font-size: 14px;
               font-weight: bold;
               }
           .slideTitle {
               color: #666666;
               font-size: 12px;
           }
           .controls {
               position: relative;
               z-index: 10;
           }
           #slide1 {
               display: block;
           }

       -->
       </style>
<script type="text/javascript">
var staticmenuids=["staticmenu"]
var staticmenuoffsetY=[]

function getmenuoffsetY(){
	for (var i=0; i<staticmenuids.length; i++){
		var currentmenu=document.getElementById(staticmenuids[i])
	 staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
	}
		initstaticmenu()
}

function initstaticmenu(){
	var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
	var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
	for (var i=0; i<staticmenuids.length; i++)
		document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
	setTimeout("initstaticmenu()", 100)
}

if (window.addEventListener)
window.addEventListener("load", getmenuoffsetY, false)
else if (window.attachEvent)
window.attachEvent("onload", getmenuoffsetY)

</script>
</head>
<body>
<div id="container">

    <div id="top"><div id="top2"><div id="clicklogo" onclick="location.href='index.php';" style="cursor:pointer;"></div>
    <div id="advert">
<object width="632" height="77">
<param name="movie" value="../images/small_sponsors.swf">
<embed src="../images/small_sponsors.swf" width="632" height="77">
</embed>
</object>
    </div></div></div>

    <div id="main-container">
    <div id="main-nav-2">
		<ul class="linklist rightside">

	You are not logged in<br /><a href="forums/ucp.php?mode=login">Login</a> | <a href="forums/ucp.php?mode=register">Register</a>					</ul>
</div>



        <div id="main-nav">
    	    <ul>
      		  	<li><a id="news" href="#" title="news"><span>News</span></a></li>

				<li><a id="forums" href="forums/" title="forums"><span>Forums</span></a></li>
				<li><a id="classifieds" href="http://www.racingjunk.com" target="_blank" title="classifieds"><span>Classifieds</span></a></li>
				<li><a id="raceschedule" href="index.php?page=calendar" title="raceschedule"><span>Race Schedule</span></a></li>
				<li><a id="rulebooks" href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a>
					<ul>
						<li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>

						<li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
						<li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
					</ul>
				</li>
				<li><a id="standings" href="index.php?page=standings" title="standings"><span>Standings</span></a></li>
				<li><a id="records" href="index.php?page=records" title="records"><span>Records</span></a></li>
				<li><a id="photogallery" href="http://prophotoproductions.exposuremanager.com/g/drag_racing" target="_blank" title="photogallery"><span>Photo Gallery</span></a></li>

				<li><a id="racerprofile" href="#" title="racerprofile"><span>Racer Profile</span></a></li>
    		</ul>
    	</div>




        <div id="main-content-holder">

            

<div id="home_content1">
<div id="home_1"><img src="images/flyer1.jpg" /></div>

<div id="home_2">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue arcu, faucibus condimentum convallis ut, rhoncus in magna. Quisque ultricies leo non lacus feugiat in ullamcorper nisl vestibulum. Pellentesque dignissim aliquam iaculis. Fusce sapien felis, condimentum id convallis vitae, lacinia eget ligula. Vivamus venenatis tortor id mi accumsan bibendum. Nulla facilisi. Nullam tellus justo, consectetur et vulputate sed, posuere ut enim. Sed mattis est sit amet orci feugiat ut viverra urna vulputate. Donec sit amet turpis feugiat urna gravida blandit at vitae risus. Aliquam erat volutpat. Sed vel nulla vel felis vehicula convallis vitae laoreet lorem. Sed viverra mi ut velit elementum interdum. Nam pulvinar magna a nisi imperdiet lacinia. Morbi velit lacus, iaculis in luctus non, mattis vitae ante. Etiam consequat turpis ac nunc sodales at molestie dui gravida.</p>
<p>Sed ante risus, sodales ac auctor sed, consequat quis tellus. Nam imperdiet urna ac turpis sodales pretium..</p>

<p align=right>Read More&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>
</div>
<div id="home_content2">
<div id="news_chooser"><< [1] [2] [3] [4] [5] >></div>
<div id="recent_forums"><table class="recent_posts_table"><tr><td class="r_p_icon">
					<img src="images/recent_post.png" />

					</td><td class="r_p_subject">
					<span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=4">test lot's of replies</a></span>
					</td><td class="r_p_spacer">
					</td><td>
					<table><tr><td>
					<span>by <a href="forums/memberlist.php?mode=viewprofile&u=2">admin</a>: about fourty minutes ago</span>
					</tr><tr>

					In <span class="r_p_link"><a href="forums/viewforum.php?f=2">General Discussion</a></span> >> <span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=4&start=20#p27">Re: test lot's of replies</a></span>
					</tr></td></table>
					</td></tr>
					</table>
					<table class="recent_posts_table"><tr><td class="r_p_icon">
					<img src="images/recent_post.png" />

					</td><td class="r_p_subject">
					<span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=3">new topic test</a></span>
					</td><td class="r_p_spacer">
					</td><td>
					<table><tr><td>
					<span>by <a href="forums/memberlist.php?mode=viewprofile&u=2">admin</a>: about fourty minutes ago</span>
					</tr><tr>

					In <span class="r_p_link"><a href="forums/viewforum.php?f=2">General Discussion</a></span> >> <span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=3&start=0#p6">new topic test</a></span>
					</tr></td></table>
					</td></tr>
					</table>
					<table class="recent_posts_table"><tr><td class="r_p_icon">
					<img src="images/recent_post.png" />

					</td><td class="r_p_subject">
					<span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=1">Welcome to phpBB3</a></span>
					</td><td class="r_p_spacer">
					</td><td>
					<table><tr><td>
					<span>by <a href="forums/memberlist.php?mode=viewprofile&u=2">admin</a>: about fourty minutes ago</span>
					</tr><tr>

					In <span class="r_p_link"><a href="forums/viewforum.php?f=2">General Discussion</a></span> >> <span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=1&start=0#p5">Re: phpBB</a></span>
					</tr></td></table>
					</td></tr>
					</table>
					<table class="recent_posts_table_2"><tr><td class="r_p_icon">
					<img src="images/recent_post.png" />

					</td><td class="r_p_subject">
					<span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=2">test</a></span>
					</td><td class="r_p_spacer">
					</td><td>
					<table><tr><td>
					<span>by <a href="forums/memberlist.php?mode=viewprofile&u=2">admin</a>: about fourty minutes ago</span>
					</tr><tr>

					In <span class="r_p_link"><a href="forums/viewforum.php?f=2">General Discussion</a></span> >> <span class="r_p_link"><a href="forums/viewtopic.php?f=2&t=2&start=0#p4">Re: test</a></span>
					</tr></td></table>
					</td></tr>
					</table>
					</div>
<div id="upcoming_events">c</div>

</div>


        </div>


        <div id="sponsors">
<object width="698" height="183">
<param name="movie" value="images/sponsors.swf">
<embed src="images/sponsors.swf" width="698" height="183">
</embed>
</object>
        </div>

        <div id="main-classes">
        <a href="http://www.mickeythompsontires.com/" target="_blank"><img src="images/105.png" border="0" /></a><br /><br /><br /><br />
        <a href="http://www.tciauto.com/" target="_blank"><img src="images/ls.png" border="0" /></a><br /><br /><br /><br />
        <a href="http://www.compcams.com/" target="_blank"><img src="images/ezs.png" border="0" /></a><br /><br /><br /><br />
        </div>
    </div>
</div>
</body>
</html>



@import url("../forums/styles/prosilver/theme/common.css");
@import url("../forums/styles/prosilver/themelinks.css");
@import url("../forums/styles/prosilver/themecontent.css");
@import url("../forums/styles/prosilver/themebuttons.css");
@import url("../forums/styles/prosilver/themecp.css");
@import url("../forums/styles/prosilver/themeforms.css");
@import url("../forums/styles/prosilver/themetweaks.css");
@import url("../forums/styles/prosilver/colours.css");


html {min-width:999px;}
body {
min-width:999px;    margin: 0px;
    padding: 0px;
    background: #000000 url(../images/repeatbg2.jpg) repeat-y 50&#37; -5px;
}
#container {
    text-align: center;
    width: 100%;
    background: url(../images/mainbg.jpg) no-repeat 50% 108px;
}
#top {
    text-align: center;
    min-width: 999px;
    height: 108px;
    background: #000 url(../images/top_bg.jpg) no-repeat 50%;
}
#top2 {
    position: relative;
    width: 999px;
    height: 108px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#main-container {
    position: relative;
    width: 1001px;
    min-height: 784px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
#main-nav {
    position: relative;
    margin-top: 0px;
    margin-left: 12px;
    width: 982px;
    height:58px;
    background-color: #434222;
}

#main-nav-2 {
    position: relative;
    height: 48px;
    margin-top: 0px;
    margin-left: 32px;
    background: #000 url(../images/userbg.jpg);
    width: 662px;
    line-height: 14px;
}

a:link	{ color: #d3d3d3; text-decoration: none; }
a:visited { color: #d3d3d3; text-decoration: none; }
a:hover	{ color: #d3d3d3; text-decoration: underline; }



#news
{
position: absolute;
left: 0px; top: 0px;
display: block;
  width: 94px;
  height: 58px;
  background: url("../images/nav/news.jpg") no-repeat 0 0;
}
#news:hover
{ 
  background-position: 0 -58px;
}
#news span
{
  display: none;
}

#forums
{
position: absolute;
left: 94px; top: 0px;
  display: block;
  width: 79px;
  height: 58px;
  background: url("../images/nav/forums.jpg") no-repeat 0 0;
}
#forums:hover
{ 
  background-position: 0 -58px;
}
#forums span
{
  display: none;
}

#classifieds
{
 position: absolute;
left: 173px; top: 0px;
  display: block;
  width: 106px;
  height: 58px;
  background: url("../images/nav/classifieds.jpg") no-repeat 0 0;
}
#classifieds:hover
{ 
  background-position: 0 -58px;
}
#classifieds span
{
  display: none;
}

#raceschedule
{
position: absolute;
left: 279px; top: 0px;
  display: block;
  width: 127px;
  height: 58px;
  background: url("../images/nav/raceschedule.jpg") no-repeat 0 0;
}
#raceschedule:hover
{ 
  background-position: 0 -58px;
}
#raceschedule span
{
  display: none;
}

#rulebooks
{
position: absolute;
left: 406px; top: 0px;  display: block;
  width: 105px;
  height: 58px;
  background: url("../images/nav/rulebooks.jpg") no-repeat 0 0;
}
#rulebooks:hover
{ 
  background-position: 0 -58px;
}
#rulebooks span
{
  display: none;
}

#standings
{
position: absolute;
left: 511px; top: 0px;  display: block;
  width: 96px;
  height: 58px;
  background: url("../images/nav/standings.jpg") no-repeat 0 0;
}
#standings:hover
{ 
  background-position: 0 -58px;
}
#standings span
{
  display: none;
}

#records
{
position: absolute;
left: 607px; top: 0px;  display: block;
  width: 86px;
  height: 58px;
  background: url("../images/nav/records.jpg") no-repeat 0 0;
}
#records:hover
{ 
  background-position: 0 -58px;
}
#records span
{
  display: none;
}

#photogallery
{
position: absolute;
left: 693px; top: 0px;
display: block;
  width: 125px;
  height: 58px;
  background: url("../images/nav/photogallery.jpg") no-repeat 0 0;
}
#photogallery:hover
{ 
  background-position: 0 -58px;
}
#photogallery span
{
  display: none;
}

#racerprofile
{
position: absolute;
left: 818px; top: 0px;
display: block;
  width: 164px;
  height: 58px;
  background: url("../images/nav/racerprofile.jpg") no-repeat 0 0;
}
#racerprofile:hover
{ 
  background-position: 0 -58px;
}
#racerprofile span
{
  display: none;
}



#main-content-holder {
    position: relative;
    margin-top: 0px;
    width: 758px;
    background:url(../images/repeatbg.jpg) repeat-y 0 0;
    overflow: hidden;
}
#content { 
padding: 10px;
    width: 738px;
    text-align: left;
    background: url(../images/contentbgtop.jpg) no-repeat;
    min-height: 678px;
}
#home_content1 {
    width: 758px;
    height: 391px;
    background: url(../images/home_contentbg1.jpg);
}
#home_content2 {
    width: 758px;
    height: 305px;
    background: url(../images/home_contentbg2.jpg);
}
#sponsors {
    margin-top: 55px;
    padding-top: 41px;
    text-align: center;
    width: 758px;
    height: 225px;
    background: url(../images/sponsors.png) no-repeat;
}

#main-classes {
    position: absolute;
    top: 150px;
    left: 797px;
    width: 203px;
    height: 626px;
}

#calholder {
width: 738px;
text-align: left;
}

#calendar {
width: 455px;
text-align: left;
}

#month {
margin-left: 40px;
font: 2em 'Trebuchet MS, sans-serif'; 
line-height: 1.25;
display: block;
}

.weekday {
margin-left: 20px;
text-align: center;
font: 1.125em 'Lucida Sans Unicode, sans-serif';
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}

.weekend {
margin-left: 20px;
text-align: center;
font: 1.125em 'Lucida Sans Unicode, sans-serif'; color: #c96e16;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}

.eventday1 {
background: #222;
margin-left: 20px;
text-align: center;
font: 1.5em 'Lucida Sans Unicode, sans-serif'; color: #FFF;
float: left;
width: 45px;
height: 45px;
line-height: 45px;
}


.chooser {
float: right;
margin-right: 10px;
margin-top: 10px;
}








#rules {
margin-top: 0px;
margin-left: 200px;
width: 500px;
}


.wireframemenu{
border: 1px solid #282828;
background-color: #202020;
border-bottom-width: 0;
width: 170px;
position: absolute;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
text-decoration: none;
border-bottom: 1px solid #303030;
}



html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #181818;
color: #FFF;
}


 img, div { behavior: url(../iepngfix.htc) }
 
.event {
padding: 20px;
width: 700px;
float: left;
position: relative;
}

.event img {
border: 10px solid black;
}



#advert {
background: #FFF;
position: relative;
width: 632px;
height: 77px;
left: 348px;
top: -92px;
}


#clicklogo {
position: relative;
width: 250px;
height: 108px;
left: 35px;
}


#home_1 {
float: left;
margin-left: 4px;
margin-top: 2px;
position: relative;
width: 396px;
height: 389px;
}

#home_2{
float: left;
margin-left: 7px;
margin-top: 2px;
position: relative;
top: 20px;
width: 320px;
height: 369px;
}

#news_chooser {
position: relative;
top: 5px;
margin-left: 5px;
width: 520px;
height: 30px;
}

#recent_forums {
margin-top: 55px;
margin-left: 15px;
width: 500px;
height: 185px;
}

#upcoming_events {
margin-top: -220px;
margin-left: 530px;
width: 200px;
height: 220px;
}

.recent_posts_table {
width: 482px;
height: 44px;
border-bottom: dashed 1px #CCC;
color: #aaa;
}

.recent_posts_table_2 {
width: 482px;
height: 44px;
color: #aaa;
}

.r_p_icon {
vertical-align: middle;
width: 40px;
height: 44px;
}

.r_p_subject {
vertical-align: middle;
height: 44px;
width: 170px;
}

.r_p_spacer {
height: 44px;
width: 12px;
}

.r_p_link a:link, .r_p_link a:visited {
color: #b4a03c;
}
r_p_link a:hover {
color: #e7d03a;
}


ul {
  list-style: none;
}

li ul {
	position: absolute;
	left: 400px;
	top: 50px;
	display: block;
	}
ul li a {
	display: block;
	text-decoration: none;
	color: #777;
	background: #fff;
	border-bottom: 0;
	}
li:hover ul { display: block; }

The imported stuff is mostly just style text, and stuff with the forums page, I don’t think it’s got anything to do with the problems happening.

In IE7 the main menu, the background images do not show, you just see a background color. In IE6… it looks like an earthquake hit. I’ll update with pictures soon incase you don’t have a way to see.
Thanks for looking, hope I can figure this out soon or I’m going to have to just redo the layout. Don’t have the time to play with it forever.

IE7

IE5 (looks similar to 6)

2

Hi, most of that is just IE6 increasing the height of an element to fit the children.


#main-nav,#top2{overflow:hidden;}

That will fix the header space and then the space under the horizontal nav.

The greyish boxes are the PNGs because IE6 and down don’t have support for transparency in PNGs so you need to impliment a png fix.

I notice when I load the page on my IE6t I get a JS error for the iepngfix.htc file, I don’t know if that happens for you too, though I’d use this twinhelix fix :slight_smile:

3

Okay, I applied the fix you provided and a png fix. Png fix didn’t do anything for IE6 (from the notes on the site, it said it was suppose to work for 5.5+). Seems like 5 & 6 are still a little screwy. Here is a shot of 6, 5 looks the same.

This is with the updated nav from the other topic.
If you look near the top (sorry I cut the top off for the most part) you can see stuff is shifted over to the left. Should be further to the right.

4

Point out the specific problems instead of just saying somethings “screwy” :slight_smile:

5

I marked what is messed up, that and the png fix doesn’t fix it for this version, but again I don’t know if it 100% is suppose to?

6

Yes it is, assuming you did it correctly and you catered for every element that has the PNG on it :slight_smile:

As for the Read more issue (background image too high up). You place the image on “#home_content1” and that is a far away parent, so basically you are guessing and hoping with all your might it will be pixel perfect in all browsers. Not the case.

Your best bet would be to slice that top of the paper out of the image, and then place that on the <p> surrounding the Read More link (give some top padding to space it out)

As for the vertical strip, (untested) but you are running into IE6’s double float mrgin bug. Add in display:inline; for “#home_1” and “#home_2”. I don’t know if that will completelky fix the issue (or even help).

The top right box with the gray…what’s wrong with that?

And give me a minute on the flames issue :slight_smile:

7

Vertical strip-once again you’re placing a background image on a far parent (#container) and your hoping to get it perfectly aligned. You have to realize that not every browser will render perfec.t You’d need a conditional comment to feed IE6/7 :slight_smile:

You’d probably need one for every wrong thing in that page you showed. Nothings “broken” per say, it’s just not perfectly aligned :slight_smile:

You have to ask yourself, is it worth messing with it to get it perfectly aligned? If the answer is no, just leave it.

If yes, buckle down and write conditional comments :slight_smile:

8

Okay, I’ll look in to the PNG issue a little more later, it’s fine for now though.

Now that you explained what the read more section is actually doing, it makes sense. I changed some of my php coding to shorten it up, the read me was located lower due to something I hadn’t gone and updated yet. Now that I fixed it, the problem is gone.

The vertical strip didn’t budge with making the display inline.

The top right section, seems the alignment is off by like 1px. I noticed this is actually in ALL versions of IE.

9

The top bit in the flames and the vertical bar is worth having perfect, but I’m not sure what would fix the issue is the only problem. I don’t have anything against a couple conditional comments.

10

You set %'s on background-position if I remember, and that is probably causing the 1px shift because browsers have to round up or down depending on the resolution.

Again, nothing you can do about that unless you wnat a CC :).

Since you apply the top part of the flames on a background on “#top” there isn’t much we can do about that, but if you want you could use a conditional comment to increase the left margin on “#main-nav-2” to have it match up with the flames.

11

Thanks a lot man, between this and the nav help I’m gonna be able to get back to making the drop down and can get back to the backend coding again. Thanks again!

12

You’re welcome :slight_smile: