11 replies [Last post]
nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Hello, I'm having a few problems that hopefully someone can help me with. The link is http://www.extrememonstertrucknational.com

IE:
1. I have a background image in my #content section that I'm trying to display as a watermark. However nothing is appearing.

2. I have an image of a tire that I want to display at the bottom right of the page. The bottom of the image is located in my #footer, so I want it to line up with that image. I'm not even close. I don't know how to fix it because content is going to change from page to page so if it is a fixed position it will have to change with each page.

Firefox:
1. My main content is pushed to the left. I have a left border, main, right border. In firefox the left border is being ignored by my main section.

2. Watermark not displaying (same as above)

3. Tire image (same as above)

HTML

Untitled Document

function MM_CheckFlashVersion(reqVerStr,msg){
with(navigator){
var isIE = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
if (!isIE || !isWin){
var flashVer = -1;
if (plugins && plugins.length > 0){
var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
if (desc == "") flashVer = -1;
else{
var descArr = desc.split(" ");
var tempArrMajor = descArr[2].split(".");
var verMajor = tempArrMajor[0];
var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
flashVer = parseFloat(verMajor + "." + verMinor);
}
}
// WebTV has Flash Player 4 or lower -- too low for video
else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

var verArr = reqVerStr.split(",");
var reqVer = parseFloat(verArr[0] + "." + verArr[2]);

if (flashVer < reqVer){
if (confirm(msg))
window.location = "http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash";
}
}
}
}










Grave Digger



Welcome - Extreme Monster Truck Nationals

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellen
tesque eget leo. Cras vel ipsum. Mauris tempor nisl et nulla. Quisque vel lacus. Etiam vel ligula non libero fringilla laoreet. Mauris velit augue, tincidunt sed, nonummy commodo, vulputate in, velit. Vestibulum scelerisque condimentum ante. Suspendisse nisi nulla, faucibus in, viverra et, varius ut, enim. Sed tempus porttitor enim. Vivamus ut leo. Etiam sem mauris, bibendum a, elementum ut, fringilla in, magna. Donec suscipit justo ac pede. Integer pharetra nisl ac nibh. Etiam viverra, mi et placerat gravida, felis mi suscipit dolor, eget feugiat eros elit et est.


News - Extreme Monster Truck Nationals

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellen
tesque eget leo. Cras vel ipsum. Mauris tempor nisl et nulla. Quisque vel lacus. Etiam vel ligula non libero fringilla laoreet. Mauris velit augue, tincidunt sed, nonummy commodo, vulputate in, velit. Vestibulum scelerisque condimentum ante. Suspendisse nisi nulla, faucibus in, viverra et, varius ut, enim. Sed tempus porttitor enim. Vivamus ut leo. Etiam sem mauris, bibendum a, elementum ut, fringilla in, magna. Donec suscipit justo ac pede. Integer pharetra nisl ac nibh. Etiam viverra, mi et placerat gravida, felis mi suscipit dolor, eget feugiat eros elit et est.


Monster Truck - Extreme Monster Truck Nationals

Monster Truck - Extreme Monster Truck Nationals


Monster Truck - Extreme Monster Truck Nationals






Upcoming Events




Hello


Hello


Hello




more






Performers




Hello


Hello


Hello




more




Tire - Extreme Monster Truck Nationals









CSS

/* CSS Document */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-color:#000000;
margin: 0px;
padding: 0px;
}

#container {
width: 780px;
height: auto;
margin: 0px auto;
background-color: #FFFFFF;
color: #000000;
overflow: hidden;
}

#header {
width: 780px;
height: 199;
margin: 0px;
}

#top1 {
width: 306px;
height: 199px;
background-image: url(images/extreme_top1.jpg);
background-repeat: no-repeat;
float: left;
}

#top2 {
width: 140px;
height: 199px;
background-image: url(images/extreme_top2.jpg);
background-repeat: no-repeat;
float: left;
}

#top3 {
width: 250px;
height: 199px;
background-image: url(images/extreme_top3.jpg);
background-repeat: no-repeat;
float: left;
}

#top4 {
width: 84px;
height: 199px;
background-image: url(images/extreme_top4.jpg);
background-repeat: no-repeat;
float: left;
}

#border_left {
width: 17px;
height: auto;
background-image: url(images/border.jpg);
background-repeat: repeat-y;
float: left;
margin: 0px 0px -3000px 0px;
padding: 0px 0px 3000px 0px;
overflow: hidden;
}

#main {
width: 780px;
height: auto;
}

#content {
width: 746px;
height: auto;
float: left;
background-image: url(images/watermark.jpg) no-repeat bottom;
}

#border_right {
width: 17px;
height: auto;
background-image: url(images/border.jpg);
background-repeat: repeat-y;
float: right;
margin: 0px 0px -3000px 0px;
padding: 0px 0px 3000px 0px;
overflow: hidden;
}

#border_bottom {
width: 780px;
height: 20px;
background-image: url(images/bottom_border.jpg);
background-repeat: no-repeat;
clear: both;
}

#navigation {
width: 746px;
height: 40px;
float: left;
}

.home {
width: 85px;
height: 40px;
float: left;
}

.bullet {
width: 13px;
height: 40px;
float: left;
}

.about {
width: 63px;
height: 40px;
float: left;
}

.schedule {
width: 94px;
height: 40px;
float: left;
}

.store {
width: 57px;
height: 40px;
float: left;
}

.media {
width: 61px;
height: 40px;
float: left;
}

.performers {
width: 112px;
height: 40px;
float: left;
}

.tickets {
width: 74px;
height: 40px;
float: left;
}

.contact {
width: 108px;
height: 40px;
float: left;
}

.leftcolumn {
width: 542px;
height: auto;
float: left;
}

.truck {
width: 281px;
height: 188px;
margin: 15px 0px 0px 5px;
float: left;
}

.interview {
width: 256px;
height: 208px;
background-color: #000000;
float: left;
}

.text {
width: 537px;
height: auto;
clear: both;
margin:5px 0px 0px 5px;
}

.rightcolumn {
width: 204px;
height: auto;
float: left;
}

.textgraphic {
width: auto;
height: auto;
margin-bottom: 10px;
}

.smallmonster {
width: auto;
height: 108px;
float: left;
margin: 5px 40px 5px 5px;
}

.box {
width: 180px;
height: auto;
margin: 0px 5px 20px 10px;
border: #000000 3px solid;
background-color: #f34020;
}

.blacktop {
width: 180px;
height: 22px;
background-color: #000000;
color: #FFFFFF;
}

.blacktop p {
font-size: 18px;
text-align: center;
font-family: Helvetica, Verdana, Arial, sans-serif;
margin: 0px;
font-weight: bold;
}

.orangemid {
width: 180px;
height: auto;
background-color: #f34020;
}

.blackbot {
width: 180px;
height: 14px;
background-color: #000000;
color: #FFFFFF;
}

.blackbot p {
font-size: 12px;
text-align: right;
font-family: Helvetica, Verdana, Arial, sans-serif;
margin: 0px 5px 0px 0px;
font-weight: bold;
}

.tire {
width: 185px;
height: 217px;
vertical-align: bottom;
margin: 5px;
}

#footer {
width: 745px;
height: 36px;
background-image: url(images/footer.png);
clear: both;
}

#footer p {
color: #FFFFFF;
font-size: 18px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
margin: 5px 0px 0px 10px;
}

Thanks,

nofx1728

nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Alright, I fixed the

Alright, I fixed the background image not displaying not sure what the problem was, went back and resaved the image and typed the entire #id back in and it appeared. I also got the tire to display semi properly. I had to create another #div and stick it under the #leftcolumn & #rightcolumn. Not quite what I wanted because now it is under and has a little more space then I wanted, but it is good enough (at least for now.) I'm still stuck on this firefox push though. I went back and checked all my #divs and they are all closed properly. left_border is set to float: left and content is set to float: left I'm not sure why firefox is ignoring the float. Any help on this issue would be greatly appreciated. It is driving me crazy.

Thanks,

