...

View Full Version : looks fine in ie, bad in mozilla....



se4b4ss
10-13-2004, 06:30 AM
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:

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:


<?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

se4b4ss
10-13-2004, 03:28 PM
after reading a few posts, i went ahead and validated the html and css and editted it into the above post. :)

thanks again,
steve

ronaldb66
10-13-2004, 03:55 PM
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?

se4b4ss
10-13-2004, 08:16 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum