I'm in the process of debugging my cross browser discrepancies for a website. It shows up perfect in Chrome and Safari, looks horrible in IE but only has ONE error in Firefox. I thought it would be simple to fix, but of course not! Here's the problem:
The navbar should overlap the scrolling banner, but Firefox seems to ignore my negative top margin code. I've tried so many approaches to fix this I've lost count! Here's the code:
[CSS CODE]
[/CSS CODE]
[HTML CODE]
[/HTML CODE]
The navbar should overlap the scrolling banner, but Firefox seems to ignore my negative top margin code. I've tried so many approaches to fix this I've lost count! Here's the code:
[CSS CODE]
Code:
* {
padding: 0;
margin: 0;vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
text-decoration:none;
list-style:none;
white-space:normal;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
body {
background: #232323;
line-height: 1;
color: black;
font-family: Arial, Helvetica, sans-serif;
}
a{
font-weight:bold;
}
a:link {
color:#232323;
} /* unvisited link */
a:visited {
color:#232323;
} /* visited link */
a:hover {
color:#343434;
} /* mouse over link */
a:active {
color:#232323;
} /* selected link */
#container {
width: 1000px;
margin: 0 auto;
background: url(images/AMSite01.png) no-repeat;
}
/*coding for header*/
#title{
padding-top:10px;
margin-bottom: -60px;
}
#tagline{
float:left;
}
#socialicons{
margin:0px 0px 0px 500px;
position:absolute;
}
#socialicons li{
float:left;
}
#navbar{
margin-top:-40px;
position:absolute;
z-index:100;
}
#navbar li{
float:left;
}
.button{
margin-top: 37px;
padding-left:110px;
}
#facebook{
background: url(http://www.mrriseandgrind.com/blog/images/AMSite09.png) no-repeat;
height:150px;
}
.fbbutton{
}
#twitter{
background: url(http://www.mrriseandgrind.com/blog/images/AMSite10.png) no-repeat;
height:150px;
width:300px;
margin-left: 657px;
position:absolute;
z-index:-1;
}
.twbutton{
position:absolute;
margin-left:5px;
}
#banner{
margin-top:-30px;
}
/*end coding for header*/
[HTML CODE]
Code:
<div id="header">
<div id="title">
<a href="home.html"><img src="http://bytes.com/images/AMSite11.png" alt=""/></a>
</div><!-- end title -->
<div id="tagline">
<img src="http://bytes.com/images/AMSite12.png" alt=""/>
</div><!-- end tagline -->
<div id="socialicons">
<ul>
<li><img src="http://bytes.com/images/AMSite13.png"/></li>
<li><a href="http://www.youtube.com/mrriseandgrind "><img src="http://bytes.com/images/AMSite14.png"/></a></li>
<li><a href="https://twitter.com/#!/BlackBoiPachino "><img src="http://bytes.com/images/AMSite15.png"/></a></li>
<li><a href="http://www.facebook.com/profile.php?id=12806574 "><img src="http://bytes.com/images/AMSite16.png"/></a></li>
</ul>
</div>
<div style="clear:both"></div>
<div id="navbar">
<ul>
<li><a href="home.html"><img src="http://bytes.com/images/AMSite03.png"/></a></li>
<li><a href="bio.html"><img src="http://bytes.com/images/AMSite04.png"/></a></li>
<li><a href="media.html"><img src="http://bytes.com/images/AMSite05.png"/></a></li>
<li><a href="Camp.html"><img src="http://bytes.com/images/AMSite06.png"/></a></li>
<li><a href="http://amorrow.tumblr.com/"><img src="http://bytes.com/images/AMSite07.png"/></a></li>
<li><a href="contact.html"><img src="http://bytes.com/images/AMSite08.png"/></a></li>
<li id="facebook">
<iframe class="button fbbutton" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mrriseandgrind.com&layout=button_count&show_faces=false&width=450&action=like&font&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</li>
<li id="twitter"><a class="button twbutton" href="http://twitter.com/blackboipachino" class="twitter-share-button"
data-count="horizontal">Tweet</a><script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
</li>
</ul>
</div><!--end navbar -->
<div style="clear:both"></div>
<div id="banner">
<img src="http://bytes.com/images/banner1.gif" name="adBanner" alt="Ad Banner" />
</div><!-- end banner -->
</div><!-- end header -->
Comment