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 9 of 9
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question border/padding (problem)

    hey coding forums and members,
    i am frustrated with my current project, need some other eyes to help

    html:
    PHP Code:

    <div id="small-content">

    <
    div id="box1">
    <
    a id="link" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19">
    <
    img style="float: left; margin: 0 10px 0 0;" src="http://i713.photobucket.com/albums/ww140/daveedking/moviezsmall.png">
    </
    a>
     <
    p>
    http://Betyoulikeit.com is on a Mission to Obtain only the Best Clean, Virus Free Data From Around the World...
    We Do not Host the Data But WE Track Down and Run Security Scans on all Files... ___________________________ 
    -Upgrading Everyday
     </
    p>
    </
    div>

    <
    div id="box2">
     <
    p>
       
    mi.
     </
    p>
    </
    div
    css:
    PHP Code:

    #small-content {
        
    float:left;
        
    width:150px;
        
    height:372px;
        
    padding:12px 0 0 0
        
    margin:18px 0 0 34px;
        
     }
    #box1 {
        
    height:124px;
        
    padding:38px 5px 0 5px;
        
    margin-bottom:22px;
        
    font-size:0.6em;
        
    line-height:1.0em;
        
    overflow:auto;
       
     }  
    #box2 {
        
    height:128px
        
    padding:38px 5px 0 5px;
        
    font-size:0.6em;
        
    line-height:1.0em;
        
    overflow:auto;
     }
    #large-content {
        
    float:left;
        
    width:265px;
        
    height:280px;
        
    padding:104px 10px 0 10px;
        
    margin:18px 0 20px 52px;
        
    line-height:1.4em;
        
    overflow:auto;
     } 



    here is the problem i am having:
    when set to margin: 0 10px 10px 0; (i get this)

    -------------------------------------------------------
    so to make an even border i set it to margin: 0 10px 0 0; (i get this)

    -------------------------------------------------------
    Question:
    why do i have a 5 px. border around the image if i set it as margin: 0 10px 0 0; ??
    i also set my margin to 0 10px 5px 0; just to test what would happen and i get the same result as margin: 0 10px 0 0; ??
    (if we go from top,right,bottom and left how does margin 0 10px 5px 0; stay the same as margin 0 10px 0px 0
    the current margin 0 10px 0 0; is the desired effect i wanted but it leaves me with several questions about positioning)
    thnaks...
    -daveedking-
    P.S. i also cant get rid of the borders around my images with border=0
    Last edited by daveedking; 01-17-2010 at 11:28 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello daveedking,
    Can we see a link to the test site? I think your #small_content is too narrow, at width:150px;, for what your putting in it.
    I also don't see a width supplied for your float and there is quite a bit of text that shows up in your screencap that is not in the snippet you've quoted.

    Have you tried validating yet?
    Check the links about validation in my sig below.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello daveedking,
    Can we see a link to the test site? I think your #small_content is too narrow, at width:150px;, for what your putting in it.
    I also don't see a width supplied for your float and there is quite a bit of text that shows up in your screencap that is not in the snippet you've quoted.

    Have you tried validating yet?
    Check the links about validation in my sig below.
    Excavator thanks for the reply...
    site http://betyoulikeit.com
    Last edited by daveedking; 01-18-2010 at 01:04 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It looks like your box model needs work more than anything. margin/padding/border all count when figuring total height or width.

    And you definitely need to visit the validator.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It looks like your box model needs work more than anything. margin/padding/border all count when figuring total height or width.

    And you definitely need to visit the validator.
    Congratulations! No Error Found.
    This document validates as CSS level 2.1 !

    Errors found while checking this document as HTML 4.01 Strict!
    Result: 19 Errors, 3 warning(s)
    PHP Code:
    Validation Output:  19 Errors

       1. Error Line 45
    Column 8ID "LINK" already defined

          
    <a id="link" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19">

          &
    #9993;

          
    An "id" is a unique identifierEach time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elementsthan id (which are used to identify exactly one element).
       
    2. Info Line 27Column 9ID "LINK" first defined here

            
    <a id="link" href="http://www.redcross.org/portal/site/en/menuitem.94aae335470

       3. Warning Line 45, Column 63: cannot generate system identifier for general entity "
    t"

          …nk" 
    href="http://betyoulikeit.com/viewtopic.php?f=84&t=19">

          &
    #9993;

          
    An entity reference was found in the documentbut there is no reference by that name definedOften this is caused by misspelling the reference nameunencoded ampersands, or by leaving off the trailing semicolon (;). The most common cause of this error is unencoded ampersands in URLs as described by the WDG in "Ampersands in URLs".

          
    Entity references start with an ampersand (&) and end with a semicolon (;). If you want to use a literal ampersand in your document you must encode it as "&amp;" (even inside URLs!). Be careful to end entity references with a semicolon or your entity reference may get interpreted in connection with the following textAlso keep in mind that named entity references are case-sensitive; &Aelig; and &aeligare different characters.

          If 
    this error appears in some markup generated by PHP's session handling code, this article has explanations and solutions to your problem.

          Note that in most documents, errors related to entity references will trigger up to 5 separate messages from the Validator. Usually these will all disappear when the original problem is fixed.
       4. Error Line 45, Column 63: general entity "t" not defined and no default entity

          …nk" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19">

          ✉

          This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
       5. Error Line 45, Column 64: reference to entity "t" for which no system identifier could be generated

          …" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19">

          ✉

          This is usually a cascading error caused by a an undefined entity reference or use of an unencoded ampersand (&) in an URL or body text. See the previous message for further details.
       6. Info Line 45, Column 61: entity was defined here

          …="link" href="http://betyoulikeit.com/viewtopic.php?f=84&t=19">

       7. Error Line 46, Column 120: required attribute "ALT" not specified

          …ms/ww140/daveedking/moviezsmall.png">

          ✉

          The attribute given above is required for an element that you'
    ve usedbut you have omitted it. For instancein most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

          
    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
       
    8. Error Line 65Column 119required attribute "ALT" not specified

          
    &#8230;bums/ww140/daveedking/openclear.png">

          
    &#9993;

          
    The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

          Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
       9. Warning Line 81, Column 126: NET-enabling start-tag requires SHORTTAG YES

          …idechatWidget.css' 
    rel='stylesheet' />

          &
    #9993;

          
    The sequence <FOO /> can be interpreted in at least two different waysdepending on the DOCTYPE of the document. For HTML 4.01 Strictthe '/' terminates the tag <FOO (with an implied '>'). Howeversince many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.
      10. Error Line 81, Column 126: document type does not allow element "LINK" here

          …idechatWidget.css' 
    rel='stylesheet' />

          &
    #9993;

          
    The element named above was found in a context where it is not allowedThis could mean that you have incorrectly nested elements -- such as "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          
    One common cause for this error is the use of XHTML syntax in HTML documentsDue to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML'"self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowedhence the reported error).
      
    11. Error Line 81Column 127character data is not allowed here

          
    &#8230;dechatWidget.css' rel='stylesheet' />

          
    &#9993;

          
    You have used character data somewhere it is not permitted to appearMistakes that can cause this error include:
              * 
    putting text directly in the body of the document without wrapping it in a container element (such as <p>aragraph</p>), or
              * 
    forgetting to quote an attribute value (where characters such as "%" and "/" are commonbut cannot appear without surrounding quotes), or
              * 
    using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlierTo fixremove the extra slash ('/'character. For more information about the reasons for thissee Empty elements in SGMLHTMLXML, and XHTML.
      
    12. Warning Line 82Column 119NET-enabling start-tag requires SHORTTAG YES

          
    &#8230;idechatWidget.css' rel='stylesheet' />

          
    &#9993;

          
    The sequence <FOO /> can be interpreted in at least two different waysdepending on the DOCTYPE of the document. For HTML 4.01 Strictthe '/' terminates the tag <FOO (with an implied '>'). Howeversince many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.
      13. Error Line 82, Column 119: document type does not allow element "LINK" here

          …idechatWidget.css' 
    rel='stylesheet' />

          &
    #9993;

          
    The element named above was found in a context where it is not allowedThis could mean that you have incorrectly nested elements -- such as "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          
    One common cause for this error is the use of XHTML syntax in HTML documentsDue to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML'"self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowedhence the reported error).
      
    14. Error Line 82Column 120character data is not allowed here

          
    &#8230;dechatWidget.css' rel='stylesheet' />

          
    &#9993;

          
    You have used character data somewhere it is not permitted to appearMistakes that can cause this error include:
              * 
    putting text directly in the body of the document without wrapping it in a container element (such as <p>aragraph</p>), or
              * 
    forgetting to quote an attribute value (where characters such as "%" and "/" are commonbut cannot appear without surrounding quotes), or
              * 
    using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlierTo fixremove the extra slash ('/'character. For more information about the reasons for thissee Empty elements in SGMLHTMLXML, and XHTML.
      
    15. Error Line 83Column 100document type does not allow element "SCRIPT" here

          
    &#8230;idget/users/bar/jquery-1.3.2.min.js'></script>

          
    &#9993;

          
    The element named above was found in a context where it is not allowedThis could mean that you have incorrectly nested elements -- such as "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          
    One common cause for this error is the use of XHTML syntax in HTML documentsDue to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML'"self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowedhence the reported error).
      
    16. Error Line 84Column 89document type does not allow element "SCRIPT" here

          
    &#8230;n.com/web_widget/users/swfobject.js'></script>

          
    &#9993;

          
    The element named above was found in a context where it is not allowedThis could mean that you have incorrectly nested elements -- such as "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          
    One common cause for this error is the use of XHTML syntax in HTML documentsDue to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML'"self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowedhence the reported error).
      
    17. Error Line 85Column 94document type does not allow element "SCRIPT" here

          
    &#8230;/web_widget/users/bar/widget-min.js'></script>

          
    &#9993;

          
    The element named above was found in a context where it is not allowedThis could mean that you have incorrectly nested elements -- such as "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          
    One common cause for this error is the use of XHTML syntax in HTML documentsDue to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML'"self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowedhence the reported error).
      
    18. Error Line 86Column 108document type does not allow element "SCRIPT" here

          
    &#8230;ers/sidebar/bumpinSidechatWidget.js'></script>

          
    &#9993;

          
    The element named above was found in a context where it is not allowedThis could mean that you have incorrectly nested elements -- such as "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          
    One common cause for this error is the use of XHTML syntax in HTML documentsDue to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML'"self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowedhence the reported error).
      
    19. Error Line 87Column 8required attribute "TYPE" not specified

          
    <script>window.onload =function(){loadBumpInSideBarWidget({height:'300',width:'2

          ✉

          The attribute given above is required for an element that you'
    ve usedbut you have omitted it. For instancein most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

          
    Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
      
    20. Error Line 87Column 8document type does not allow element "SCRIPT" here

          
    <script>window.onload =function(){loadBumpInSideBarWidget({height:'300',width:'2

          ✉

          The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML'
    s rules of implicitly closed elementsthis error can create cascading effects. For instanceusing XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
      21. Error Line 89, Column 10: ID "SIDEBAR" already defined

          <div id='
    sideBar'></div>

          ✉

          An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).
      22. Info Line 79, Column 9: ID "SIDEBAR" first defined here

          <div id='
    sideBar'></div>

      23. Error Line 89, Column 18: document type does not allow element "DIV" here

          <div id='
    sideBar'></div>

          ✉

          The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML'
    s rules of implicitly closed elementsthis error can create cascading effects. For instanceusing XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error).
      24. Error Line 90, Column 7: end tag for element "BODY" which is not open

          </body>

          ✉

          The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

          If this error occurred in a script section of your document, you should probably read this FAQ entry.
      25. Error Line 91, Column 82: document type does not allow element "SCRIPT" here

          …ader_4464.js' 
    type='text/javascript'></script>

          ✉

          The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements -- such as a "style" element in the "body" section instead of inside "head" -- or two elements that overlap (which is not allowed).

          One common cause for this error is the use of XHTML syntax in HTML documents. Due to HTML's rules of implicitly closed elements, this error can create cascading effects. For instance, using XHTML's "self-closing" tags for "meta" and "link" in the "head" section of a HTML document may cause the parser to infer the end of the "head" section and the beginning of the "body" section (where "link" and "meta" are not allowed; hence the reported error). 
    U guys see any quick fix to make the border lines go away ??
    thanks in advance...
    -daveedking-
    Last edited by daveedking; 01-18-2010 at 01:30 AM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In imageFader.css you will find
    Code:
    #container img {
       border:3px double #000;
    
    }
    Congratulations on the valid code/CSS !!
    Last edited by Excavator; 01-18-2010 at 02:04 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    In imageFader.css you will find
    Code:
    #container img {
       border:3px double #000;
    
    }
    Congratulations on the valid code/CSS !!
    thanks but the html failed miserably
    jajaja

    hey Excavator i dont understand exactly what u mean buy "go in image fadder .css".. ?>
    im not trying to get to work with anything in the imagefader script..
    i am trying to just add images and text inside the pages on the box board on the right side of my page... my problem is the boarder on just those images in that box>>>
    sorry i dont fully understand what should i do Excavator ??
    Last edited by daveedking; 01-18-2010 at 02:57 AM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by daveedking View Post
    thanks but the html failed miserably
    jajaja
    Oops, yes it did.
    Plenty of things that need fixed there.
    hey Excavator i dont understand exactly what u mean buy "go in image fadder .css".. ?>
    im not trying to get to work with anything in the imagefader script..
    i am trying to just add images and text inside the pages on the box board on the right side of my page... my problem is the boarder on just those images in that box>>>
    sorry i dont fully understand what should i do Excavator ??
    That bit I quoted, the #container img {border:3px double #000;}, is where your border is coming from. Even though it's located in imageFader.css, it's styling images in your #container - which includes the images your placing in #box1.

    Add the line in red to your imageFader.css to remove the border on the images your talking about in #box1 -
    Code:
    #top {
        position:absolute;
        width:202px;                 /* this value should match the images width */
        height:494px;                /* this value should match the images height */
        z-index:1;
     }
    #bot {
        position:absolute;
        width:202px;                 /* this value should match the images width */
        height:494px;                /* this value should match the images height */
        z-index:0;
     }
    #container img {
       border:3px double #000;
    
    }
    #box1 img {border: 0;}
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    4
    Thanked 0 Times in 0 Posts
    #box1 img {border: 0;}
    worked
    -----------------------------Resolved--------------------------------
    thanks E..and coders forum :
    -daveedking-


  •  

    Posting Permissions

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