I'm having one hell of a headache trying to figure this out for myself, i've taught myself the code i know, so i very well could be missing a simple thing. But i greatly need you're help and appreciate it tremendously.
I obviously want my website to look the same across all browsers and this is a major mess, that i am struggling with.
The problem is easier to explain with pictures, as such i have a screen print from ie9 and ff to show you:
Firefox, Safari, Chrome & IE7
How the footer and lists look in Firefox, Safari, Chrome & IE7
IE9 & IE8 (the grey at the bottom is the body background)
How the footer and lists look in IE9 & IE8
Here is the html:
<div id="footer">
<div id="columncon">
<div class="column">
<h5>From The Blog...</h5>
<ul>
<li><a href="#">Blog Post 1<a/></li>
<li><a href="#">Blog Post 2<a/></li>
<li><a href="#">Blog Post 3<a/></li>
<li><a href="#">Blog Post 4<a/></li>
<li><a href="#">Blog Post 5<a/></li>
</ul>
</div>
<div class="column">
<h5>Social</h5>
<ul>
<li><a href="#">Facebook<a/></li>
<li><a href="#">Twitter<a/></li>
<li><a href="#">Google +<a/></li>
<li><a href="#">RSS Subscribe<a/></li>
<li><a href="#">E-mail Subscribe<a/></li>
</ul>
</div>
<div class="column">
<h5>Site Links</h5>
<ul>
<li><a href="#">Designer Resources<a/></li>
<li><a href="#">Submit a T-Shirt<a/></li>
<li><a href="#">Sitemap<a/></li>
<li><a href="#">Contact Us<a/></li>
</ul>
</div>
<div class="column">
<h5>Site Links</h5>
<ul>
<li><a href="#">Designer Resources<a/></li>
<li><a href="#">Submit a T-Shirt<a/></li>
<li><a href="#">Sitemap<a/></li>
<li><a href="#">Contact Us<a/></li>
</ul>
</div>
</div>
<div id="siteinfo">
<p>© 2011 <a href="http://www.tshirtslut.com">TShirtSlut.com</a></p>
</div>
Here is the CSS:
#footer {
background: url(img/footerbg.png) 0 0;
-moz-box-shadow: 0 0px 10px #000;
-webkit-box-shadow: 0 0px 10px #000;
box-shadow: 0 0 10px #000;
height:200px;
position:relative;
clear:both;
}
#columncon {
width:1000px;
margin:0 auto;
}
.column {
float:left;
padding: 30px 25px 20px;
width: 200px;
}
.column ul {
list-style:none;
}
.column ul li {
padding:2px 0;
}
.column ul li a{
text-decoration:none;
color:#fff;
font-size:12px;
}
.column ul li a:hover{
color:#49E20E;
}
.column h5 {
padding-bottom:10px;
border-bottom:1px solid #fff;
color:#fff; text-shadow: black 0.1em 0.1em 0.2em;
font-weight:bold;
font-size:14px;
}
#siteinfo {
text-align:center;
width:100%;
margin:auto;
position:absolute;
bottom:0;
color:#fff;
font-size:12px;
}
#siteinfo a {
text-decoration:none;
color:#fff;
}
#siteinfo a:hover {
color:#49E20E;
text-decoration:none;
}
(apparently I'm not the best at inserting code XD)
Once again i truly will appreciate whoever can put this problem into context for me and allow me to solve this issue.
If you need anymore code, or info please ask and i shall get to it right away.
Thank you,
Mike
UPDATE: I have fixed the anchor tags so they validate but am still left with a double footer and the heading of the first list still remaining in the "doubled" footer. Please follow URL for a picture:
--http://tshirtslut.com/ie%28partially%20fixed%29.jpg--
Your html is not valid. Replace all <a/>
with </a>
. Is your problem solved now?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.