#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    5
    Rep Power
    0

    Question The mystery of the disapearing paragraphs in css


    The mystery I am speaking of is that on a webpage I am building two paragrahs just aren't there when the page is loaded. I have three boxes which are floating divs that break up the text of the page half way through. The text above the floating boxes doesn't display when the page is loaded (and if it does a reload will vanish it). You can select the text, so it's still there. I traced the problem ( I think) to the floating boxes, if I don't float them the text displays fine, but then the boxes aren't displayed on the same line.
    boxes are:
    #
    #
    #
    instead of:
    ###

    the css for the box div is as follows:
    Code:
    .float {
    float: left;
    border: solid #B5BDD6 1px;
    width: 175px;
    margin-left: 25px;
    margin-right: 25px;
    margin-bottom: 10px;
    margin-top: 0px;
    padding: 7px;
    background-color: #FFEDDB;
    cursor: pointer;
    }
    the html for the box is:
    Code:
    <div class="float" onmouseover="this.style.backgroundColor='#FFD4AA';" onmouseout="this.style.backgroundColor='#FFEDDB'">
    <a href="#" class="boxl">
    <span class="boxtitlea">News</span><span class="boxtitleb">Flash</span>
    <br />blah blah blah...<a><br />
    </div>
    you can see the problem in action
    http://www.32fish.com/testware/index2.html

    you help is greatly appreciated
  2. #2
  3. Monkey Magic
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    UK
    Posts
    103
    Rep Power
    12
    Hi,

    what code do you have in the class called content?

    Kong.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    5
    Rep Power
    0
    Actually content has nothing in it:
    Code:
    .content {
    }
    but the text is formated by p
    Code:
    p {
    font-family: Verdana, sans-serif;
    font-size: 12px;
    text-align: left;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 15px;
    }
  6. #4
  7. Monkey Magic
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    UK
    Posts
    103
    Rep Power
    12
    ok,

    what happens if you remove the float: left part from the float class and try using a position: absolute or relative.

    Kong.
    Last edited by kkong; July 15th, 2003 at 02:41 PM.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    5
    Rep Power
    0
    the text displays properly, but the boxes are stacked on top of one another instead of side by side
  10. #6
  11. Monkey Magic
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    UK
    Posts
    103
    Rep Power
    12
    just had a quick fiddle with your html and found a div without an end tag.

    Code:
    <div class="container">
    I added the closed </div> tag to the same line and now your boxes were coming up ok on my test page.

    give it a go.

    Kong.
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    5
    Rep Power
    0
    good catch, but I closed this tag later on in the page and the problem still existed, I removed this "container" tag completely and the page works perfect, except I don't have the background color any more, any sugestions on how to get that back?
  14. #8
  15. Monkey Magic
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2002
    Location
    UK
    Posts
    103
    Rep Power
    12
    could you add the background colour to the content class instead?
    that should give you the same results.

    Was there anything else in that container class?

    Kong.
  16. #9
  17. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    5
    Rep Power
    0
    no

IMN logo majestic logo threadwatch logo seochat tools logo