SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to close these gaps?

    Hi,

    I seem to be having a lot of trouble with closing gaps in CSS. Below is a screenshot of what I mean:



    1) On the left of the top bar, there is a gap. How can I close this so the bar runs across from left to right completely?

    2) Likewise, there is a gap at the top. I tried to close this with topmargin=0 but this didn't work. What else could I do?

    Lastly....


    3) Between the two buttons for CV, there is a gap, but no padding or margins for the button so no reason for the seperation. How can I get rid of this gap so the buttons sit next to each other (they are ASP buttons).


    Thanks

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. 2. Can it just be you have forgot to reset the body padding/margins?
    Code:
    html, body {
        margin: 0;
        padding: 0;
    }
    Happy ADD/ADHD with Asperger's

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    3. If buttons are displayed inline try remove any html white-space between them (returns, spaces, tabs).

    Without the code it is a bit hard to debug.
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2005
    Posts
    113
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Fixed problems 1 and 2, thanks for that!

    This leaves problem 3:

    My buttons look like this:

    <asp:Button
    ID="Button1" runat="server" Text="my cv" CssClass="Activities"
    onclick="Button1_Click" Width="137px" />
    <asp:Button ID="Button3" runat="server" CssClass="Activities"
    Text="my cv - word" Width="117px" />

    There are linebreaks after the 2nd button, but doesn't explain the space between the buttons (obviously). This is all there is, no spacing, linebreaks in between, nothing.

    The css style (Excuse the poor naming for now):

    .Activities
    {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #333333;
    font-weight: bold;
    height: 80px;
    width: 153px;
    background-color: #F7F7F7;

    }

    .Activities:hover
    {
    background-color: #33CCFF;
    }

    I tried using Display inline, no luck. What trick am I missing?

    Thanks

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by -Blade- View Post
    <asp:Button
    ID="Button1" runat="server" Text="my cv" CssClass="Activities"
    onclick="Button1_Click" Width="137px" />
    <asp:Button ID="Button3" runat="server" CssClass="Activities"
    Text="my cv - word" Width="117px" />
    Sorry I don't read ASP. Can you show us the generated HTML from the above segment?
    There are linebreaks after the 2nd button, but doesn't explain the space between the buttons (obviously). This is all there is, no spacing, linebreaks in between, nothing.

    The css style (Excuse the poor naming for now):

    .Activities
    {
    border: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-small;
    color: #333333;
    font-weight: bold;
    height: 80px;
    width: 153px;
    background-color: #F7F7F7;

    }

    .Activities:hover
    {
    background-color: #33CCFF;
    }

    I tried using Display inline, no luck. What trick am I missing?

    Thanks
    It actually does . Try changing your HTML to something like this. (I mean ASP)
    Code:
       <asp:Button ID="Button1" runat="server" Text="my cv" CssClass="Activities" onclick="Button1_Click" Width="137px"  /> <asp:Button ID="Button3" runat="server" CssClass="Activities" Text="my cv - word" Width="117px" />
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •