Text overflowing horizontally from div

rockonpub · 01-15-2010, 04:02 PM

Hey everyone,

I've been racking my brain but can't figure out why the text is overflowing on this site:

http://ndox.co.uk/Governors.aspx

Don't mind the horrible code that the cms, GIMP, has churned out. The basic template I did was compliant and clean.

I've tried clear: both and also a div after the content with clear: both inline but I can;t get it to stay inside the pagecontent div!

Any ideas?

rockonpub · 01-15-2010, 04:04 PM

Ah, forgot to add that it works in IExplorer but not in Chrome (so i'm guessing not in Firefox either).

abduraooft · 01-15-2010, 04:19 PM

The DOCTYPE used is incomplete, check the article at http://www.alistapart.com/articles/doctype and use a proper one. I'd recommend

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

. After that, validate your page using http://validator.w3.org/ and fix all other errors left in your markup.

rockonpub · 01-15-2010, 04:24 PM

I'll change the doctype but do you think it's overflowing because of improper generated code by the cms?

The template I made is only this:

Code:

<div align="center">
	<div class="pagetop">
	</div>
	<div class="wrapper">
		<div class="pagenav">
			<div class="mainlogin">
				<dnn:LOGIN runat="server" id="dnnLOGIN" /><a href="#"></a>
			</div>
			<div class="mainmenu">
				<dnn:MENU runat="server" id="dnnMENU" />
			</div>
		</div>
		<div class="pagecontent" id="ContentPane" runat="server" visible="false">
		</div>
		
	</div>
	
	<div class="pagefooter">
	</div>
	
</div>

<div align="center">
	<dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" />
</div>

Excavator · 01-15-2010, 04:27 PM

Good morning rockonpub,
You have .wrapper set at 500px height. That's what it's doing too, not a clue how IE makes that work

Remove this bit in red (.wrapper is found in skin.css)

Code:

.wrapper {
	position: relative;
	background-image: url(pagewrapper.jpg);
	background-position: top center;
	background-repeat: repeat-y;
	width: 944px;
	margin: 0px;
	padding: 0 10px 0 10px;
	height: 500px;
}

rockonpub · 01-15-2010, 04:30 PM

Oh dear god. How could I have missed that!? I put it in before any content was there to compensate and forgot it was there!

Thank you haha.

abduraooft · 01-15-2010, 04:31 PM

Quote:

Originally Posted by Excavator

Good morning rockonpub,
You have .wrapper set at 500px height.

I misses it. And there's one more height to be removed from

Code:

.pagecontent {/*skin.css (line 84)*/
font-size:15px;
height:100%;
margin:0;
padding:10px 45px;
position:relative;
text-align:left;
width:854px;
}

rockonpub · 01-15-2010, 04:47 PM

Thanks guys. Feel like an idiot