PDA

View Full Version : Page messed up in IE6



CaptainB
Aug 10th, 2007, 07:39 PM
Hi guys!

When I coded this page: http://www.xflightx.port10.com/movies.php I only reviewed it in Firefox...So, now when I view it in IE6 it's totally messed up, but in Firefox it looks like it should. Does anybody know why??

HTML:

<div id="centerdiv-movie">

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\madeira_landing.gif" alt="Test Movie" border="0" /></div><div class="movie-text">
<h4>Madeira Landing</h4>
<p>The first flightsim movie I published. Good feedback on some forums made me continue "the production" :) </p>
</div>
<div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=qIgGFgyOezA" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\piper_landing.gif" alt="Piper Landing" border="0" /></div><div class="movie-text"><h4>Piper Landing</h4>My good, ole' Piper PA-28 lands at LFRD. This was my 2th video. Some of the sequences are too long, I'll try to fix that in my future movies.</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=GyIro2yK0Ec" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\dc-10_landing.gif" alt="Test Movie" border="0" /></div><div class="movie-text"><h4>Test Movie</h4>Not my best movie, however I like the soft landing :P</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=SELzEBtxMhU" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\757_spotter.gif" alt="757 Spotter" border="0" /></div><div class="movie-text"><h4>757 Spotter</h4>Some Boeing 757-200 spotting @ Mallorca.</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=srTL3HVu4Wg" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\iwishicouldfly.gif" alt="I Wish I could Fly" border="0" /></div><div class="movie-text"><h4>I Wish I could Fly</h4>A MD-11 departs EKCH(Kastrup, Denmark). When I rendered the movie it got darker than expected, but you can still see what it is.</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=CYG9rUE6Aw8" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\whatafeeling.gif" alt="What a Feeling" border="0" /></div><div class="movie-text"><h4>What a Feeling</h4>Soaring over Switzerland at dawn. This is my first Flight Simulator X movie.</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=YF_4nG24kIA" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\anger.gif" alt="Anger" border="0" /></div><div class="movie-text"><h4>Anger</h4>it all started off with a stall-recovery. It looked pretty cool, so I thought I'd better make a movie :)</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=aJ_0NTX2cNI" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\aalborgapproch.gif" alt="Aalborg Approch" border="0" /></div><div class="movie-text"><h4>Aalborg Approch</h4>An approch into Aalborg Airport(EKYT, my home airport) featuring "harkonnen's" great approch lights!<br/>Thanks bud!</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=lT8otQzPPt8" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\lynx_showoff.gif" alt="Lynx Showoff" border="0" /></div><div class="movie-text"><h4>Lynx Showoff</h4>Lynx is showing off at Frederikshavn Navy Station, Denmark.</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=9UOEFkcUPBk" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>

<div class="movie-container">
<div class="movie-thumb"><img src="images\movie_thumbs\airfield_activity.gif" alt="Airfield Activity" border="0" /></div><div class="movie-text"><h4>Airfield Activity</h4>Actually I had planned to film my first soaring ride, but unfortunatly my camcorder run short of battery. So, here's some of the airfield activity instead.</div><div class="movie-button"><a href=""><img src="images/knapper/download.gif" alt="Download" border="0" /></a><br/><br/><a href="http://www.youtube.com/watch?v=2P9IbEwSAjA" target="_blank"><img src="images/knapper/view.gif" alt="View" border="0" /></a> On YouTube.com</div></div>



</div>

And the CSS:

#centerdiv-movie { width:653px;
margin-right:auto;
margin-left:auto;
}

.movie-container { width:653px;
height:97px;
margin-bottom:10px;
}

.movie-thumb { width:130px;
height:97px;
float:left;
text-align:left;
margin-right:5px;
}


.movie-text { background-color:#333333;
width:316px;
height:83px;
padding-top:6px;
padding-bottom:8px;
padding-left:5px;
padding-right:5px;
float:left;
text-align:center;
margin-left:5px;
font-family:Arial;
font-weight:normal;
font-size:12px;
color:#ffffff;
}

.movie-button { background-color:#333333;
width:170px;
height:69px;
padding-top:20px;
padding-bottom:8px;
padding-left:5px;
padding-right:5px;
float:left;
text-align:left;
margin-left:5px;
font-family:Arial;
font-weight:normal;
font-size:12px;
color:#ffffff;
}

I have validated it with the W3C validator, and it finds no errors.

raghu207
Aug 10th, 2007, 09:12 PM
Hi..

Check your image sizes.. you gave .movie-thumb width as 130px while the images are around 134px.. change your image size, making it smaller than 130px.. it should work..

Cheers!
raghu207

raghu207
Aug 10th, 2007, 09:16 PM
oh, and btw, as a user who just visited that site you gave in the link, the images didnt appear for me in firefox.. I dont know why, but only the text in the 'alt' attribute show up.. just giving feedback..

Cheers!
raghu207

_Aerospace_Eng_
Aug 10th, 2007, 09:43 PM
oh, and btw, as a user who just visited that site you gave in the link, the images didnt appear for me in firefox.. I dont know why, but only the text in the 'alt' attribute show up.. just giving feedback..

Cheers!
raghu207
Its because their slashes are incorrect. They should be forward slashes not backslashes.

src="images/movie_thumbs/whatafeeling.gif"

thejflo
Aug 11th, 2007, 07:46 AM
That happened to me before. When you view your website in I.E 7 however (the latest version) its perfectly fine. So suggest to your visitors to make sure they're viewing the site in Firefox and/or the latest version of I.E. etc.

garydarling
Aug 11th, 2007, 09:11 AM
That happened to me before. When you view your website in I.E 7 however (the latest version) its perfectly fine. So suggest to your visitors to make sure they're viewing the site in Firefox and/or the latest version of I.E. etc.

People have various reasons for sticking with older browsers - can't afford a new computer, big company policy, who knows. Always try to make your code backwards compatible so you don't risk alienating your intended audience. It ain't that hard.

By the way, I have a killer website that will make everyone who views it an instant millionaire. You just need to upgrade your weak junk to Windows Billionaire Vista Pro with a 1,900gb hard drive, a Pentium Stratosphere chip, and IE9.5 to view it.

Sucks, don't it?

CaptainB
Aug 11th, 2007, 11:12 AM
Thanks raghu207, you saved my day! And yeah, Aero is right with the slashed...sigh @ me..! Now corrected :)

And I'm coding in Firefox and IE6, so it should work for everybody from IE6+. :thumbsup: