SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: CSS Spacing

  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool CSS Spacing

    Hi,

    The site is http://www.besttohost.com and our top "Other Services" link at the top comes right up next to the "Live Chat" button which we would like to have it spaced out in FireFox.

    It does already work fine in Internet Explorer I just need to know how to get it spaced out in FireFox.

    Thank you!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Remove all those   characters from the "Other Services" link in the html. You have them in there to make room for the Down Arrow image on the right.

    (scroll to the right)
    Code:
    <a class="menuButton menuButtonActive6" rel="dropmenu1">Other Services&nbsp;&nbsp;&nbsp; </a>
    Then create that space for the arrow the proper way by adding a larger right padding to the .menuButtonActive6
    Code:
    div.menuBar a.menuButtonActive6,
    a.menuButtonActive6 { 
    background: url(down.gif); 
    background-color: #98c601;
    border-color: #f0f0f0 #909090 #909090 #f0f0f0;
    cursor: hand;
    color: #000;
    padding-right:20px
    }
    This is what you have currently: You have disabled all the styles after the background with that closing curley bracket (in red). And what is the min-height:100&#37; and height:100% doing there?

    Code:
    div.menuBar a.menuButtonActive6,
    a.menuButtonActive6 { background: url(down.gif); }
    background-color: #98c601;
      border-color: #f0f0f0 #909090 #909090 #f0f0f0;
      cursor: hand;
      color: #ffffff;
    }
    min-height: 100%
    }
    {
    height: 100%;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It didn't space it out. It did however make it so I could remove all those &nbsp;

    Thanks

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hmm, It worked just fine for me in FF2

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe on your version but not on my version. (FireFox 2.0.0.20)

  6. #6
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm using (FireFox 2.0.0.20) too!

    Update your live link with the changes I posted so we can see if you have another error somewhere. As it is is right now there have been no changes made to it.

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Did you remove those stray height styles?
    Code:
    div.menuBar a.menuButtonActive6,
    a.menuButtonActive6 { 
    background: url(down.gif); 
    background-color: #98c601;
    border-color: #f0f0f0 #909090 #909090 #f0f0f0;
    cursor: hand;
    color: #000;
    padding-right:20px
    }
    min-height: 100%
    }
    {
    height: 100%;
    }
    
    select { 
     background-color: #666699; 
     color: #ffffff;
    border: #000000 1px solid;
    }
    Those can cause FF to stop reading styles that follow them.

    Your doctype is also incomplete, the hyperlink must be included with it as shown below. That can cause problems in IE, it could be causing IE to appear correct when it actually isn't.
    Code:
     <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    Last edited by Rayzur; Apr 11, 2009 at 06:48. Reason: noted incomplete doctype


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •