SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: code blunder

Hybrid View

  1. #1
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    code blunder

    I can't find where it is, but there is a problem somewhere in my code. It works great in every browser I can find, except Mozilla (NS4 isn't great of course).

    When I look at other people's samples, I can't tell what I'm doing differently. Their's seems to work in Mozilla, but not mine. What's happening in my version is that when you resize the browser window to be smaller than the fixed-width <div>'s, it starts going off the left-hand side of the page and doesn't even let you scroll that direction...

    Here's my HTML:
    Code:
    <div id="container">	
    	<div id="masthead">
    		...masthead here...
    	</div>
    
    	<div id="pagelements">
    		
    		<div id="content">
    			<p>...content here...</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    		</div>
    		
    		<div id="navbar">
    			...nav here...
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    			<p>&nbsp;</p>
    		</div>
    	</div>
    
    	<div id="boilerplate">
    		...boilerplate here...
    	</div>
    </div>
    And here is my CSS:
    Code:
    body {
    	margin: 0px;
    	padding: 0px;
    	border: 0px;
    	text-align: center; /* fix IE5/Win browser centering */
    	}
    
    #container {
    	margin: 0px auto;
    	padding: 0px;
    	border: 0px;
    	width: 780px;
    	text-align: left; /* needed after IE5/Win fix */
    	}
    
    #masthead {
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    	background-color: #000;
    	}
    
    #pagelements {
    	padding: 0px;
    	margin: 0px;
    	border: 0px;
    	background-color: #CC9999;
    	clear: both;
    	}
    
    #navbar {
    	border: 0px;
    	margin: 0px;
    	padding: 0px;
    	width: 150px;	
    	background-color: #eee;
    	}
    	
    #content {
    	float: right;
    	border: 0px;
    	padding: 0px;
    	margin: 0px;
    	background-color: #666;
    	width: 630px;
    	height: 100%;
    	}	
    
    #boilerplate {
    	border: 0px;
    	padding: 0px;
    	margin: 0px;
    	clear: both;
    	}
    Any help would be appreciated!

    Brandon

  2. #2
    SitePoint Enthusiast 2kool2's Avatar
    Join Date
    May 2001
    Location
    UK
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brandon try this method instead.

    CSS:
    Remove
    text-align: center; /* fix IE5/Win browser centering */

    from the body tag and add:

    #iepagefix{text-align:center; min-width:780px}

    Then add:

    <div id="iepagefix">

    around the container div.


    That sorts it.

    I think the problem arises from not stating a width on the body tag (of course you can't).


    hope that helps dude.
    mike 2k: )2
    <work> http://webSemantics.co.uk </work>
    <rest> http://2kool2.com/ </rest>
    <play> http://bangersandmash.com/ </play>

  3. #3
    SitePoint Evangelist Brandon Luhring's Avatar
    Join Date
    Apr 2002
    Location
    IN, USA
    Posts
    455
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that did it!

    Thanks, man!


Bookmarks

Posting Permissions

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