Hiding half shown content in a div with the overflow property

[Venom Rush]

Hi everyone

I have a table inside a div. The div has the overflow property set to auto and a height specified. At the moment when some of my pages load, the copy inside the div is peeking at the bottom. Is there any way to not show it? I've tried the clip property but I've found that it doesn't work when overflow is set.

Any help would be greatly appreciated ;)

[sreein1986]

I didn't get what are you saying please post your query with also code

[Venom Rush]

This is what I have. What happens on some pages with this structure is that the text is half shown at the bottom of the div. What I would like to know is if it's possible to hide that text until someone scrolls down.

<div class="contentOverflow">
<table height="360" width="100%" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td class="content" align="left" valign="top">
		<p>This is copy that goes deeper than 360 pixels. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum lacus enim, suscipit eu, eleifend a, feugiat sodales, mauris. Duis vel est. Quisque consequat rhoncus neque. Nunc a ipsum. Duis ut justo. Pellentesque mattis, mauris nec ullamcorper ornare, felis quam condimentum mi, nec dictum massa sapien a lorem. Maecenas leo neque, dapibus sit amet, commodo quis, vulputate vitae, felis. Donec vitae dui. Aliquam quis dui. Morbi eget dolor. Quisque varius. Maecenas arcu. Sed mollis tincidunt sem. Nunc id massa. Aliquam erat volutpat. Vestibulum purus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec ante metus, tempus eget, imperdiet id, accumsan vel, enim. Nam lorem elit, eleifend vitae, lacinia ut, varius eget, magna. Etiam lobortis est nec sem.

Aenean a lectus. Nullam ultricies. Aenean fermentum iaculis tellus. Etiam gravida, felis at pharetra vulputate, quam sem faucibus dolor, sed tristique dui nulla pharetra diam. Vestibulum iaculis accumsan odio. Nullam lorem. Nam accumsan nunc non felis. Suspendisse nulla mi, dignissim ac, ultricies quis, aliquam ut, mauris. Integer malesuada. In malesuada enim in libero. Mauris ultricies dolor eu mauris. Nullam faucibus feugiat velit. Maecenas ante eros, egestas a, euismod quis, lobortis non, dui. Morbi malesuada turpis at libero. Aenean elementum. Aenean pede pede, dapibus quis, congue a, volutpat a, odio. Cras tortor eros, ullamcorper a, luctus imperdiet, convallis adipiscing, sem. </p></td>
			  </tr>
			</table>
			</div>

.contentOverflow {
	height:360;
	overflow:auto;
	/*clip:rect(30px, 0, 30px, 0);*/
}
.content {
	background-color:#FFFFFF;
	padding:30px 50px 30px 50px;
}

[sreein1986]

In my IE and firefox it's came clearly
I think its depends on screen resolution, change your screen resolution to 1024*760
or 1280*800 ...

[Venom Rush]

The website is going to be viewed by the general public. I was hoping there might be a solution that would work for everyone. Thanks for your effort though sreein ;)

[MidiMagic]

The problem is in the fluid nature of div. It doesn't always obey the height and width properties, unless forced to by surrounding objects. It "thinks" displaying the content is more important than the defined size.

[Venom Rush]

The problem is in the fluid nature of div. It doesn't always obey the height and width properties, unless forced to by surrounding objects. It "thinks" displaying the content is more important than the defined size.

Ok, if that's the case then surely it would show an entire sentence instead of just the top half of every word???

[MidiMagic]

OH!

I thought it was cutting off the last half of the text string.

This is a problem of the div or the line being smaller than the space needed to render the text.

Check your styles for the following:

- A height too small to contain the text and its surrounding styles.

- A font size smaller than the smallest size the displayed font can display in.

- The height of the container not being an integer multiple of the height of the text.

Also check to see if the browser is substituting font sizes. Remember that users can change font sizes with a menu setting when they view your page.

Maybe the spatula has something to do with it. :icon_cheesygrin: