The mystery of the disapearing paragraphs in css

Dev Shed Forums Sponsor:

July 15th, 2003, 01:57 PM

fishhead32

Junior Member

Join Date: Jul 2003

Posts: 5

Time spent in forums: < 1 sec
Reputation Power: 0

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

July 15th, 2003, 02:14 PM

kkong

Monkey Magic

Join Date: Sep 2002

Location: UK

Posts: 103

Time spent in forums: < 1 sec
Reputation Power: 11

Hi,

what code do you have in the class called content?

Kong.

July 15th, 2003, 02:22 PM

fishhead32

Junior Member

Join Date: Jul 2003

Posts: 5

Time spent in forums: < 1 sec
Reputation 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;
}

July 15th, 2003, 02:36 PM

kkong

Monkey Magic

Join Date: Sep 2002

Location: UK

Posts: 103

Time spent in forums: < 1 sec
Reputation Power: 11

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.

July 15th, 2003, 02:40 PM

fishhead32

Junior Member

Join Date: Jul 2003

Posts: 5

Time spent in forums: < 1 sec
Reputation Power: 0

the text displays properly, but the boxes are stacked on top of one another instead of side by side

July 15th, 2003, 02:45 PM

kkong

Monkey Magic

Join Date: Sep 2002

Location: UK

Posts: 103

Time spent in forums: < 1 sec
Reputation Power: 11

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.

July 15th, 2003, 03:04 PM

fishhead32

Junior Member

Join Date: Jul 2003

Posts: 5

Time spent in forums: < 1 sec
Reputation 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?

July 15th, 2003, 03:37 PM

kkong

Monkey Magic

Join Date: Sep 2002

Location: UK

Posts: 103

Time spent in forums: < 1 sec
Reputation Power: 11

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.

July 15th, 2003, 04:09 PM

fishhead32

Junior Member

Join Date: Jul 2003

Posts: 5

Time spent in forums: < 1 sec
Reputation Power: 0

The mystery of the disapearing paragraphs in css

Developer Shed Advertisers and Affiliates