CSS Glitch in firefox.

  • Shadows
  • Beginner
  • Beginner
  • Shadows
  • Posts: 64

Post 3+ Months Ago

hi Guys,

I'm making a little div that sits to the top right of my webpage but theres a slight problem in firefox althrough its perfect in IE7 and opera.

the following is a screenshot

Image

Code: [ Select ]
#guestbar {
    display: block;
    position: relative;
    float: right;
    width: 300px;
    height: 30px;
    background-color: #ffffff;
    background-image: url(/images/guestbar.jpg);
    background-repeat: no-repeat;
    margin: 0px;
}
  1. #guestbar {
  2.     display: block;
  3.     position: relative;
  4.     float: right;
  5.     width: 300px;
  6.     height: 30px;
  7.     background-color: #ffffff;
  8.     background-image: url(/images/guestbar.jpg);
  9.     background-repeat: no-repeat;
  10.     margin: 0px;
  11. }


I want the div to sit against the top of the window, this div is located directed under the body element of my html document and css styling for the body element has no margin or padding conflict.

If I add a top properly of -30px, this fits the problem in firefox but makes the resulting div disappear out of sight in other browsers.

Advice?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8388
  • Loc: USA

Post 3+ Months Ago

Code: [ Select ]
#guestbar {
  display: block;
  position: absolute;
  float: right;
  width: 300px;
  height: 30px;
  background-color: #ffffff;
  background-image: url(/images/guestbar.jpg);
  background-repeat: no-repeat;
  margin: 0px;
}
  1. #guestbar {
  2.   display: block;
  3.   position: absolute;
  4.   float: right;
  5.   width: 300px;
  6.   height: 30px;
  7.   background-color: #ffffff;
  8.   background-image: url(/images/guestbar.jpg);
  9.   background-repeat: no-repeat;
  10.   margin: 0px;
  11. }


Try that...
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

I actually think it's the whole "body" that is 30px from the top ...

have you added:
Code: [ Select ]
body{
padding:0px;
margin:0px;
}
  1. body{
  2. padding:0px;
  3. margin:0px;
  4. }
  • gotlinks
  • Born
  • Born
  • User avatar
  • Posts: 4
  • Loc: USA, TX, San Antonio

Post 3+ Months Ago

Bogey wrote:
Code: [ Select ]
#guestbar {
  display: block;
  position: absolute;
  float: right;
  width: 300px;
  height: 30px;
  background-color: #ffffff;
  background-image: url(/images/guestbar.jpg);
  background-repeat: no-repeat;
  margin: 0px;
}
  1. #guestbar {
  2.   display: block;
  3.   position: absolute;
  4.   float: right;
  5.   width: 300px;
  6.   height: 30px;
  7.   background-color: #ffffff;
  8.   background-image: url(/images/guestbar.jpg);
  9.   background-repeat: no-repeat;
  10.   margin: 0px;
  11. }


Try that...


This should correct the problem, as similiar scripts I have seen always have a Absolute set.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.