nofx1728

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Firefox (and other standards

Firefox (and other standards conforming browsers) are rendering it correctly. The left border has no height and therefor the next float just floats right on by. You could give Firefox a larger left margin and feed just IE a small left margin, but I would suggest a total redo. You have a strong case of divitis. You should recode the entire html using semantic markup. Try to get away form the table mentality - there is no reason to have a left and right border column float. I see no headers on the page, and many lists that should be marked up as such.

nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

How would I go about setting

How would I go about setting up the left and right borders w/o float? Since the image is repeating I can't put a height on it, I don't know how large the page is going to be. Can you give me an example of the lists? I'm sure this is pretty basic, but I'm obviously not that good. Thanks for the response.

nofx1728

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

You could place a repeating

You could place a repeating background in the container. It will produce the background for the header, the left and right sides, and underneath the footer. Then the content area can have a white background covering the diamondplate for the text areas. Here's an example of I would code the html.

AttachmentSize
monster.html.txt 4.78 KB
nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Hey, thanks for all our help

Hey, thanks for all our help in this. I appreciate it. I sill have a lot to learn but thanks to help from people like you it makes it much easier.

Thanks again,

nofx1728

nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Alright, I've tried to build

Alright, I've tried to build this page based on your suggestions. Most of it is displaying correctly. However, I'm having a few problems that I can't seem to figure out w/o adding in more .div. So I wanted to see what you suggest.

1. The spacing in the right column - on my dl and ul I can't get the spacing w/o effecting things I don't want to. For example in the events sections I would like there to be a 5px gap between each event. But if I put that gap it seperates either the h3 or the .more section. The other problem I have is the .more section is in an li which i stylized for the performers above. I can't get the .more section to styling how I want it. Which is text-align: right; font-size: 10px;

2. I can't get the tire_bottom.jpg to line up with the part of the image that is in the footer_bg. The .rightcolumn doesn't extend far enough for the image to reach it. I can fake it and add a huge margin until it fits correctly, but if I add text to the next page then it wont work.

3. For some reason in IE it is not listening to my margin for the .smallmonster

I can achieve the effect I want with the .rightcolumn boxes by adding .div but you said I shouldn't do that. I can achieve the tire effect by faking a margin - but I doubt that is the correct way to do it. And I have no clue what is wrong with the margin in IE. Any clue how I can fix these minor problems? PS - you mentioned in the html there is a better way to insert flash into html. Is this how I would do it?


<img src="/banner.gif" width="256" height="208" alt="banner" />

http://www.extrememonstertrucknational.com/test.html




Untitled Document



  <div id="container">
  
    <div id="header">
      <a href="/index.html" rel="nofollow"><img src="/images/images/extreme_text.png" alt="Extreme Monster Truck Nationals" width="277" height="200" border="0" /></a>
	  <div class="bursting"><img src="/images/images/monster_truck_bursting.png" alt="Extreme Monster Truck Nationals - Truck Bursting Image" width="324" height="200" /></div>    </div>

	<div id="content">
	
	<ul id="navigation">
	  <li><a href="/" rel="nofollow">Home</a> •</li>
	  <li><a href="/about.html" rel="nofollow">About</a> •</li>
	  <li><a href="/schedule.html" rel="nofollow">Schedule</a> •</li>
	  <li><a href="/performers.html" rel="nofollow">Performers</a> •</li>
	  <li><a href="/store.html" rel="nofollow">Store</a> •</li>
	  <li><a href="/media.html" rel="nofollow">Media</a> •</li>
	  <li><a href="/tickets.html" rel="nofollow">Tickets</a> •</li>
	  <li><a href="/contact.html" rel="nofollow">Contact</a></li>
	</ul>
					
    <div class="leftcolumn">
      <img src="/images/equalizer.jpg" alt="Equalizer - Extreme Monster Truck Nationals" width="281" height="208" />
      
      <div class="interview"> 
        
          
          
          
          
          
          
        
      </div>
      
      <h2><img src="/images/welcome_graphic.jpg" alt="Welcome - Extreme Monster Truck Nationals" width="91" height="26" /></h2>
      <p class="text">Extreme Monster Truck Nationals is about one thing... ENTERTAINMENT! When you come to our show you are going to see constant action. We have the Biggest, Baddest, and loudest Trucks you've ever seen! But our show doesn't stop at the Trucks, we have EXTREME activities throughout the events. Extreme Monster Truck Nationals has quad races, FMX Motorcross jumping, Fire Breathing Dragon Draco, the famous Green Mamba and much more. You wont believe your eyes when this jet engine sends sparks flying, creating a lightshow, as it melts cars! Extreme Monster Truck Nationals is a one of a kind show that will keep you wanting more. Purchase your tickets today!</p>
      <h2><img src="/images/news_graphic.jpg" alt="News - Extreme Monster Truck Nationals" width="50" height="26" /></h2>
      <p class="text">Extreme Monster Truck Nationals is off to a great 2007 year. We've already completed shows in Louisiana, Ohio, Nevada, Illinois, Oklahoma, Georgia and Mississippi. Our next stop is Florida where we will have events in Ft. Pierce, Sebring, Punta Gorda, Ft. Walton and Tallahassee. Our shows continue to provide excitement and entertainment for all ages. Kids can get rides in a real monster truck and meet Spiderman, and the power these trucks possess can make adults feel like children again.</p>
      
      <div class="smallmonster">
        <img src="/images/truck1.jpg" alt="Monster Truck - Extreme Monster Truck Nationals" />
        <img src="/images/truck2.jpg" alt="Monster Truck - Extreme Monster Truck Nationals" />
        <img src="/images/truck3.jpg" alt="Monster Truck - Extreme Monster Truck Nationals" />
      </div>
    </div> 
    
    <div class="rightcolumn">
      <h3>Upcoming Events</h3>
      <dl class="events">
        <dt>April 13 - 15</dt>
        <dd>St. Lucie County Fairgrounds</dd>
        <dd>Ft. Pierce, FL</dd>
        <dt>April 21 - 22</dt>
        <dd>Sebring International Raceway</dd>
        <dd>Sebring, FL</dd>
        <dt>May 4 - 6</dt>
        <dd>Charlotte County Motorsports Park</dd>
        <dd>Punta Gorda, FL</dd>
        <dt>May 18 - 20</dt>
        <dd>Ft. Walton Beach Fairgrounds</dd>
        <dd>Ft. Walton Beach, FL</dd>
        <dt>June 1 - 3</dt>
        <dd>Tallahassee Fairgrounds</dd>
        <dd>Tallahassee, FL</dd>
        <dt class="more"><a href="/events.html" rel="nofollow">more</a></dt>
      </dl>
      
      <h3>Performers</h3>
      <ul class="performers">
        <li>Equalizer</li>
        <li>Reaper</li>
        <li>Get 'er Done</li>
        <li>Raggin' Rebel</li>
        <li>Hot Tamale</li>
        <li class="more"><a href="/performers.html" rel="nofollow">more</a></li>
      </ul>
      
      <img class="bottom" src="/images/tire_bottom.jpg" alt="Tire Bottom" width="185" height="214" />    </div> 
    
    
    <div id="footer">
      <p><a href="/contact.html" rel="nofollow">contact</a> - <a href="/sitemap.html" rel="nofollow">site map</a></p>
    </div>
    
    </div> 
    
  </div> 


/* CSS Document */

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
background-color:#000000;
margin: 0px;
padding: 0px;
}

#container {
width: 780px;
height: auto;
margin: 0px auto;
background-image: url(images/images/diamond_bg.jpg);
background-repeat: repeat;
color: #000000;
overflow: hidden;
}

#header {
width: 746px;
height: 200px;
margin: 0px 17px 0px 17px;
}

#header h1 {
float: left;
margin: 0px 0px 0px 20px;
padding: 0px;
}

.bursting {
float: right;
margin: 0px 20px 0px 0px;
}

#main {
width: 780px;
height: auto;
}

#content {
width: 746px;
height: auto;
float: left;
margin: 0px 17px 17px 17px;
background-color: #FFFFFF;
}


ul {
margin: 0px 0px 0px;
padding: 5px 0px 0px;
}

#navigation {
width: 746px;
height: 40px;
float: left;
background-image: url(images/images/nav_bg.jpg);
background-repeat: no-repeat;
margin: 0px;
text-align: center;
}

#navigation li {
display: inline;
font-size: 20px;
color: #FFFFFF;
margin: 0px;
padding: 0px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
}

#navigation a {
color: #FFFFFF;
text-decoration: none;
}

.leftcolumn {
width: 542px;
height: auto;
margin: 0px 0px 0px 0px;
float: left;
}

.leftcolumn img {
width: 281px;
height: 208px;
margin: 0px 0px 0px 5px;
float: left;
}

.leftcolumn h2 img {
width: auto;
height: auto;
margin: 5px 0px 10px 5px;
}

.interview {
width: 256px;
height: 208px;
background-color: #000000;
float: left;
margin: 0px;
}

.text {
width: 537px;
height: auto;
clear:  both;
margin:5px 0px 0px 5px;
}

.rightcolumn {
width: 194px;
height: auto;
float: left;
margin: 0px 0px -3000px 10px;
padding: 0px 0px 3000px 0px;
overflow: hidden;
}

.smallmonster {
width: auto;
height: 108px;
float: left;
margin: 5px 0px 10px 0px;
}

.smallmonster img {
width: auto;
height: 108px;
margin: 5px 25px 5px 5px;
}

