...

View Full Version : IE (7 mostly) display bug that I can't get rid of



canadianjameson
09-21-2007, 10:04 PM
Hey

if you use IE 7 and go to www.enviromark.ca/head/index.php you'll notice the top link in the right menu is about 16px too far to the left.

now I had help and fixed this for IE 6 using this

<!-->
<link rel="stylesheet" href="/head/css/ie.css" type="text/css">
<![endif]-->

[I]and ie.css is

#navcontainer li .default
{
margin-left:-16px;
}
#navcontainer li .mOver
{
margin-left:-16px;
}
#navcontainer li .mDown
{
margin-left:-16px;
}
#navcontainer li .mOverTwoLine
{
margin-left:-16px;
}
#navcontainer li .mDownTwoLine
{
margin-left:-16px;
}
#navcontainer #about
{
margin-left: 0px
}

Now this no longer seems to work in IE 7, and to be honest I'd rather not use conditional CSS in the first place, but I can't get around it myself. This problem has been around for about a month.

Any ideas would be very much appreciated

the relevant CSS for the right menu is

#navcontainer {
position: absolute;
display:block;
left: 815px;
top: 245px;
text-align:center;
width: 150px;
}

#navcontainer ul
{
display:inline;
padding: 0;
list-style-type: none;
font-size: 14px;
}

#navcontainer li { margin: 0 0 3px 0; }


#navcontainer a:link, #navlist a:visited
{
color: #000000;
text-decoration: none;
}
#donateButton {
position: absolute;
left: 815px;
top: 115px
}
#emailSection {
position: absolute;
left: 815px;
top: 440px;
text-align:center;
width: 150px;
}
#emailSection span {
display: block;
}
#emailSection a {
text-decoration: none;
color: black;
}
#staffPhoto {
position: absolute;
left: 816px;
top: 540px;
width: 150px;


acting on


<a href="http://www.canadahelps.org/CharityProfilePage.aspx?CharityID=d41880" id="donateButton" target="_blank"><img src="/head/images/donate.gif" alt="Donate Now Through CanadaHelps.org!"></a>
<div id="navcontainer" onclick="zxcResetImages('links_BW'); zxcOnceClick('nav_helper')">
<ul id="navlist">
<li><a href="about.php?2" id="aboutRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)">About Us</a></li>
<li><a id="media" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Media / Press</a></li>
<li><a href="getInvolved.php?2" id="getInvolvedRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Get Involved</a></li>
<li><a href="support.php?2" id="supportRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Donations</a></li>
<li><a href="http://headandhands.ca/forum/" id="forums" class="default" target="_blank" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Forums</a></li>
<li><a href="links.php?2" id="linksRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Links</a></li>
</ul>
</div>
<div id="emailSection"></div>
<img src="/head/images/staff/blankPhoto.jpg" name="staffPhoto" id="staffPhoto">

and in case it's needed, here is the main.css file



/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
html {
min-width: 1000px
}
* html #pageContainer {
height:100%;
display:inline;
font-family: "Verdana", tahoma, trebuchet ms, arial;
font-size: 12px;
}
* img {
border: 0
}
* a {
color: #0000A0;
text-decoration: none;
text-align: center;
}
#mainLogo {
position: absolute;
width: 700px;
height: 132px;
left: 50%;
top: 40%;
margin-left: -350px;
margin-top: -66px
}
#english {
position: absolute;
width: 150px;
margin-left: -125px;
left: 45%;
top: 65%;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#french {
position: absolute;
width: 150px;
margin-left: -125px;
left: 63%;
top: 65%;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}
#pointy {
position: absolute;
z-index: 2;
width: 1px;
left: 48.5%;
top: 59%;
}
#resolution {
position: absolute;
width: 493px;
margin-left: -247px;
left: 50%;
top: 90%;
font-size: 12px;
font-family: "Verdana", tahoma, trebuchet ms, arial;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
visibility: hidden
}
#noJS {
position: absolute;
width: 320px;
margin-left: -160px;
left: 50%;
top: 85%;
text-align: center;
font-size: 12px;
font-family: "Verdana", tahoma, trebuchet ms, arial;
border-top: 1px solid black;
border-bottom: 1px solid black;
padding: 2px;
}
#pageContainer {
display: inline;
min-height: 100%;
}
#pageHolder {
display: inline;
}
#pageHolder p {
margin-bottom: 10px
}
.center {
text-align: center;
}
.centerLinks {
text-align: center;
}
.centerLinks a {
color: #006633;
margin-left: 10px;
margin-right: 10px
}
.red {
color: #FF0000
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
.bold {
font-weight: bold
}
#topText {
position: relative;
margin-top: 77px;
margin-left: 75px;
}
#logoC {
margin-left: 175px
}
#bottomText {
margin-left: 75px;
margin-top: 70px
}
#blank_title {
float: left;
position: absolute;
margin-left: 35px;
width: 150px;
}
#linkHolder {
margin-left: 35px;
margin-top: 25px;
width: 150px;
height: 25px;
border: 1px solid black
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 45px;
width: 70px;
margin-bottom: 10px
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#contentarea {
position: relative;
margin-left: 175px;
margin-top: 25px;
width: 600px;
}
#nav_helper {
display: inline;
position: relative;
margin-left: 200px
}
#newsletter {
text-align: center;
display: none;
}


I can't figure it out :/

bazz
09-21-2007, 10:12 PM
have you tried changing your conditional comment to apply only to previous versions of IE, like this:



<!--[if < IE7 ]>
<link rel="stylesheet" href="/head/css/ie.css" type="text/css">
<![endif]-->



That might fix IE6 and show up ie7-specific issues which you can deal with separately.

bazz

canadianjameson
09-21-2007, 11:24 PM
I still cant figure out the origin of the problem though, which does annoy me :/

bazz
09-21-2007, 11:43 PM
I would start by removing the 'donate' image above the menu and see if that makes a difference. It seems not to be in a div.

I'll look again over the weekend when I am awake and have time and see if I can't find it.

My workflow would be along the lines of duplicating the css file and clearing the nav menu controls. then add them one by one to see when the problem re-surfaces.

bazz

effpeetee
09-22-2007, 12:16 AM
Try this.

Frank

#navcontainer ul
{
display:block;
padding: 0;
list-style-type: none;
font-size: 14px;
}

canadianjameson
09-22-2007, 05:32 PM
Thank you so much!!! It works!

Thanks for agreeing to look it over Bazz -- I may call on you (if you dont mind) to just help me clean up my CSS once the project is completed. Right now it's kinda all over the place :/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum