SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Sydney
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant get this layout to work in Mozilla

    Hi;

    The layout at http://www.neighbourhoodit.com.au/nit/nit_mock1.html looks perfect in IE but doesnt want to work in Mozilla/Firefox.

    I know this is a big ask, but could some body please have a look and tell me where I am going wrong?

    Cheers
    Buying websites
    Must be at least 6 months old ...
    & Making ~5/mth - PM me with traffic and revenue stats!

  2. #2
    SitePoint Zealot jfitz's Avatar
    Join Date
    Mar 2004
    Location
    Lovely Leipzig
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's the other way around. IE is messing up the interpretation of your code. It just happens to be what you wanted. Having a faulty doc type, as you had,puts IE into quirksmode. Quirksmode makes IE use their old, incorrect way, of measuring the dimensions of boxes. You need to understand the css box model to understand why this went wrong.
    http://tantek.com/CSS/Examples/boxmodelhack.html explains and illustrates this well. Having the right doc type will *help* eliminate the need for the hack he talks about in this article.
    There were several other easily fixed problems in the html. You should try validating your code before you post in future. It makes it easier and less time consuming for us to find the real problem if we don't have to fix things like doctypes first.
    http://validator.w3.org/ - for (x)html
    http://jigsaw.w3.org/css-validator/ - for css
    I'd also recommend downloading Screen Calipers. It's dead handy for tracking down whether or not your box model is acting up.
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    
    <style type="text/css">
    
    html,body {height:100%;}
    
    body {
    margin: 0px;
    padding: 0px;
    background: #eee;
    text-align: center;
    }
    
    #content {
    margin: 0px;
    padding: 0px;
    height: 100%;
    min-height: 600px;
    width: 779px;
    background: #fff;
    border-left: 1px solid #777;
    border-right: 1px solid #777;
    }
    
    #header {
    margin: 0px;
    padding: 0px;
    height: 120px;
    width: 779px;
    background: #4890cd;
    }
    
    #text {
    padding: 35px;/*###########################*/
    /*width: 100%; THIS IS WHERE YOU WENT WRONG
    It's made the div 100% wide and then added 
    35px padding which allowed the rightbox
    "spill" outside. 
    ####################################
    */
    text-align: left;
    font: 14px verdana, arial, century;
    }
    
    #rightbox {
    float: right;
    padding: 15px;
    background: #f8f8f8;
    margin-left: 25px;
    border: 1px solid #ccc;
    }
    
    
    h1 {
    text-align: left;
    font: bold 18px verdana, arial, century;
    }
    
    h2 {
    font: bold 18px verdana, arial, century;
    color: #4890cd;
    }
    
    .address {
    padding: 20px;
    float: left;
    text-align: left;
    color: #fff;
    font: 12px verdana;
    }
    
    img.right {
    float: right;
    margin-top: 15px;
    margin-right: 30px;
    }
    
    ul.listone {
    color: #2b83cd;
    }
    
    ul.listtwo {
    font: bold 14px verdana, arial, century;
    color: #2b83cd;
    line-height: 30px;
    }
    
    #navcontainer ul
    {
    padding-left: 0;
    margin-left: 0;
    background-color: #444;
    color: White;
    float: left;
    width: 779px;
    font-family: arial, helvetica, sans-serif;
    }
    
    #navcontainer ul li { display: inline; }
    
    #navcontainer ul li a
    {
    padding: 0.2em 1em;
    background-color: #444;
    color: White;
    text-decoration: none;
    float: left;
    border-right: 1px solid #fff;
    }
    
    #navcontainer ul li a:hover
    {
    background-color: #369;
    color: #fff;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="content">
    
    	<div id="header">
    		<p class="address"><strong>NEIGHBOURHOOD IT Pty LTD</strong><br />
    		<span>ABN 49 101 646 048</span><br /><br />
    		PO Box 2090, NORMANHURST NSW 2076<br />
    		Phone: 02 9481 7309&nbsp;&nbsp;&nbsp;&nbsp;Fax: 02 9481 7310<br />
    		Mobile: 0414 208 744<br />
    		Email: [email]neighbourhoodit@optusnet.com.au[/email]</p>
    		<img src="http://www.neighbourhoodit.com.au/nit/nit_logo.gif" class="right" alt="" />
    	</div>
    
    <div><img src="http://www.neighbourhoodit.com.au/nit/nit_headbar_1.gif" alt="" /></div>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Map</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    
    	<div id="text">
    		<div id="rightbox">
    			<h2>Fast, efficient service</h2>
    			<p><strong><em>9 REASONS TO CALL US...</em></strong></p>
    
    				<ul class="listtwo">
    					<li>7 Days a week, on-site</li>
    					<li>7.00am to 10.00pm</li>
    					<li>Emergency hotline</li>
    					<li>Same Day repairs</li>
    					<li>Loan a computer</li>
    					<li>No call-out fee</li>
    					<li>Independent advice</li>
    					<li>Experienced IT professionals</li>
    					<li>Best value-for-money</li>
    				</ul>
    
    		</div>
    		<h1>Reduce your home computer stress</h1>
    		<p>Our service is specially designed to meet your needs as a home computer user or small business.</p>
    		<p>Our experienced computer specialists will give you advice, guidance and assistance at all stages in the life of your home computer including purchase, set-up, networking, upgrading or repairs.</p>
    		<p>Whether you use a computer for games, school projects or running sophisticated business systems, call us to:</p>
    
    			<ul class="listone">
    				<li>Repair your computer fast</li>
    				<li>Upgrade the speed and capacity of your computer</li>
    				<li>Back up your important data easily and reliably</li>
    				<li>Fix problems with software</li>
    				<li>Tune your computer for trouble-free running</li>
    				<li>Set up home or business computer networks</li>
    				<li>Hardware, software and complete systems at competitive prices</li>
    				<li>Give independent advice on purchase</li>
    			</ul>
    
    		<p>We will even lend you a computer to get you working immediately!</p>
    	</div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Zealot
    Join Date
    May 2001
    Location
    Sydney
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help, and thanks for the links. I will certainly validate before posting like this again.

    There are still a couple of other problems but i will have a hack through them first.

    Cheers.
    Buying websites
    Must be at least 6 months old ...
    & Making ~5/mth - PM me with traffic and revenue stats!


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
  •