PDA

View Full Version : amateur site gone wrong in ie


al20051
11-11-2009, 12:19 PM
Hi,

im not very advanced with webdesign, but im trying to make a website with a jquery script (which is working fine) and when i test it in ie it ruins the layout.

in firefox everything is fine except the background color stops half way.

does anyone know how to fix the layout problem in ie and stop the active x warning? thanks, iv attached the files im using to this post.

gentleone
11-11-2009, 01:40 PM
Look at this snippet of the top of your page:

<html>
<head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>

Do you notice the <html> and <head> tags above the DOCTYPE? They shouldn't be there. Delete them and your problem might be solved.

After I posted I looked a little bit further and I saw more double tags. To fix them keep the following order:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
here your Meta tags, CSS and Javascripts
</head>

<body>
here your content
</body
</html>

What the heck! I've fixed it for you. Just copy.paste the whole code on top of your old.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="site_layout.css" rel="stylesheet" type="text/css">
<link href="mid_content.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

//Execute the slideShow
slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
$('#gallery a').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('#gallery a:first').css({opacity: 1.0});

//Set the caption background to semi-transparent
$('#gallery .caption').css({opacity: 0.7});

//Resize the width of the caption according to the image width
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});

//Get the caption of the first image from REL attribute and display it
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()',6000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));

//Get next image caption
var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );

//Display the content
$('#gallery .content').html(caption);


}

</script>
<style type="text/css">
body{
font-family:myriad pro
}

.clear {
clear:both
}

#gallery {
position:relative;
height:360px
}
#gallery a {
float:left;
position:absolute;
}

#gallery a img {
border:none;
}

#gallery a.show {
z-index:500
}

#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:94;
}

#gallery .caption .content {
margin:5px
}

#gallery .caption .content h3 {
margin:0;
padding:0;
color:#0FF;
font-family:myriad pro;
font-style:italic;
}


</style>
</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Untitled-2.psd) -->
<div class="container">
<table width="1173" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="4">
<img src="images/Top_banner.gif" width="1173" height="66" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Logo.gif" width="235" height="266" alt=""></td>
<td colspan="3"><div class="gallery_home"><div id="gallery">

<a href="#" class="show">
<img src="images/flowing-rock.jpg" alt="Flowing Rock" width="938" height="266" title="" rel="<h3>Flowing Rock</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "/>
</a>

<a href="#">
<img src="images/grass-blades.jpg" alt="Grass Blades" width="938" height="266" title="" rel="<h3>Grass Blades</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. "/>
</a>

<a href="#">
<img src="images/ladybug.jpg" alt="Ladybug" width="938" height="266" title="" rel="<h3>Ladybug</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
</a>

<a href="#">
<img src="images/lightning.jpg" alt="Lightning" width="938" height="266" title="" rel="<h3>Lightning</h3>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."/>
</a>

<a href="#">
<img src="images/lotus.jpg" alt="Lotus" width="938" height="266" title="" rel="<h3>Lotus</h3>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."/>
</a>

<a href="#">
<img src="images/mojave.jpg" alt="Mojave" width="938" height="266" title="" rel="<h3>Mojave</h3>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt."/>
</a>

<a href="#">
<img src="images/pier.jpg" alt="Pier" width="938" height="266" title="" rel="<h3>Pier</h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."/>
</a>

<a href="#">
<img src="images/sea-mist.jpg" alt="Sea Mist" width="938" height="266" title="" rel="<h3>Sea Mist</h3>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."/>
</a>

<a href="#">
<img src="images/stones.jpg" alt="Stone" width="938" height="266" title="" rel="<h3>Stone</h3>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."/>
</a>

<div class="caption"><div class="content"></div></div>
</div></div></td>
</tr>
<tr>
<td colspan="2"><div class="layout_mid_left">Content for class "layout_mid_left" Goes Here</div></td>
<td>
<img src="images/PIPvar2_05.gif" width="20" height="180" alt=""></td>
<td><div class="layout_mid_right">Content for class "layout_mid_right" Goes Here</div></td>
</tr>
<tr>
<td colspan="4">
<img src="images/lower_body.png" width="1173" height="512" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="235" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="464" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="20" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="454" height="1" alt=""></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

By the way, if you just started with web design why not start learning immediately building your website with div's and CSS. Tables is NOT the way it should be. So don't use 'Save for Web Slices' in Photoshop either, because Photoshop is the best for image enhancement, but terrible to generate a HTML document.

Corrosive
11-11-2009, 04:27 PM
<!-- End Save for Web Slices -->

As a campaign motto this is spot on...as a web design strategy, it ain't ;)

gentleone
11-11-2009, 05:03 PM
As a campaign motto this is spot on...as a web design strategy, it ain't ;)

hahhaha... good one! But will there come a time that it is really the end with 'save for the web slices' and its spacer gif's? :)

Corrosive
11-11-2009, 05:11 PM
But will there come a time that it is really the end with 'save for the web slices' and its spacer gif's? :)

*sigh* probably not. Especially when people keep insisting on learning 'web design' from Youtube tuts!