Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Text overflowing horizontally from div

    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?

  • #2
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, forgot to add that it works in IExplorer but not in Chrome (so i'm guessing not in Firefox either).

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by Excavator View Post
    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;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys. Feel like an idiot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •