Rocketrod Posted April 30, 2014 Share Posted April 30, 2014 Hello every one I'm hoping someone could help with this as I'm not able to work this out. I have a footer with a image and the links over the image, It all works fine in IE and Firefox, however in Chrome & Safari the image goes over the links. Just needing to know if any one could tell me why it's happening please. I was told it's due to cross over with browsers and to do with CSS I'm new at web designing so it's something easy to fix, just can not work it out. Website if you need to see the website live www.elt.link/Clown Thanks for your help if you are able to <div id="footer_wrap"> <div id="footer_banner_wrap"> <div id="footer_img" class="left"> <img src="image/footer_banner.jpg" /> </div> </div> <div id="content_wrapper"> <div id="footer_row_1" class="left"> <ul> <li><a href="http://www.emilylouisetrueman.com/">Home</a></li> <li><a href="http://www.emilylouisetrueman.com/About/">About</a></li> <li><a href="http://www.emilylouisetrueman.com/News/">News</a></li> <li><a href="http://www.emilylouisetrueman.com/Contact/">Contact</a></li> </ul> </div> <div id="footer_row_2" class="left"> <ul> <li><a href="http://www.emilylouisetrueman.com/Videos/">Videos</a></li> <li><a href="http://www.emilylouisetrueman.com/Videos/Play-List/">Play List</a></li> <li><a href="http://www.emilylouisetrueman.com/Videos/Play-All-Songs/">Play All Songs</a></li> <li><a href="http://www.emilylouisetrueman.com/Pictures/">Pictures</a></li> </ul> </div> <div id="footer_row_3" class="left"> <ul> <li><a href="http://www.shop.emilylouisetrueman.com/">Emilys Shop</a></li> <li><a href="http://www.blog.emilylouisetrueman.com/">Emilys Blog</a></li> <li><a href="http://www.emilylouisetrueman.com/"></a></li> <li><a href="http://www.emilylouisetrueman.com/"></a></li> </ul> </div> <div id="footer_row_4" class="left"> <ul> <li><a href="http://www.emilylouisetrueman.com/"></a></li> <li><a href="http://www.emilylouisetrueman.com/"></a></li> <li><a href="http://www.emilylouisetrueman.com/"></a></li> <li><a href="http://www.emilylouisetrueman.com/"></a></li> </ul> </div> <div class="clear"></div> <div id="copyright_wrap" class="left"> <div id="copyright"> © 2014 Copyright Emily Louise Trueman All Rights Reserved </div> </div> </div><div clear="clear"></div><div class="right" id="legal"><ul><li><a href="http://www.emilylouisetrueman.com/Terms-Of-Use.php">TERMS OF USE</a></li><li><a href="http://www.emilylouisetrueman.com/Privacy.php">PRIVACY</a></li></ul></div> </div> CSS /* FOOTER WRAPPER */ #footer_wrap{ margin-top: 45px;margin-bottom: 8px;}#footer_banner{border: 1px solid rgba(53,27,0,1.0);} /* ROW 1 */#footer_row_1{margin-left: 395px;margin-top: -173px;}#footer_row_1 li{margin-bottom: 6px;font-size: 26px;text-align: left;display: block;} /* ROW 2 */#footer_row_2{margin-left: 535px;margin-top: -173px;}#footer_row_2 li{margin-bottom: 6px;font-size: 26px;text-align: center;display: block;} /* ROW 3 */#footer_row_3{margin-left: 730px;margin-top: -173px;}#footer_row_3 li{margin-bottom: 6px;font-size: 26px;text-align: center;display: block;} /* ROW 4 */#footer_row_4{margin-left: 905px;margin-top: -165px;}#footer_row_4 li{margin-bottom: 6px;font-size: 26px;text-align: left;display: block;} /* ALL ROWS LINK COLOR */#footer_row_1 li a,#footer_row_2 li a,#footer_row_3 li a,#footer_row_4 li a{color: rgba(255,137,9,0.8);text-shadow: 1px 1px 1px rgba(0,0,0,1.0);}#footer_row_1 li a:hover,#footer_row_2 li a:hover ,#footer_row_3 li a:hover ,#footer_row_4 li a:hover{color: rgba(196,98,0,0.7);} /* COPYRIGHT */#copyright_wrap{margin-left: 380px;margin-top: -23px;color: rgba(0,0,0,1.0);text-shadow: 1px 1px 1px rgba(53,27,0,1.0);} /* LEGAL */#legal{ margin-top: 10px;}#legal li{ font-size: 17px; margin-right: 25px;margin-bottom: 25px;}#legal a{ color: rgba(0,0,255,0.5);}#legal a:hover{ color: rgba(0,0,255,0.8);} #footer_img{width: 998px;height: 176px;border: 1px solid rgba(53,27,0,1.0);} Link to comment Share on other sites More sharing options...
newseed Posted April 30, 2014 Share Posted April 30, 2014 Add position:relative to your content_wrapper div 1 Link to comment Share on other sites More sharing options...
davej Posted April 30, 2014 Share Posted April 30, 2014 Yeah, or you can add position:relative to the footer image. I have not been able to find the css that positions the footer text over the footer image. 1 Link to comment Share on other sites More sharing options...
Rocketrod Posted May 1, 2014 Author Share Posted May 1, 2014 Thanks guys, the position:relative in the content_wrapper fixed it up.Didn't try in the footer image, but I'm sure it would do the same thing. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now