wierd i.e. absolute & relative positioning bugs

[singedpiper]

http://gschoppe.grahamhighlanders.com/home.html

the style is at:

http://gschoppe.grahamhighlanders.com/style.css

ok, the template works well in FF, but in IE the side menu is shoved in and down, and the right side of the site has a white margin that shouldn't exist.

any ideas?

[harbingerOTV]

your css:

(the things I changed are in red)


body
{
font-family: Arial, Verdana, Geneva, sans-serif;
color: black;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
background: #999;
text-align:center;
}

#container
{
z-index:2;
font-family: Verdana, Geneva, Arial, sans-serif;
background: url(http://gschoppe.grahamhighlanders.com/graphics/containerbg.gif);
text-align: left;
margin-top: 10px;
margin-left: auto;
margin-right: auto;
position:relative;
width: 700px;
overflow: visible;
visibility: visible;
}

#nav-menu
{
position: relative;
width:700px;
height: 17px;
background: #33a bottom left repeat-x;
color: #fff;
line-height: 17px;
text-align: center;
letter-spacing: 1px;
font-family: arial, verdana, helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
text-decoration: none;
margin: auto;
border-style: solid;
border-width: 0px;
border-bottom-width: 2px;
border-color: #88c;
-moz-box-sizing:border-box;box-sizing:border-box;
}

#nav-menu span
{
text-indent: 40px;
}

#nav-menu ul
{
list-style: none;
padding: 0;
margin: 0;
}

#nav-menu li
{
float: right;
margin: 1px 0em;
padding: 0;
text-align: center
}

#nav-menu li a
{
height: 17px;
line-height: 17px;
width: 80px;
display: block;
color: #fff;
text-align: center;
letter-spacing: 1px;
font-family: arial, verdana, helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
text-decoration: none;
background-color: transparent;

}

#nav-menu li ul
{
visibility: hidden;
}

.navitem a {
letter-spacing: 1px;
font-family: arial, verdana, helvetica, sans-serif;
padding: 0px 3px 0px 1px;
margin-top: 0px;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
background-color: transparent;
}

#nav-menu li a:hover
{
color: #ff8;
}

#side-menu
{
position: absolute;
z-index: 100;
top: 170px;
left: 0px;
color: #fff;
text-align: left;
font-family: arial, verdana, helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
text-decoration: none;
margin: 0px;
padding: 0px;

}

#side-menu ul
{
border-style: solid;
border-width: 0px;
border-top-width: 1px;
border-color: #ccc;
list-style: none;
padding: 0;
margin: 0;
-moz-box-sizing:border-box;box-sizing:border-box;
}

#side-menu li
{
text-align: left;
-moz-box-sizing:border-box;box-sizing:border-box;
}

#side-menu li a
{
height: 20px;
line-height: 17px;
width: 134px;
display: block;
padding: 3px 10px 3px 10px;
color: #555;
letter-spacing: 1px;
font-family: arial, verdana, helvetica, sans-serif;
text-transform: uppercase;
font-weight: bold;
font-size: 11px;
text-decoration: none;
background: #eee;
border-style: solid;
border-width: 0px;
border-right-width: 10px;
border-color: #aae;
border-bottom-width: 1px;
border-bottom-color: #ccc;
-moz-box-sizing:border-box;box-sizing:border-box;
}

#side-menu li a:hover
{
color: #000;
background: #fff bottom left repeat-x;
border-style: solid;
border-width: 0px;
border-right-width: 10px;
border-color: #33a;
border-bottom-width: 1px;
border-bottom-color: #ccc;
-moz-box-sizing:border-box;box-sizing:border-box;
}

#heading
{
position: relative;
z-index:2;
position: relative;
height: 164px;
width: 700px;
border-width: 0px;
border-color: #000000;
overflow: visible;
background: url(http://gschoppe.grahamhighlanders.com/graphics/header2.jpg) bottom

left no-repeat;
}

#contentwrapper
{
z-index:2;
position: relative;
width: 540px;
border-width: 0px;
border-color: #000000;
margin: -50px 00px 30px 160px;
}

#content
{
position: relative;
z-index:2;
font-family: Arial, Verdana, Geneva, sans-serif;
text-align: left;
font-size: 14px;
/*font-weight: bold;*/
border-style: solid;
border-width: 0px;
border-bottom-width: 0px;
border-color: #000000;
position: relative;
width: 350px;
visibility: visible;
float: left;
margin: 0px 0px 30px 0px;
}

#sidebar
{
position: relative;
z-index:2;
font-family: Arial, Verdana, Geneva, sans-serif;
text-align: left;
font-size: 14px;
/*font-weight: bold;*/
border-style: solid;
border-width: 0px;
border-color: #000000;
position: relative;
width: 160px;
visibility: visible;
float: right;
padding: 0px 10px 20px 10px;
}

#footer
{
position: relative;
clear: both;
z-index:2;
font-family: Arial, Verdana, Geneva, sans-serif;
background: url(http://gschoppe.grahamhighlanders.com/graphics/background.gif)

#33a bottom left repeat-x;
text-align: left;
border-style: solid;
border-width: 0px;
border-color: #000000;
position: relative;
width: 700px;
height: 15px;
visibility: visible;
font-size: 12px;
font-weight: bold;
color: #fff;
text-align: right;
padding-right: 10px;
-moz-box-sizing:border-box;box-sizing:border-box;
}

#footer a
{
color: #fff;
text-decoration: none;
}


The first problem:

on all your UL you need to add Margin:0 that will make them sit flush to the left. They naturally have a margin added to them so just turn it off.

the second problem, the page appearing wider and strecthing past the header-nav:

you have a container 700px wide. you have a content-wrapper 550px wide. then You gave the wrapper 160px margin-left. That's 710px. Solution is to make the content-wrapper 10px less wide and then adjust either the sidebar or the content -10px wide. I chose to make the sidebar more narrow.

Basically things just didn't add up. FF/Moz just doesn't allow you to do it. IE forces the content-wrapper to expand. Easy fix.

[edit] The margin-top: 10px to your container is to allow it to sit off the top of the page a little in IE like it does in Moz/FF.

[singedpiper]

why does it sit a bit off the top in ff?

[harbingerOTV]

hmmm...I see you edited your css already. did your container always have:


#container
{
z-index:2;
font-family: Verdana, Geneva, Arial, sans-serif;
background: url(graphics/containerbg.gif);
text-align: left;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
position:relative;
width: 700px;
overflow: visible;
visibility: visible;
}


in it?

if it did maybe I was mistaken or just totally making up the space at the top. It was early and only on cup of coffee #1. :o

[singedpiper]

thanks