SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    a trace of a vertical line on left bottom side.

    Link 02 http://220.89.242.19:8500/test/02/home/index.cfm

    Link 03 http://220.89.242.19:8500/test/03/home/index.cfm


    Link 02 has the following code.
    Code:
    #foot {
     width:100%;
     clear:both;
     height:50px;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     background-color: white;
     color: #000000;
     text-align:center;
     position:relative;
    }

    Link 03 has the following code.
    Code:
    #foot {
     width:100%;
     clear:both;
     height:50px;
     border-top:1px solid #000;
     
     background-color: white;
     color: #000000;
     text-align:center;
     position:relative;
    }

    So Link o2 has the bottom line while Link03 doesn't.

    But Link 03 has the trace of the left vertical line displaying a dot on the left bottom side due to the following style code.
    Code:
    #outer{
     height:100%;
     min-height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-52px;
     color: #000000;
    }

    Can I remove the dot which is on the left bottom caused by the left vertical line (border-left:1px solid #000) without bottom line (border-bottom:1px solid #000)?

  2. #2
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought if I'd play with the code for a while I might stumble across the solution by accident. But I didn't

    Anyway, I only have IE6 and Firefox to test here and the problem only shows in Firefox.
    And seeing as I cant give you a real good technical solution I'll tell you what I would do..

    Code:
    #foot {
     width:100%;
     clear:both;
     height:50px;
     border-top:1px solid #000;
     border-bottom:1px solid #FFFFFF;
     background-color: white;
     color: #000000;
     text-align:center;
     position:relative;
    }
    Note the #FFFFFF;



    I know, it's a stupid way to do it, but hey..
    I'm just trying to be helpful.

    So long !
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  3. #3
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Nice trick!

  4. #4
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    Nice trick!
    shucks, thanks
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Restless's solution works because it makes the footer the correct size by keeping a 1px bottom border.

    I think I explained pereviously (somewhere) that the space for the footer is made by the negative margin in #outer.

    Therefore if you change the height of the footer then you need to change the corresponding negative margin in #outer.

    e.g.
    Code:
    #outer{
     height:100%;
     min-height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-51px;
     color: #000000;
    }
    However you would also need to adjust the broken box model settings of footer for ie5.
    Code:
    * html #foot {/* only ie gets this style */
     \height:51px;/* for ie5 */
     he\ight:50px;/* for ie6 */
    }
    Hope that explains it Its probably easier just to sticvk with the white border at the bottom and you don't need to change anything else.

    Paul

  6. #6
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Restless
    shucks, thanks
    WebPage Making is nothing but shucks and trick, isn't it? ^^

  7. #7
    Get my greedy down dotJoon's Avatar
    Join Date
    Apr 2003
    Location
    daejeon, South Korea
    Posts
    2,223
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B

    Code:
    #outer{
     height:100%;
     min-height:100%;
     margin-left:160px;
     background: white;
     border-left:1px solid #000; 
     margin-bottom:-51px;
     color: #000000;
    }
    It works. I got it. Thanks

  8. #8
    SitePoint Enthusiast Restless's Avatar
    Join Date
    Aug 2004
    Location
    Austria
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joon
    WebPage Making is nothing but shucks and trick, isn't it? ^^


    Thing is.. I shoulda known what it was to begin with. I had the same problem on my page before I removed the footer completely and was able to fix it thanks to the great tutorial from Paul.



    So much yet to learn - and so much I really really shouldn't forget
    Restless Sadja,
    - a good girl
    sometimes. not always. rarily.


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
  •