Hi there! I have a website at www.thetotempole.ca and when viewed in IE9... My websites content box (The green wooden backgrounded box with content inside) is moved slightly over to
the left making a space between
the actual container and
the content box... Is there anyway I can fix this without harming any of
the other browsers? Thanks!
Screenshot:
HTML:
<!DOCTYPE html>
<head>
<title>The Totem Pole News - Movies</title>
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-45342007-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta charset="utf-8">
<meta name="description" content="A totem pole themed news website posting articles on news, music, movies, video games, and health.">
<link href="thecss2.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/ico" href="images/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=8" />
</head>
<body>
<div id="container">
<div id="contentbox" align="Center">
<a href="index.html"><div id="banner" align="Center">
</div></a>
<div id="navbar">
<p><a href="index.html"><img src="images/home.png" width="65" height="54" alt="picture of a house to relate to
the home page (content)" style="position: absolute; left: 23px; top: 16px; width: 57px; height: 48px;"><span style="position: absolute; left: 24px; z-index:2; top: 71px; height: 23px;">Content</span></a>
<a href="#"><img src="images/eagleicon.gif" width="73" height="39" alt="An Eagle icon for
the News section of
the Totem Pole" style="position: absolute; left: 111px; top: 28px;"><span style="position: absolute; z-index: 2; left: 127px; top: 72px;">News</span></a>
<a href="#"><img src="images/owlicon.gif" width="81" height="61" alt="An Owl icon for
the Music section of
the totem pole" style="position: absolute; left: 210px; top: 11px;"><span style="position: absolute; z-index:2; left: 226px; top: 73px;"><strong>Music</strong></span></a><a href="movies.html"><img src="images/wolficon.gif" width="88" height="54" alt="A Wolf icon for
the Movies section of
the totem pole" style="position: absolute; left: 320px; top: 15px;"><span style="position: absolute; left: 336px; top: 72px; z-index:2;"><strong>Movies</strong></span></a>
<a href="#"><img src="images/hareimage.gif" width="60" height="56" alt="A Hare icon for Video Game section of
the Totem Pole" style="position: absolute; left: 441px; top: 13px;"><span style="position: absolute; z-index:2; left: 428px; top: 73px;"><strong>Video Games</strong></span></a>
<a href="#"><img src="images/bearicon.gif" width="91" height="57" alt="A bear icon for
the Health section of
The Totem Pole" style="position: absolute; left: 551px; top: 13px;"><span style="position: absolute; left: 580px; top: 72px; z-index:2;">Health</span></a></p>
</div>
<!--Nav Bar 2-->
<div id="navbar2">
<a href="#">About Us</a> <a href="#">Feedback</a> <a href="#">Subscribe</a>
</div>
<!-- Atomz HTML for Search -->
<div id="searchbar">
<form method="get" action="http://search.atomz.com/search/">
<input id="searchbox" size="13" name="sp_q" value="Search..." onFocus="if (this.value == 'Search...') {this.value=''}">
<input class="css_btn_class" type="submit" value="Search">
<input type="hidden" name="sp_a" value="sp1005092e">
<input type="hidden" name="sp_p" value="all">
<input type="hidden" name="sp_f" value="UTF-8">
</form>
</div>
<!-- Start WOWSlider.com BODY section -->
<div id="mywowslider">
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="images/anchor.jpg" alt="Ron Burgundy" title="Ron Burgundy" id="wows1_0"/>Played by Will Ferrell</li>
<li><img src="images/anchor2.jpg" alt="Brian Fantana" title="Brian Fantana" id="wows1_1"/>Played by Paul Rudd</li>
<li><img src="images/anchor3.jpg" alt="Brick Tamland" title="Brick Tamland" id="wows1_2"/>Played by Steve Carrell</li>
<li><img src="images/anchor4.jpg" alt="Champ Kind" title="Champ Kind" id="wows1_3"/>Played by David Koechner</li>
</ul>
</div>
<div class="ws_bullets"><div>
<a href="#" title="Ron Burgundy"><img src="images/anchor.jpg" alt="Ron Burgundy"/>1</a>
<a href="#" title="Brian Fantana"><img src="images/anchor2.jpg" alt="Brian Fantana"/>2</a>
<a href="#" title="Brick Tamland"><img src="images/anchor3.jpg" alt="Brick Tamland"/>3</a>
<a href="#" title="Champ Kind"><img src="images/anchor4.jpg" alt="Champ Kind"/>4</a>
</div>
</div>
<span class="wsl"><a href="http://wowslider.com"></a></span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</div>
<!-- End WOWSlider.com BODY section -->
<!-- AddThis Smart Layers BEGIN -->
<!-- Go to http://www.addthis.com/get/smart-layers to customize -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5279b96309e7df24"></script>
<script type="text/javascript">
addthis.layers({
'theme' : 'transparent',
'share' : {
'
position' : 'left',
'numPreferredServices' : 5
}
});
</script>
<!-- AddThis Smart Layers END -->
<div id="sources"><p>
Source(s): <a href="http://en.wikipedia.org/wiki/Anchorman_2:_The_Legend_Continues">wikipedia.com</a></p></div>
<div id="infocontent">
<p align="left"><em><strong> Anchorman 2:
The Legend Continues</strong></em> is an upcoming American comedy film being released on December 20, 2013, also a sequel to
the 2004 film <em>Anchorman:
The Legend of Ron Burgandy</em>. On March 28, 2012, actor Will Ferrell officially announced
the sequel dressed in character as Ron Burgundy on
the late-night talk-show <em>Conan</em>. As with
the original film, it is directed by Adam McKay, produced by Judd Apatow, stars Will Ferrell and is written by Adam McKay and Will Ferrell. Unlike
the original film, which was distributed by DreamWorks Pictures, <em>The Legend Continues</em> will be distributed by Paramount Pictures.</p>
<p align="left"><em><strong> </strong></em>The movie now has a website at <a href="www.anchormanmovie.com">www.anchormanmovie.com</a> where a countdown for
the release of this film can be seen. By
the looks of these images, I think we can expect big things when
the movie comes out this December. Enjoy
the poster photos and trailers all posted below, and don't forget to submit your vote in
the poll!</p>
</div>
<div id="trailer1"><iframe width="560" height="315" src="//www.youtube.com/embed/Elczv0ghqw0?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div id="trailer2">
<iframe width="560" height="315" src="//www.youtube.com/embed/mZ-JX-7B3uM?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div id="poll">
<form method="post" action="http://poll.pollcode.com/763294"><table style="border: black 1px solid;" border="1" width="175" bgcolor="EEEEEE" cellspacing="2" cellpadding="0"><tr><td colspan="2" height="10"><font face="Verdana" size="2" color="000000"><b>What Rating Do You Think This Will Recieve</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="763294answer1"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer1">10</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="763294answer2"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer2">9</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="763294answer3"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer3">8</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="763294answer4"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer4">7</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="5" id="763294answer5"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer5">6</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="6" id="763294answer6"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer6">5</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="7" id="763294answer7"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer7">4</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="8" id="763294answer8"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer8">3</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="9" id="763294answer9"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer9">2</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="10" id="763294answer10"></td><td> <font face="Verdana" size="2" color="000000"><label for="763294answer10">1</label></font></td></tr><tr><td colspan="2" height="10"><center><input type="submit" value=" Vote "> <input title="Clicking this will send you to a new page" type="submit" name="view" value=" View "></center></td></tr><tr><td colspan="2" align="right"><font face="Verdana" height="5" size="1" color="000000"></font></td></tr></table></form></div>
<span style="position: absolute; left: 0px; top: 225px; width: 1000px; border-bottom: 2px black double; height: 58px;">
<h1 style="font-weight: normal; font-size:28px"><em>Anchorman 2 Arrives Soon</em></h1></span>
<div id="contentbox2"></div>
<!--Footer Div -->
<center><div id="footer"><a href="#">Sitemap</a> <a href="#">About Us</a> <a href="#">Feedback</a></div></center> <div id="disqus"><div id="disqus_thread"></div>
<script type="text/javascript">
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
var disqus_shortname = 'thetotempoleanchorman2'; // required: replace example with your forum shortname
/* * * DON'T EDIT BELOW THIS LINE * * */
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view
the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a></div>
<!-- This is
the end of
the contentbox --></div>
<!-- This is
the end of
the container div -->
</div>
</body>
</html>
CSS:
html {
background: url(images/pine.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale')";
}
body {
margin-bottom:0px;
font-family: Verdana, Geneva, sans-serif;
}
a {
outline : none;
border: none;
}
a:hover {
color: #0FC;
}
#container {
width: 1000px;
height:1924px;
position:relative;
margin-right: auto;
margin-left: auto;
z-index:1;
margin-bottom: 50px;
}
#facebook {
position:fixed;
right:100px;
z-index:15;
}
#twitter {
position:fixed;
z-index:16;
right:120px;
}
#google {
position:fixed;
top:7px;
right: 135px;
}
#socialmediaplugins {
text-align: right;
position: fixed;
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
margin: 0px;
top: 0px;
left: 0px;
right: 0px;
z-index:14;
}
#searchbox {
background-color:#01bff6;
border-radius:4px;
}
#searchbox:hover {
background-color:#76b618;
border-radius:4px;
}
#searchbox:active {
background-color:#01bff6;
border-radius:4px;
}
#contentbox {
background-color:black;
background-image:url(images/wooden.jpg);
width: 1000px;
margin-bottom:50px;
height: 1924px;
box-shadow:2px 2px 10px 10px #060606;
-webkit-box-shadow:2px 2px 10px 10px #060606;
-moz-box-shadow:2px 2px 10px 10px #060606;
/* For IE<9 */
filter:
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5),
progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2);
}
#contentbox2 {
background-image:url(images/woodenmovies.jpg);
top:299px;
width: 1000px;
margin-bottom:50px;
height: 1625px;
position: absolute;
}
#banner {
background-image:url(images/totempolebanner.gif);
position:absolute;
top:25px;
width:768px;
height:120px;
left:116px;
}
#navbar {
float: left;
position: absolute;
top: 146px;
left: 76px;
width: 844px;
height: 158px;
font-weight:bold;
}
#navbar a { color:#0C6;
font-size: 13px;
}
#navbar a:hover { color:#0F9;
font-size: 13px;
}
#navbar2 a:hover { color:#0F9;
}
#navbar2 a{
text-decoration:none;
color:#0C6;
}
#navbar2 {
position: absolute;
top: 4px;
left: 766px;
width: 273px;
height: 24px;
font-size: 11px;
}
#searchbar {
position: absolute;
top: 23px;
left: 885px;
width: 118px;
height: 69px;
}
.css_btn_class {
font-size:9px;
position: relative;
top:0px;
right:4px;
width:90px;
height:25px;
font-family:Verdana;
font-weight:normal;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #35d914;
padding:7px 24px;
text-decoration:none;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) );
background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% );
background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% );
background-color:#ff9d00;
color:#ff0000;
display:inline-block;
text-shadow:0px 0px 1px #117cff;
-webkit-box-shadow: 0px 0px 0px 0px #117cff;
-moz-box-shadow: 0px 0px 0px 0px #117cff;
box-shadow: 0px 0px 0px 0px #117cff;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:right;
}.css_btn_class:hover {
width:90px;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) );
background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% );
background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% );
background-color:#ffe711;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:right;
}.css_btn_class:active {
position:relative;
width:90px;
top:1px;
background-image: url(images/unnamed.gif);
background-repeat:no-repeat;
background-position:right;
}
/* This css button was generated by css-button-generator.com */
img {border:none;}
#eagle {
position:relative;
right: 144px;
top:299px;
}
#owl {
top:624px;
position:absolute;
left:0px;
}
#wolf {
top:949px;
position:absolute;
right:0px;
}
#hare {
top:1274px;
position:absolute;
left:0px;
}
#bear {
top:1599px;
position:absolute;
right:0px;
}
#footer {
position: absolute;
left: 393px;
top: 1941px;
width: 251px;
color: #0F9;
}
#footer a {
color: #0f9;
}
.atss { left: 0; }
#infocontent {
position: absolute;
z-index: 3;
left: 15px;
top: 333px;
height: 348px;
width: 789px;
}
#mywowslider {
position: absolute;
z-index: 3;
left: 640px;
top: 684px;
}
#poll {
position: absolute;
z-index: 3;
left: 815px;
top: 344px;
}
#trailer1 {
position: absolute;
z-index: 3;
left: 40px;
top: 598px;
}
#trailer2 {
position: absolute;
z-index: 3;
left: 40px;
top: 948px;
}
#trailer1header {
position: absolute;
z-index: 3;
left: 200px;
top: 550px;
width: 240px;
font-style: italic;
font-weight: normal;
}
#trailer2header {
position: absolute;
z-index: 3;
left: 200px;
top: 898px;
width: 241px;
height: 51px;
font-style: italic;
font-weight: normal;
}
#disqus {
position: absolute;
z-index: 3;
left: 0px;
top: 1340px;
}
#sources {
position: absolute;
z-index: 3;
left: 394px;
top: 1249px;
width: 212px;
}
