Back To Website Design Forum

CSS Glitch in firefox.

  • Shadows
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Oct 03, 2006
  • Posts: 64
  • Status: Offline

Post November 23rd, 2007, 10:08 pm

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
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post November 23rd, 2007, 10:08 pm

  • Bogey
  • Bogey
  • Genius
  • User avatar
  • Joined: Jul 14, 2005
  • Posts: 8211
  • Loc: USA
  • Status: Offline

Post November 23rd, 2007, 10:16 pm

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...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Joined: Mar 12, 2007
  • Posts: 6228
  • Loc: South-Africa
  • Status: Offline

Post November 26th, 2007, 1:38 am

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. }
Let's leave all our *plum* where it is and go live in the jungle ...
  • gotlinks
  • Born
  • Born
  • User avatar
  • Joined: Nov 27, 2007
  • Posts: 4
  • Loc: USA, TX, San Antonio
  • Status: Offline

Post November 27th, 2007, 6:45 am

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.

Page 1 of 1

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 143 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
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.