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 6 of 6
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    IE (7 mostly) display bug that I can't get rid of

    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
    Code:
    	<!--[if IE ]>
    	<link rel="stylesheet" href="/head/css/ie.css" type="text/css">
    	<![endif]-->
    
    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
    Code:
    #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

    Code:
    <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

    Code:
    /* 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 :/
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    have you tried changing your conditional comment to apply only to previous versions of IE, like this:

    Code:
    <!--[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

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I still cant figure out the origin of the problem though, which does annoy me :/
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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

  • Users who have thanked bazz for this post:

    canadianjameson (09-22-2007)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try this.

    Frank

    #navcontainer ul
    {
    display:block;
    padding: 0;
    list-style-type: none;
    font-size: 14px;
    }
    Last edited by effpeetee; 09-22-2007 at 01:24 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    canadianjameson (09-22-2007)

  • #6
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    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 :/
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)


  •  

    Posting Permissions

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