SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border bottom shows in wrong place

    Hey,

    Can anyone see why the bottom border shows in the middle of the image..

    http://kidsunlimited.co.uk/nursery.aspx?ID=31&Month=July%202010#fragment-11

    I need it to appear just after the image..

    Problem is that it is controlled via TinyMCE so a lot of it is invalid HTML i think...

    Can anyone help?

    Thanks
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    It's in the HTML:

    Code HTML4Strict:
    <div style="margin-bottom: 15px; border-bottom: 1px solid rgb(192, 192, 192);">

    Note: I copy/pasted this from FireBug, the HTML itself probably doesn't say rgb(192, 192, 192) but some hexadecimal value. FireBug tends to rewrite those to rgb. Dunno why.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i know but i don't understand why it appears in the middle of the image, the border bottom should appear after the image?

    Or am i doing something wrong?
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    The image is floating (it has float: right;) so it isn't calculated in the height of the containing div.
    You should either add a div or span with clear:both at the end of the containing div or add a <br clear="all" /> at the end of the containing div.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  5. #5
    SitePoint Wizard billy_111's Avatar
    Join Date
    Jul 2009
    Posts
    1,683
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes the famous <br clear="all"/> worked!

    Thanks ScallioXTX.
    Software Engineer ASP, ASP.NET, VB, PHP

    Kind regards
    Billy

  6. #6
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Isn't <br clear="all"> deprecated?

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,097
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Black Max View Post
    Isn't <br clear="all"> deprecated?
    AFAIK no, but it would seem it's frowned upon (as it defines layout, not structure).
    clear: both using CSS is better as I understand it.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  8. #8
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    always use css to clear=both. this habit will help you a lot in adopting of html 5


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
  •