h3 {
width: 180px;
height: 22px;
background-color: #000000;
color: #FFFFFF;
margin: 0px;
padding: 0px;
text-align: center;
font-size: 18px;
text-align: center;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
}

.events {
width: 180px;
height: auto;
background-color: #f34020;
}

.performers {
width: 180px;
height: auto;
background-color: #f34020;
}

.rightcolumn dl {
margin: 0px 0px 20px;
padding: 0px;
}

.rightcolumn dt {
margin: 0px 0px 0px;
padding: 0px;
font-size: 10px;
color: #FFFFFF;
}

.rightcolumn dd {
margin: 0px 0px 0px;
padding: 0px;
font-size: 10px;
color: #FFFFFF;
}

.rightcolumn ul {
margin: 0px 0px 10px;
padding: 0px;
}

.rightcolumn li {
margin: 0px 0px;
padding: 0px;
text-decoration: none;
list-style-image: none;
list-style: none;
text-align: center;
color: #FFFFFF;
font-size: 18px;
font-family: Boulder, Arial, Helvetica, sans-serif;
}

.rightcolumn li .more {
width: 180px;
height: 14px;
font-size: 12px;
background-color: #000000;
color: #FFFFFF;
text-align: right;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.rightcolumn li .more a {
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 5px 0px 0px;
text-align: right;
font-size: 12px;
}

.more {
width: 180px;
height: 14px;
font-size: 12px;
background-color: #000000;
color: #FFFFFF;
text-align: right;
}

.more a {
text-decoration: none;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
margin: 0px 5px 0px 0px;
}

#footer {
width: 746px;
height: 36px;
background-image: url(images/images/footer_bg.jpg);
clear: both;
margin: 0px;
}

#footer p {
color: #FFFFFF;
font-size: 18px;
font-family: Helvetica, Verdana, Arial, sans-serif;
font-weight: bold;
margin: 0px 0px 0px 10px;
padding: 5px 0px 0px 0px;
}

#footer a {
color: #FFFFFF;
text-decoration: none;
}

I know you already helped me plenty so if you don't respond I completely understand. But if anyone can figure out an answer the the question above I would be very greatful.

Thanks,

nofx1728

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 37 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

For the tyres image you

For the tyres image you could try this:

img.bottom{
position:absolute;
right:7px;
bottom:36px;
}

You will need to state position:relative on the #content ruleset though for positioning context

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

For the right column in

For the right column in general I'd make the following changes:

give the h3 some more breathing room. change height to 26px and add line-height: 26px;
in the dl change the padding to 1px 0 0 0; this gives the dt margin something to 'push' against.
in the dt change margin to 1em 0 0 0; font-size to 11px; font-weight: bold; padding: 0 0 0 5px;
in the dd also change padding to 0 0 0 5px;
in the class .more delete the width and increase height to 18px; also change the css selector to read .events dt.more, .performers li.more { } then delete the rules .rightcolumn li.more and .rightcolumn li.more a

chagne padding in .rightcolumn ul to 1px 0 0 0;
change margin in .rightcolumn li to .5em 0 0 0;

For problem 2: (as Hugo states above)
add position: relative to #content
add .bottom { position: absolute; bottom: 36px; right: 7px;}
change padding on .rightcolumn to 0 0 220px 0; and set margin to 0;

For problem 3: I'm looking into now...

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 29 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

For problem 3, simply remove

For problem 3, simply remove the float from .smallmonster - IE has all kinds of float and margin problems and it's just not needed here.

nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

You guys are absolutely

You guys are absolutely amazing. Every thing you two mentioned worked perfect. I can't thank you enough. I only hope one day I can be half as good as you are. Thank you so much for your help.

Thanks,

nofx1728

nofx1728
Offline
Regular
Florida
Last seen: 8 years 41 weeks ago
Florida
Timezone: GMT-5
Joined: 2006-11-21
Posts: 32
Points: 4

Sorry to bring this back up

Sorry to bring this back up but this is a problem I just noticed. IE 6 is way off. It's acting really strange and I've never seen anything like this. When the page is first loaded the images are really stretched and blury. If you scroll down and then scroll back up the image appears correct, and if you refresh it the image appears correct. But the right side of the border isnt showing up either. Should I recreate this whole site from a different css for IE6 or am I doing something wrong? Also, .png aren't displaying their alpha property which I've never had a problem with before. http://www.extrememonstertrucknational.com

Thanks,

nofx1728