By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,238 Members | 1,320 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,238 IT Pros & Developers. It's quick & easy.

Firefox ignores my "margin-top:-30px;" Help!

P: 7
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]
Expand|Select|Wrap|Line Numbers
  1. * {
  2.     padding: 0;
  3.     margin: 0;vertical-align: baseline;
  4.     font-weight: inherit;
  5.     font-family: inherit;
  6.     font-style: inherit;
  7.     font-size: 100%;
  8.     border: 0 none;
  9.     outline: 0;
  10.     text-decoration:none;
  11.     list-style:none;
  12.     white-space:normal; 
  13.     }
  14.  
  15. body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }
  16.  
  17. body { 
  18.     background: #232323; 
  19.     line-height: 1; 
  20.     color: black;
  21.     font-family: Arial, Helvetica, sans-serif; 
  22.     }
  23.  
  24. a{
  25.     font-weight:bold;
  26. }
  27.  
  28. a:link {
  29.     color:#232323;
  30. }      /* unvisited link */
  31.  
  32. a:visited {
  33.     color:#232323;
  34. }  /* visited link */
  35.  
  36. a:hover {
  37.     color:#343434;
  38. }  /* mouse over link */
  39.  
  40. a:active {
  41.     color:#232323;
  42. }  /* selected link */    
  43.  
  44.  
  45. #container {  
  46.     width: 1000px;  
  47.     margin: 0 auto;
  48.     background: url(images/AMSite01.png) no-repeat;
  49. }
  50.  
  51. /*coding for header*/
  52. #title{
  53.     padding-top:10px;
  54.     margin-bottom: -60px;
  55. }
  56.  
  57. #tagline{
  58.     float:left;
  59. }
  60.  
  61. #socialicons{
  62.     margin:0px 0px 0px 500px;
  63.     position:absolute;
  64. }
  65.  
  66. #socialicons li{
  67.     float:left;
  68. }
  69.  
  70. #navbar{
  71.     margin-top:-40px;
  72.     position:absolute;
  73.     z-index:100;
  74. }
  75.  
  76. #navbar li{
  77.     float:left;
  78. }
  79.  
  80. .button{
  81.     margin-top: 37px;
  82.     padding-left:110px;
  83. }
  84.  
  85. #facebook{
  86.     background: url(http://www.mrriseandgrind.com/blog/images/AMSite09.png) no-repeat;
  87.     height:150px;
  88. }
  89.  
  90. .fbbutton{
  91.  
  92. }
  93.  
  94. #twitter{
  95.     background: url(http://www.mrriseandgrind.com/blog/images/AMSite10.png) no-repeat;
  96.     height:150px;
  97.     width:300px;
  98.     margin-left: 657px;
  99.     position:absolute;
  100.     z-index:-1;
  101. }
  102.  
  103. .twbutton{
  104.     position:absolute;
  105.     margin-left:5px;
  106. }
  107.  
  108. #banner{
  109.     margin-top:-30px;
  110. }
  111. /*end coding for header*/
  112.  
[/CSS CODE]

[HTML CODE]
Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2.  
  3.             <div id="title">
  4.                 <a href="home.html"><img src="http://bytes.com/images/AMSite11.png" alt=""/></a>
  5.             </div><!-- end title -->
  6.  
  7.             <div id="tagline">
  8.                 <img src="http://bytes.com/images/AMSite12.png" alt=""/>
  9.             </div><!-- end tagline -->
  10.  
  11.             <div id="socialicons">
  12.                 <ul>
  13.                     <li><img src="http://bytes.com/images/AMSite13.png"/></li>
  14.                     <li><a href="http://www.youtube.com/mrriseandgrind "><img src="http://bytes.com/images/AMSite14.png"/></a></li>
  15.                     <li><a href="https://twitter.com/#!/BlackBoiPachino "><img src="http://bytes.com/images/AMSite15.png"/></a></li>
  16.                     <li><a href="http://www.facebook.com/profile.php?id=12806574 "><img src="http://bytes.com/images/AMSite16.png"/></a></li>
  17.                 </ul>
  18.             </div>
  19.  
  20.             <div style="clear:both"></div>  
  21.  
  22.             <div id="navbar">
  23.                 <ul>
  24.                     <li><a href="home.html"><img src="http://bytes.com/images/AMSite03.png"/></a></li>
  25.                     <li><a href="bio.html"><img src="http://bytes.com/images/AMSite04.png"/></a></li>
  26.                     <li><a href="media.html"><img src="http://bytes.com/images/AMSite05.png"/></a></li>
  27.                     <li><a href="Camp.html"><img src="http://bytes.com/images/AMSite06.png"/></a></li>
  28.                     <li><a href="http://amorrow.tumblr.com/"><img src="http://bytes.com/images/AMSite07.png"/></a></li>
  29.                     <li><a href="contact.html"><img src="http://bytes.com/images/AMSite08.png"/></a></li>
  30.                     <li id="facebook">
  31.                         <iframe class="button fbbutton" src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.mrriseandgrind.com&amp;layout=button_count&amp;show_faces=false&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
  32.                     </li>
  33.                     <li id="twitter"><a class="button twbutton" href="http://twitter.com/blackboipachino" class="twitter-share-button"
  34.                         data-count="horizontal">Tweet</a><script type="text/javascript"
  35.                         src="http://platform.twitter.com/widgets.js"></script>
  36.                     </li>
  37.                 </ul>
  38.             </div><!--end navbar -->
  39.  
  40.             <div style="clear:both"></div>  
  41.  
  42.             <div id="banner">
  43.                 <img src="http://bytes.com/images/banner1.gif" name="adBanner" alt="Ad Banner" />
  44.             </div><!-- end banner -->
  45.  
  46.         </div><!-- end header -->
  47.  
[/HTML CODE]
Apr 24 '11 #1

✓ answered by JKing

Instead of margins, why not just absolute position all these things? You've declared absolute positioning on a few elements anyway. Instead of using margins to position your element use top,left,right and bottom.

Doesn't appear to ignoring the negative margin either. The images in your slideshow have a shadow effect leaving about 43px all the way around the image.

Share this Question
Share on Google+
8 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Validate your html and css for those lists of errors.
Apr 24 '11 #2

P: 7
Thanks for your response. I have validated the code and the problem persists still. Any other ideas?
Apr 25 '11 #3

JKing
Expert 100+
P: 1,206
A link to your project would be helpful or at the very least a screenshot.
Apr 25 '11 #4

P: 7
it's uploaded to a sub domain of my business site:
http://mrrise.huntergraphics.org/
Apr 25 '11 #5

JKing
Expert 100+
P: 1,206
Instead of margins, why not just absolute position all these things? You've declared absolute positioning on a few elements anyway. Instead of using margins to position your element use top,left,right and bottom.

Doesn't appear to ignoring the negative margin either. The images in your slideshow have a shadow effect leaving about 43px all the way around the image.
Apr 25 '11 #6

P: 7
You're right! It's not ignoring the negative margin. It treats it very differently thought. When I increase the negative margin on the banner element and refresh the preview in Firefox, for whatever reason, it affects all the following elements and messes up their alignment. I'll try the absolute positioning like you suggested. Thanks JKing.
Apr 25 '11 #7

P: 7
Excellent! It fixed my issues with firefox! Thanks a ton!!! Now on to debugging IE, the bane of my existence.
Apr 25 '11 #8

JKing
Expert 100+
P: 1,206
If you run into any issue with IE feel free to ask and I can likely help with those too.
Apr 26 '11 #9

Post your reply

Sign in to post your reply or Sign up for a free account.