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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Feb 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    looks fine in ie, bad in mozilla....

    this looks fine in ie, but is jacked up in mozilla. these are the only 2 i check so i'm not sure about other browsers.

    in mozilla, the main content div is shifted left a pixel or two and the margin between the menu/content and footer doesn't show up. also, i want all the content centered on the page...

    css:
    Code:
    body {
    	text-align: center;
    	background: #eeeeee;
    	font-family: verdana;
    	color: #000000;
    	}
    
    h1 {
    	font-size: 18px;
    	color: #666666;
    	margin-left: 8px;
    	margin-right: 8px;
    	margin-top: 8px;
    	}
    
    p {
    	font-size: 14px;
    	margin-left: 8px;
    	margin-right: 8px;
    	margin-bottom: 8px;
    	}
    
    .header {
    	background: #ffffff;
    	width: 750px;
    	height: 125px;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	margin-top: 15px;
    	margin-bottom: 15px;
    	}
    
    .container {
    	width: 750px;
    	}
    
    .menu {
    	color: #666666;
    	text-align: right;
    	width: 150px;
    	float: left;
    	margin-top: 8px;
    	}
    
    .content {
    	background: #ffffff;
    	text-align: left;
    	width: 585px;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	float: right;
    	}
    
    .footer {
    	background: #ffffff;
    	width: 750px;
    	border-style: solid;
    	border-color: #666666;
    	border-width: 1px;
    	margin-bottom: 15px;
    	margin-top: 15px;
    	clear: both;
    	}
    
    .footer_text {
    	font-size: 12px;
    	margin-top: 5px;
    	margin-bottom: 5px;
    	}
    
    a.footer_text {
    	text-decoration: none;
    	color: #7ab0ff;
    	}
    
    a.footer_text:hover {
    	color: #666666;
    	}
    
    a.menu_text {
    	font-size: 18px;
    	text-decoration: none;
    	color: #7ab0ff;
    	}
    
    a.menu_text:hover {
    	color: #666666;
    	}
    html:

    Code:
    <?xml version="1.0"?>
    <!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" xml:lang="en" lang="en">
    <head>
    	<title>Amoeba Solutions - Technology Made Simple.</title>
    	<style type="text/css" media="all">@import "style.css";</style>
    </head>
    <body>
    
    <div class="header">
    	<a href="index.html"><img src="new-logo.gif" border="0" alt=""></img></a>
    </div>
    
    <div class="container">
    
    	<div class="menu">
    		<p style="margin-top: 0;"><a class="menu_text" href="index.html">Home </a><img src="circle.gif" alt=""></img></p>
    		<p><a class="menu_text" href="index.html">Portfolio </a><img src="circle.gif" alt=""></img></p>
    		<p><a class="menu_text" href="index.html">Services </a><img src="circle.gif" alt=""></img></p>
    		<p><a class="menu_text" href="index.html">Contact </a><img src="circle.gif" alt=""></img></p>
    	</div>
    
    	<div class="content">
    		<h1>Home</h1>
    		<p>Mauris a justo. Nulla eget risus. Mauris malesuada vestibulum lectus. Vivamus porttitor quam id erat. Praesent suscipit. Maecenas rutrum leo. In odio ipsum, tempus ut, mattis ac, nonummy et, arcu. Quisque pellentesque sapien vel tortor. Aenean massa dui, commodo at, ultricies fringilla, tincidunt eget, wisi. Duis bibendum augue nec lacus. Curabitur quis diam a odio ultricies aliquam. Aliquam erat volutpat. Nulla facilisi. Etiam interdum massa in velit. Ut ac mauris. Curabitur consequat. Phasellus sagittis, lorem ac convallis sodales, purus purus rutrum orci, eget gravida nibh dui nec urna. Sed pulvinar. Fusce nec lectus sit amet erat tempor fermentum.</p>
    		<p>Pellentesque aliquet magna in augue. Phasellus ultricies velit et odio. Donec tortor libero, euismod ac, convallis eu, vestibulum ut, nisl. Phasellus neque ante, congue nec, cursus eu, porta sit amet, ligula. Nulla vehicula varius diam. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nisl. Integer ligula sapien, pulvinar vitae, rhoncus vitae, consectetuer accumsan, dui. Nullam dictum ultrices enim. Integer vitae justo at est elementum varius. Vivamus id magna. Vestibulum id sapien. Etiam facilisis urna molestie neque. Donec wisi erat, hendrerit a, hendrerit in, mattis sit amet, neque.</p>
    	</div>
    
    </div>
    
    <div class="footer">
    	<p class="footer_text">This site brought to you by <a class="footer_text" href="http://www.spish.net">Amoeba Solutions</a>.</p>
    </div>
    
    </body>
    </html>
    thanks in advance,
    steve
    Last edited by se4b4ss; 10-13-2004 at 03:27 PM.

  • #2
    Regular Coder
    Join Date
    Feb 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    after reading a few posts, i went ahead and validated the html and css and editted it into the above post.

    thanks again,
    steve

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Quirks mode

    AFAIK, including the xml prolog throws IE6.0 into garbage... um, quirks mode, bringing back the good ol' incorrect box model.
    I haven't torn your CSS to pieces, but that's the likely cause.

    Your footer margin not showing is probably caused by both menu and content being floated inside the container; a not-so-clean-yet-very-effective hack is to include an empty, very low element after both inside the container with "clear: both;" to always force the bottom of the container below both floated divs.
    You don't really need to float the content, though; giving it a sufficient left margin to clear the menu will do.

    Lastly, could you elaborate on the "i want all the content centered on the page"? Centered text? Equal left and right margin? The whole page centered within the window?
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Regular Coder
    Join Date
    Feb 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i appreciate your help ron.

    the div with clear: both and &nbsp solved the footer margin problem. adding margin: 0 auto to my header, container (menu/content), and footer solved the mozilla alignment issue.

    thanks,
    steve


  •  

    Posting Permissions

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