Page breaks only in Firefox, Thoughts?

[Superorb]

Hi, I'm a little stumped here why IE would display correctly and Fx won't. I had wanted it so that the text can be resized and not break anything on the page. IE works, but Fx has issues. The left menu text breaks out of its div and runs into the content div when enlarges text in Fx. Also, the content div and the header nav div run out of the main div onto the right of the screen. Also, the search float gets pushed onto the next line. 95% of users use IE and it looks fine in IE, but I don't want to negate the other 5% of users using whatever else. I assume IE works only because there's only so far you can enlarge in IE vs. Fx's wider range. I have used a few hacks and I hope they do not conflict. Any ideas are greatly appreciated.

http://dlis.dos.state.fl.us/_dev/dev...olicy-test.htm

Thanks,
Ken

[Zachnefein]

Hi, I'm a little stumped here why IE would display correctly and Fx won't.

That would make life difficult wouldn't it?
Much easier to realize that IE wouldn't, and firefox is.

The left menu text breaks out of its div and runs into the content div when enlarges text in Fx.

per box model spec., as it should.

Also, the content div and the header nav div run out of the main div onto the right of the screen.

Because you told them to?:

div#content {
	border:1px #A6A6A6 solid;
	margin: 5px 5px 10px 170px;
	background-color: #ffffff;
	padding: 10px 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	width: 100%;
}

100% + 170px + 5px + 10px + 10px = 100% width + 195px.

Remove the width:100%; fixed

#nav-header ul{
  display: table;         /* ignored by IE */
  padding: 0;
  margin: 0;
  list-style-type: none;
  white-space: nowrap;    /* keep text on one line */
  border: none; /* add a border to show size of menu */
  font-family: Arial, Helvetica, sans-serif;
  background-color: #993333;
  font-weight: bold;
  font-size: 0.9em;
  }

Remove white-space: nowrap;
Maybe put this on each anchor instead so "Secretary of State" etc. won't break in the middle, but allow the container to grow for multiple lines... No height on either s0s-row, or nav-header

Also, the search float gets pushed onto the next line.

There's only so much room per line... paragraphs do the same thing. See above.

I assume IE works only because there's only so far you can enlarge in IE vs. Fx's wider range. I have used a few hacks and I hope they do not conflict. Any ideas are greatly appreciated.

Partly.
I'm guessing you tested in IE as you were designing?
Otherwise you might be asking why it was broken...

IE expands containers to fit their content, instead of allowing the content to overflow the edge as it should.

Try the page with your browser at an 800px width.. then set text to largest. Now IE runs off the side of the page....

Also, there's no font color set other than a few specific areas. I had to set the color before I could see the main body text.. it was white on white for me.

Edit to add: You also need a full doctype declaration, it's only partial now, so IE is in quirks mode...

[Superorb]

Thanks for the response. I worded that wrong earlier, you are correct in saying that IE renders it "wwrong." What did you mean when you said, "No height on either s0s-row, or nav-header"? Because the search and SOS text are floated, the div will collapse if no height is defined. For the nav-header, does it need a specific height defined? I test with IE and Fx alongside eachother but ran into these problems. I had noticed that problem with IE in low resolutions breaking as well. I do apologize for the font-color, I did not have that problem on my end. I do not fully understand the box model, I am still learning a lot about css.