SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    0 Post(s)
    0 Thread(s)

    Smile CSS formating question ??

    Stuck on a formatting problem.

    2 Questions:
    1) #clearfix3 { clear:both; } Does not reset for new content across 100&#37; of container <div id="right"> ??
    2) Firefox does not recognize #rightspace100{ float:left; width: 100px; } as space ??

    In the main content of <div id="right">:

    <div id="right"> <!--supposed to be main content 74% width-->
    <div id="rightcol1"> <!--supposed to hold image 45% width-->

    <p><img class="bay" src="images/bay.jpg" alt="bay" /></div>

    <div id="rightspace10"></div> <!--supposed to space between rightcol1 and rightcol2 10px-->

    <div id="rightcol2"> <!--supposed to hold text 55% width-->

    <div id="rightspace100"></div><div class="box"> <!--promo, precede by 100px rightspace100-->
    <a href="" title="Wealth Management<br> Seminars / workshop">Wealth Management<br> Seminars / workshop</a>

    <h1>JCB Capital Performance</h1><br></br> JCB Capital ....Advisor<BR><BR><BR>Extraordinary services at Affordable prices.</p></div>

    <div id="clearfix3"></div> <!--supposed to break for a new div id="right"> -->

    I placed CSS in page ??
    Last edited by jcbrandon; Jun 11, 2007 at 10:03.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    The clearfix3 is clearing the content above it as expected. It is contained inside #right which is floated so it can't clear anything outside of #right.

    You have a lot of errors in that small page and you should fix them first before trying to fix any display issues because it may be the errors that are causing some of your problems.

    Your last few styles aren't being processed because you have copied a style tag in there and left some quote marks in the mix also.

    What's this doing in there
    .box { style="TEXT-DECORATION: none"; background: #FF9966; border:none; width: 150px; height: auto; font-weight: bold; padding: 5px; text-align: center; margin-bottom: 5px; }

    You have the dowuble margin bug in IE and you need to add display:inline here.

    #topnav { float: left; text-align: center; font-size: 1.05em; margin-top: 10px; margin-right: 10px; margin-left: 35%; padding: 0 5px 5px 0; background: #fff; height: 20px; border-top: 1px solid #BF060C; border-bottom: 1px solid #BF060C;display:inline; }
    Firefox does not recognize #right4a{ float:left; width: 100px; } as space ??
    If it has no content and it has no height then there will be nothing to show. You shouldn't be using empty containers to make space because that's what margins and padding are for.

    Don't use breaks to make space. Use paragraphs and set margins as appropriate.

    Work your way through all the errors and tidy that code up and then you can start addressing display and coding issues.

  3. #3
    SitePoint Member
    Join Date
    May 2007
    0 Post(s)
    0 Thread(s)

    Smile Thanks

    Hi Paul,

    Thanks for your help.

    I will work on your suggestions - still on the CSS learning curve.



Posting Permissions

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