Need help with Text flowing outside of Divs - Page 2

[stilts]

:) try and tell me. it'll work

I gave it a try and it doesn't seem to work.

[matricol]

insert height and width and display:block to the div

[pixelsoul]

Are you sure you are not just zooming the text on the page? I can duplicate the same thing in any browser if I set the browser to zoom the text only.

Also, if I am right and you are just zooming the text then the text is actually not breaking out of the div. It just appears that way because of the background image you are using on the div. If you put a "border: solid 1px;" on the div and tried the same thing you would see that the text actually does stay inside the div and that the div actually just gets taller to accommodate the new size of the text and the background image stays at the top of the div

[stilts]

insert height and width and display:block to the div

On which div...? I tried on both and it doesn't seem to help the problem.

[stilts]

Are you sure you are not just zooming the text on the page? I can duplicate the same thing in any browser if I set the browser to zoom the text only.

Also, if I am right and you are just zooming the text then the text is actually not breaking out of the div. It just appears that way because of the background image you are using on the div. If you put a "border: solid 1px;" on the div and tried the same thing you would see that the text actually does stay inside the div and that the div actually just gets taller to accommodate the new size of the text and the background image stays at the top of the div

When I zoom out it is with ctrl - not sure if that is what you mean by "zooming the text".

[pixelsoul]

Yes, if you have your browser set to "Zoom Text Only" it will not increase the size of the layout of the page but it will only increase the size of the text on the page only.

You would need to check your browser settings to see if it is set to Zoom Text Only to tell. The option is under the "View" menu up at the top of the screen. If it is set to Zoom Text Only that would explain the behavior.

[stilts]

Everything is resizing on the screen(except text), its just the text is either not resizing smaller or the boxes aren't getting taller as the text stays the same size. I swear I feel like I am over complicating this issue. But who knows.....

[pixelsoul]

I wish I was able to replicate the issue on my end here so I could see it first hand. Unfortunately I can't seem to find any problem which of course makes it hard to give any kind of useful feedback.

[stilts]

I wish I was able to replicate the issue on my end here so I could see it first hand. Unfortunately I can't seem to find any problem which of course makes it hard to give any kind of useful feedback.

I may have just figured it out.

.servicebox {
	margin-top: 16px;
	margin-right: 0px;
	margin-left: 14px;
	float: left;
	border: 1px solid #669966;
	background-color: #FBFBFB;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 0px;
}
.service_text {
	word-wrap:break-word;
	font-family: CenturyGothic, Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #616161;
	text-decoration: none;
	margin-top: 16px;
	margin-right: 0px;
	padding: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	float: left;
	width: 213px;
}

I am not sure if someone mentioned this earlier in the topic but what I ended up doing was defining only a width for the inner text div. Leaving the height on the text as nothing and the height and width on the main box as nothing as well. What results is a box that expands as I zoom out. Not what I originally wanted but I may have to deal with it.

[stilts]

Can anyone confirm that it doesn't mess up on windows side browsers for me?

http://shawnhilts.com/test/OurServices.html

Try resizing..

Edit:
Also I removed the image from the back of the main box, not sure if that did anything.

[twiss]

Yes, it works fine, except for one div (#col4) in the footer. If you change the width to padding: 0 10px; , it fixes the problem.

[stilts]

Thanks