Need help with Text flowing outside of Divs

[stilts]

Ok I am just about to go crazy with this issue I am having with pretty much every website I make. And when it comes down to the end of making the website I always just write it off as no big deal. But it really annoys the heck out of me. So I am here to try and figure this out once and for all with the help of someone on this board.

The problem: My text is flowing outside of a div in a straight line down as I resize my browser screen to be smaller. ie (pressing ctrl and -). This only happens in Google Chrome or Safari. But in firefox it seems to be fine I don't understand what I am doing wrong here.

HTML

<div class="servicebox">
<div class="service_icon">

</div>
<div class="service_text">
<strong>Applicant Management</strong><br />

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
<br />
<br />
<a href="#">Read More</a>

</div>
</div>

CSS

.service_text {
	word-wrap:break-word;
	font-family: CenturyGothic, Verdana, Geneva, sans-serif;
	font-size: 11px;
	color: #616161;
	text-decoration: none;
	margin-top: 16px;
	margin-right: 0px;
	padding: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	float: left;
	width: 19em;
	position: static;
}
.service_text a:hover {
	color: #616161;
	text-decoration: none;
}
.service_text a {
	color: #616161;
	text-decoration: underline;
	float: right;
}
.servicebox {
	background-image: url(../images/servicebox.jpg);
	background-repeat: no-repeat;
	height: 166px;
	width: 312px;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 16px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.service_icon {
	padding: 0px;
	float: left;
	height: 140px;
	width: 72px;
	background-image: url(../images/service_icon.png);
	background-repeat: no-repeat;
	clear: both;
	margin-top: 16px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
}
.service_text strong {
	font-family: CenturyGothic, Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #616161;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
}

If there is anything I can add to this to make the solution easier to find for you. Let me know

Here is some images to help describe the problem further.
[IMG]http://img809.imageshack.us/img809/5941/screenshot20110622at910.jpg[/IMG]

[IMG]http://img846.imageshack.us/img846/5941/screenshot20110622at910.jpg[/IMG]

[twiss]

Try to style the boxes without the height s.

[pixelsoul]

I am not able to duplicate the problem. It must be something else outside of the css/markup you provided that is causing this behavior. Do you have a live page online that shows this?

[stilts]

I am not able to duplicate the problem. It must be something else outside of the css/markup you provided that is causing this behavior. Do you have a live page online that shows this?

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

There I tried without the heights but it is still doing it.

[pixelsoul]

Hmmm... are you using Chrome on a Mac? I am not able to see the problem with the site in Chrome on Windows 7.

[stilts]

Yes, hmmm I had no idea browsers differed over OS's. I always just assumed they were exactly the same. I guess it makes sense though when you think about it.

[pixelsoul]

Well... one would not think that they should but in more than once instance I have found a problem in a browser and then in the same browser on a different OS I didn't have that problem. I really am not sure why or how it was but it was. In the two cases I had the problem the first one was Windows and a Mac and then the second case was actually two different versions of Windows and Internet Explorer.

Unfortunately I no longer have the Mac Book that I used for testing stuff :(

I checked it all out though and I am not seeing any problems accept for a couple of declarations in the css that are not really needed and I didn't see any reset styles being used which might be good.

If you don't have one try this one at the top of your style.css sheet right after the @charset "UTF-8"; line. It has the new tags in it also for HTML5 and is the one I use :)

/* --------- HTML5 STYLE RESET ---------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}                  

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display:block;
} 

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
/* ------------------------ */

[stilts]

Thank you for your help pixel. I honestly think I am stuck unable to fix it which really frustrates me. Anyways I guess I will have to hope people don't resize their browser windows. Or they are viewing the page on windows instead of mac. I put the html5 reset styles but I have no idea what it is doing. I have never even heard of it until you just now mentioned it and I have been using css for at least 2 years.

[pixelsoul]

I am sure there is a solution. There almost always is :)

The CSS reset is for resetting the default styles browsers put on the standard html mark up. When you create a plain old html page with mark up browsers will apply a style to some or all of the items in the mark up and that is why it looks different in different browsers when you view it.

The reset will set them all to the zero so there is a better chance your design will look the same across all/most browsers. I use it on ALL my work every time. Here is a link that has more information on it http://meyerweb.com/eric/tools/css/reset/. This is probably the most popular CSS reset out there.

[stilts]

Well I guess you learn something new everyday. Thanks for that :). I am going to keep cracking away at this and maybe eventually I will find something that will fix it (I hope at least).

I will keep the problem hosted online for a couple more days incase anyone comes in and wants to check it out. Maybe someone can figure it out.

[twiss]

If you use the reset, remove outline:0; . It greatly reduces usability, as you can't see the selected element anymore.

[pixelsoul]

Ya, that entry in the reset was actually my doing. I did it because I hate how it outlines links when I set a background image and a negative number for the text-indent to push the text off of the screen :P

Forgot that was in there.

[stilts]

I think I have come up with a solution but I will need help from someone who knows javascript. I was reading online that you can use javascript to resize your text when page gets bigger or smaller can anyone point me to an article or show how you would do such a thing. I searched online but it was a lot of mumbo jumbo to me. I mean I know how to implement scripts and such but when it comes to javascript by hand I wouldn't be able to for the life of me.

[pixelsoul]

Just so you know. When I got into the office today I decided to test your problem on my Mac I have here and I can not see the problem in Safari here.

Are you just re-sizing the browser smaller to make this happen?

[stilts]

I am doing Command - and + back and forth when I zoom out it starts to do that.

[Louilly]

Could you post a screen shot of the problem?

[stilts]

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

http://img809.imageshack.us/img809/5941/screenshot20110622at910.jpg

http://img846.imageshack.us/img846/5941/screenshot20110622at910.jpg

[Louilly]

Ah, I see the problem, the text doesn't reduce in size enough to still fit within the box, the box has a fixed height. I will have to experiment but I think you will have to remove the fixed height on the box, it may work if you use percentages on both the text and the box, possibly min-height rather than height. I don't have time now but if noone else comes up with a solution I'll have a look at this later today. It's an unusual problem and I would like to know the solution for myself too

[twiss]

It's very easy. As I said in the first reply, you need to remove the heights in the CSS, and style from there until it looks just like it does now (padding, et cetera).

[Louilly]

Twiss, I believe you are right but from reading all the posts I thought Stilts said they had tried that and it didn't work. It certainly works for me but I thought it possibly wasn't working in a browser version that I don't have that's why I thought it was unusual!

[twiss]

Perhaps it helps if we get the code of that version?

[ushajase]

define the style for service_text - overflow:hidden;

[ushajase]

define the style for .service_text - overflow:hidden;

[ushajase]

.service_text {
word-wrap:break-word;
font-family: CenturyGothic, Verdana, Geneva, sans-serif;
font-size: 11px;
color: #616161;
text-decoration: none;
margin-top: 16px;
margin-right: 0px;
padding: 0px;
margin-bottom: 0px;
margin-left: 5px;
float: left;
width: 19em;
position: static;
overflow:hidden;
}

[ushajase]

define the style 4 .service_text class

[ushajase]

.service_text {
word-wrap:break-word;
font-family: CenturyGothic, Verdana, Geneva, sans-serif;
font-size: 11px;
color: #616161;
text-decoration: none;
margin-top: 16px;
margin-right: 0px;
padding: 0px;
margin-bottom: 0px;
margin-left: 5px;
float: left;
width: 19em;
position: static;
overflow:hidden;
}

[twiss]

That's not gonna work, Usha, even if you try it 5 times.

[ushajase]

That's not gonna work, Usha, even if you try it 5 times.

:) try and tell me. it'll work

[stilts]

The problem only seems to occur in the mac version of google chrome and also in safari, although when I try to view it in any browser on windows it appears the way it should.

[Louilly]

I can see it on Safari 5 on pc but it looks fine in all the other browsers