...

View Full Version : 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
<!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:


<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 :rolleyes:

Remove this bit in red (.wrapper is found in skin.css)
.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
Good morning rockonpub,
You have .wrapper set at 500px height. I misses it. And there's one more height to be removed from
.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 :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum