Firefox VS IE alignment problem

DJ-Craig · #1 (**permalink**) 06-13-2007, 06:22 PM

i used the no-lag css navigation bar found in this forum to create a navigation menu for the left of my website. When i load in ie6/7 it is aligned slightly offset to the right compared to what is seen in firefox. I cant get them to align with one another. can anyone help me?

heres a link to the site http://www.cma-design.co.uk/test.html

Firefox View:

IE6/7 View:

heres my html and css code for the site if that helps:

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CMA Design</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div id="wrapper" class="clearfix">
<div id="header">
</div> 
<div id="nav">
<img src="slices/navbar.jpg" />
</div> 
<div id="left">
<div id="menu">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</div> 
</div> 
<div id="main">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis odio. Fusce quam enim, vehicula eu, iaculis nec, rutrum nec, sapien. Curabitur sit amet tortor. Nunc dui. Aliquam erat volutpat. Mauris a sem et nulla tristique auctor. Donec eu sapien sit amet nunc aliquam tempor. Aliquam neque mauris, tincidunt at, fringilla sed, rutrum vitae, turpis. Mauris convallis quam at quam. Praesent rutrum lorem sodales sem. Duis pharetra eros sit amet libero. Vestibulum commodo dapibus libero. Fusce varius porttitor nulla. Duis eu quam. Cras sem.

Sed dictum, sapien mattis egestas blandit, odio ante luctus quam, sit amet convallis massa augue eget dolor. Etiam pede pede, dapibus eget, vestibulum sed, luctus et, pede. Integer consequat tempus odio. Quisque eu elit quis sapien interdum adipiscing. Integer a leo. Suspendisse eget nibh auctor elit molestie suscipit. Aliquam vel turpis in massa sodales pulvinar. Aliquam at eros. Praesent vel velit at sem semper facilisis. Donec placerat velit ut massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In convallis odio. Fusce quam enim, vehicula eu, iaculis nec, rutrum nec, sapien. Curabitur sit amet tortor. Nunc dui. Aliquam erat volutpat. Mauris a sem et nulla tristique auctor. Donec eu sapien sit amet nunc aliquam tempor. Aliquam neque mauris, tincidunt at, fringilla sed, rutrum vitae, turpis. Mauris convallis quam at quam. Praesent rutrum lorem sodales sem. Duis pharetra eros sit amet libero. Vestibulum commodo dapibus libero. Fusce varius porttitor nulla. Duis eu quam. Cras sem.

Sed dictum, sapien mattis egestas blandit, odio ante luctus quam, sit amet convallis massa augue eget dolor. Etiam pede pede, dapibus eget, vestibulum sed, luctus et, pede. Integer consequat tempus odio. Quisque eu elit quis sapien interdum adipiscing. Integer a leo. Suspendisse eget nibh auctor elit molestie suscipit. Aliquam vel turpis in massa sodales pulvinar. Aliquam at eros. Praesent vel velit at sem semper facilisis. Donec placerat velit ut massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div> 
<div id="footer">
<img src="slices/footer.jpg" />
</div> 
</div> 
</body>
</html>

Quote:

body {
margin: 0px;
padding: 0;
text-align: center;
min-width: 751px;
background-color: #CCCCCC;
font: 0.7em Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
text-align: left;
width: 751px;
margin-left: auto;
margin-right: auto;
padding: 0px;
background-image: url('slices/bg.jpg');
}

#header {
height: 251px;
background-image: url('slices/title.jpg');
background-repeat:no-repeat;
width: 751px;
}

#nav {
height: 60px;
width: 751px;
}

#left {
margin: 0px;
padding: 0px;
width: 229px;
float: left;
}

#menu {
height: auto;
width: 175px;
margin-left: 24px;
padding: 0px;
}

#menu li {
height: 24px;
width: 166px;
margin: 5px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
text-align: left;
text-indent: 25px;
line-height: 24px;
list-style-type: none;
background-image: url('slices/btn.jpg');
background-repeat: no-repeat;
}
#menu li a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #000000;
}
#menu li a:link {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px 0px;
}
#menu li a:visited {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px 0px;
}
#menu li a:hover {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px -24px;
}
#menu li a:active {
color: #000000;
background-image: url('slices/btn.jpg');
background-position: 0px 0px;
}

#main {
margin: 0px;
padding: 0px;
width: 522px;
float:right;
}

#footer {
margin: 0px;
padding: 0px;
width: 751px;
height: 39px;
float: left;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

alainkun · #2 (**permalink**) 06-13-2007, 10:12 PM

You can specify CSS for diferent navegators, Take a look to this post:
http://www.v7n.com/forums/coding-for...s-problem.html

Costin Trifan · #3 (**permalink**) 06-14-2007, 02:50 AM

Your code:

Quote:

My code:

Quote:

Quote:

UL.SidebarMenuList {
display: block;
list-style-type: none;
padding: 0px 0px 0px 0px; /* T R B L */
margin: 0px 0px 0px 0px; /* T R B L */
}
UL.SidebarMenuList LI.SidebarMenuListItem {
display: block;
list-style-type: none;
padding: 5px 5px 5px 5px; /* T R B L */
margin: 0px 0px 0px 0px; /* T R B L */
font-family: Verdana, Sans-Serif;
font-size: 9pt !important;
}

The margin style attribute will help you manage your Menu position in all browsers.

hth

Jesse Vlasveld · #4 (**permalink**) 06-14-2007, 03:19 AM

Like Costan said. Every browser has different default margin for attributes.

I always start my coding with a margin reset (margin:0) for all attributes. This way I can handle positioning of elements a little easier.

DJ-Craig · #5 (**permalink**) 06-14-2007, 04:05 AM

Quote:

Originally Posted by costin_trifan

Your code:

My code:

The margin style attribute will help you manage your Menu position in all browsers.

hth

I tried this, and its probably something im doing wrong but the website now looks like this:

www.cma-design.co.uk/testnav.html

as you can see theres about 3 overlaying buttons for each link, i can get rid of this by changing the amount of padding, but my main concern is that the #main div and #footer div have been thrown out of the site alignment set by my #wrapper container div.

Your help is highly appreciated.

Costin Trifan · #6 (**permalink**) 06-14-2007, 05:44 AM

Don't take this personally, but you must be joking me....

All you have to do is to take the code I provided above and adjust it for your needs...come on, man... (don't do just copy and paste)

Set the left and right margins for the SidebarMenuListItem to center it into the div container.
If that's not working, then set the margins to the SidebarMenuList to center it.

this is the way I position all my inner containers in the parent containers, so it should work

Cheers.

DJ-Craig · #7 (**permalink**) 06-14-2007, 06:13 AM

Quote:

Originally Posted by costin_trifan

Don't take this personally, but you must be joking me....

All you have to do is to take the code I provided above and adjust it for your needs...come on, man... (don't do just copy and paste)

Set the left and right margins for the SidebarMenuListItem to center it into the div container.
If that's not working, then set the margins to the SidebarMenuList to center it.

this is the way I position all my inner containers in the parent containers, so it should work

Cheers.

ok no need to be spoken to like that, as I said in a previous post im new to css, have been working mainly with HTML and table layouts im just learning.

thanks anyway.

Costin Trifan · #8 (**permalink**) 06-14-2007, 06:20 AM

I never ment to offend you, man!

I'm just surprised...

Cheers!
Costin

DJ-Craig · #9 (**permalink**) 06-14-2007, 06:59 AM

how do you set it to centre it in the div

Costin Trifan · #10 (**permalink**) 06-14-2007, 07:10 AM

setting the "text-align: center" style attribute to the parent div
setting the "margin: 0px 5px 0px 5px; /* T R B L */" to the inner container.

you can increase or decrease the values (5px) as needed.

The second option implyies to set:
the width - should be set to auto for a best result.