Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts

    Unhappy Mysterious 1px / 2px Space - Solved

    Hey! Here is the site: Wifee V2 If you notice next to the text 'sdafs' or something, there is no border. It is the same next to the image.

    Here is my HTML
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <title>Wifeee - Enlighten your Simming Experience =]</title>
    <link rel="stylesheet" href="styles.css" type="text/css" media="all">
    <link rel="shortcut icon" href="favicon.ico" type="favicon" media="all">
    <script type="text/javascript" src="
    http://www.dynamicdrive.com/dynamicindex11/gradualfader.js">
    </script>
    </head><body>
    
    <div id="container">
    <div class="logo"><?php include "logo.php"; ?></div>
    <div id="sidebar1">sdfas</a>
    </div>
    <div id="content">
    <img src="avatar.png" alt="This is Wifee Version 2. We are testing all the vista effects."></img>
    </div></div>
    <script type="text/javascript">
    gradualFader.init() //activate gradual fader
    </script>
    and the CSS:
    Code:
    body {
    background-image: url(back.jpg);
    background-repeat: repeat-x;
    font-family: verdana;
    margin: 10px 00px 10px 250px;
    }
    
    .logo {
    background-repeat: norepeat;
    border: 2px solid #FFFFFF;
    width: 800px;
    height: 200px;
    }
    
    #sidebar1 {
    border: 2px solid #FFFFFF;
    border-top: 0px;
    border-right: 3px;
    background-color: #FFFFFF;
    padding: 5px;
    }
    #content {
          height: auto;
          border-left: 2px solid #FFFFFF; 
          border-right: 3px solid #FFFFFF;
          border-bottom: 2px solid #FFFFFF;
          color: #000000;
          font-family: Arial, Helvetica, sans-serif; 
          font-size: 11px; 
          text-align: left; 
    padding: 5px;
    }
    
    #container { 
    width: 800px;
    height: auto;
    background: #FFFFFF;
    text-align: left;
    }
    I've tried expanding the border, but nothing is happening.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #2
    New Coder
    Join Date
    Jul 2006
    Location
    Newcastle, england.
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    That is because your border color is set to #ffffff, which is white.Change it to black and it will stand out better on a white background!

    Hope this helps.

  • #3
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    No, it should show because My background is gradient blue to white.
    Incase I mis-lead you, it is the one right on the edge, where the container width ends.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #4
    New to the CF scene
    Join Date
    May 2008
    Location
    Minnesota
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    BabyJack,

    Try using these css codes. Here is an example:


    #content
    {
    border-width: 20px;
    border-height: 20px;
    }


    You can adjust the heigt and width as you need.

    I hope this helps,
    stmacoding

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    When I set your border to black, it showed up perfectly...

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    stmacoding has got it right, it's just that that didn't work. There is still the 2/1px space.
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #7
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    UPDATE ON THE MYSTERIOUS SPACE!!
    Image:
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Thats not a "space". You did this on your own. You gave your logo a border of 2px making your logo 804px wide yet your container is only 800px wide. Do you see where I'm going here?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    BabyJack (05-30-2008)

  • #9
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You put an 800px wide image in an 800px wide div - and then you added a 2px border to the div. Yes, it will be wider. Disable the border for class .logo, or resize the image to div width - 2x border width.

    FYI, Firebug makes it easy to test something like like. Just a click to disable the border in CSS and everything is nice and square.

    EDIT: Aero beat me to it.

  • #10
    Regular Coder BabyJack's Avatar
    Join Date
    Apr 2008
    Location
    Somewhere.
    Posts
    602
    Thanks
    43
    Thanked 6 Times in 6 Posts
    Thanks Aerospace! =D
    Enlightenment in Coding
    Validate before Posting | Google is your friend for PC Problems | Make sure you have a doctype


  •  

    Posting Permissions

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