SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Vertical page shift in IE6!!

    Hello, peeps

    When my page initially loads, and I rollover a menu link, the page in IE shifts down. I've tried
    Code:
    html{padding:0px; min-height:100%;margin-bottom: 1px;}
    But this does not work. This only happens when I rollover a menu link or, reload the page. I've found that the above fix usually solves the problem but it hasn't.
    Can anyone help?

    Here's the html: The nav-menu section is in green.

    Code:
    <body>
    <div id="wrapper" class="wrapper">
      <div id="top_links" class="top_links"><a href="#">EveryWare MMD</a> : <a href="#">Online Consultation</a></div>
      <div id="head_logo"></div>
      <script type="text/javascript">
    	   var so = new SWFObject("../flash/top_panel.swf", "top_panel", "640", "75", "7", "#ABB5BF");
    	   so.write("head_logo");
    	</script>
      <div id="head_pic"></div>
      <div id="main_content">
        <div id="main_center" class="column">
          <div id="menu">
            <ul id="nav">
              <li class="tl"><a href="index.php">Home</a></li>
              <li class="tl"><a href="../what_we_do/">What We Do</a>
                <ul id="dd1" class="m_bg">
                  <li class="ddi"><a href="../what_we_do/software_design.php">Software Design</a></li>
                  <li class="ddi"><a href="../what_we_do/outsourcing.php">Outsourcing</a></li>
                </ul>
              </li>
              <li class="tl"><a href="../our_projects/">Our Projects</a>
                <ul id="dd2">
                  <li class="ddi"><a href="../our_projects/deliver_project.php">Delivered Projects</a></li>
                  <li class="ddi"><a href="../our_projects/clients.php">Clients</a></li>
                  <li class="ddi"><a href="../our_projects/testimonials.php">Testimonials</a></li>
                </ul>
              </li>
              <li class="tl"><a href="../everyware_sd/">EveryWare SD</a>
                <ul id="dd3">
                  <li class="ddi"><a href="../everyware_sd/fast_facts.php">Fast Facts</a></li>
                  <li class="ddi"><a href="../everyware_sd/the_team.php">The Team</a></li>
                  <li class="ddi"><a href="../everyware_sd/offices.php">Offices</a></li>
                  <li class="ddi"><a href="../everyware_sd/careers.php">Careers</a></li>
                </ul>
              </li>
              <li class="tl"><a href="../contact_us/">Contact Us</a>
                <ul id="dd4">
                  <li class="ddi"><a href="../contact_us/get_an_estimate">Get An Estimate</a></li>
                  <li class="ddi"><a href="../contact_us/contact_us">Contact Us</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <div id="bread_crumb">
            <ul class="bc">
              <li></li>
            </ul>
          </div>
          <div id="top_main"> </div>
          <div id="left_main">
            <ul id="left_content_ul">
              <li>
                <div class="left_content">
                  <div class="left_headline_container">
                    <h5 class="left_paragraph_headline">Home</h5>
                  </div>
                  <div class="left_paragraph_container">Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</div>
                </div>
              </li>
              <li>
                <div class="left_content">
                  <div class="left_image_container" > <img src="/images/thumb.jpg" alt="img" width="80" height="80" /> </div>
                  <div class="left_paragraph_info_container" >
                    <div class="left_headline_container">
                      <h5 class="left_paragraph_headline">Everyware</h5>
                    </div>
                    <div class="left_paragraph_container"> Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, <a href="#">more...</a> </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="left_content">
                  <div class="left_image_container" > <img src="/images/thumb.jpg" alt="img" width="80" height="80" /> </div>
                  <div class="left_paragraph_info_container" >
                    <div class="left_headline_container">
                      <h5 class="left_paragraph_headline">Everyware</h5>
                    </div>
                    <div class="left_paragraph_container"> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, <a href="#">more...</a> </div>
                  </div>
                </div>
              </li>
              <li>
                <div class="left_content">
                  <div class="left_image_container" > <img src="/images/thumb.jpg" alt="img" width="80" height="80" /> </div>
                  <div class="left_paragraph_info_container" >
                    <div class="left_headline_container">
                      <h5 class="left_paragraph_headline">Everyware</h5>
                    </div>
                    <div class="left_paragraph_container"> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, <a href="#">more...</a> </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- right Column Begins -->
          <div id="right_main" class="column">
            <ul>
              <li>
                <div id="right_fisrt_paragraph" class="right_content">
                  <h5 class="left_paragraph_headline">EveryWare</h5>
                  <div class="right_column_text"> Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy sed diam nonummy consectetuer adipiscing elit, sed diam nonummy nibh euismod <a href="#">more...</a> </div>
                </div>
              </li>
              <li>
                <div id="right_second_paragraph" class="right_content">
                  <h5 class="left_paragraph_headline">Our Next Project...</h5>
                  <div class="right_column_text">
                    <p><img src="/images/thumb.jpg" /></p>
                    <a href="#">more...</a> </div>
                </div>
              </li>
              <li>
                <div id="right_second_paragraph" class="right_content">
                  <h5 id="" class="left_paragraph_headline">EveryWare</h5>
                  <div class="right_column_text">
                    <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy sed diam nonummy consectetuer adipiscing elit, sed diam nonummy nibh euismod <a href="#">more...</a></p>
                  </div>
                </div>
              </li>
              <li>
                <div id="right_second_paragraph" class="right_content">
                  <h5 id="" class="left_paragraph_headline">EveryWare</h5>
                  <div class="right_column_text">
                    <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy sed diam nonummy consectetuer adipiscing elit, sed diam nonummy nibh euismod <a href="#">more...</a></p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div id="lc" class="column"></div>
        <div id="rc" class="column"></div>
      </div>
      <div id="footer-wrapper">
        <div id="footer"> &copy;ND BD JD Enterprises Ltd. All rights reserved. </div>
      </div>
    </div>
    </body>
    Here's the css: The nav-menu section is in Green

    Code:
    /* CSS Document*/
    
    html{padding:0px; min-height:100%;margin-bottom: 1px;}
    
    
    body
    {
    	padding:0px;
    	/*background-color:#FFFFFF;*/
    	background-color:#ABB5bf;
    	margin:0 0 5% 0%;
    	z-index:-1;
    }	
    
    .wrapper
    {
    	margin:0 auto;position:relative;width:640px;
    }
    
    a
    {
    	color:#afb3b6;
    	text-decoration:none;
    }
    
    a:hover
    {
    	text-decoration:none;
    	color:#fff;
    }
    
    a:visited
    {
    	color:#666;
    }
    
    head+body .column:before
    {
    	content: ".";
    	display:block;
    	background:inherit;
    	margin-bottom:-32767px;
    	padding-top:32767px;
    }
    /*-------Top Links-------*/
    .top_links
    {
    	text-align:right;
    	margin:0 0 0 0;
    
    }
    
    .top_links a:hover
    {
    	text-decoration:underline;
    }
    
    .top_links a
    {
    	color:#000;
    	font:0.8em Arial, Helvetica, sans-serif;
    }
    
    .top_links a:visited
    {
    	color:#000;
    }
    
    .column{padding:0 0 0 0;margin:0 0 0 0;}
    
    /*@media all and (min-width: 0px) {
    .column:after{
    content: '.';
    display:block;
    background:inherit;
    height:0;
    padding-bottom:32767px;
    margin-bottom:-32767px;
    }*/
    
    
    #head_logo
    {
    	position:relative;
    	background-repeat:no-repeat;
    	height:75px;
    	width:640px;
    	border-bottom:1px solid #444;
    }
    
    #head_pic
    {
    	background-repeat:no-repeat;
    	background-image:url(../images/header_img.jpg);
    	height:150px;
    	width:640px;
    	color:#FFF;
    	border-bottom: 1px solid #444;
    	z-index:3;
    }
    
    #main_content
    {
    	overflow:hidden;
    	font-family:Arial, Helvetica, sans-serif;
    	z-index:-1;
    }
    
    #main_content .column
    {
    	float: left;
    	position: relative;
    
    }
    
    * html #main_content .column
    {		
    	padding-bottom: 32767px;  /* X + padding-bottom */
    	margin-bottom: -32767px;
    }
    
    #main_center
    {
    	background-image:url(../images/sd_content.jpg);
    	background-repeat:no-repeat;
    	background-color:#000000;
    	width: 539px;
    	color: #6f7880;
    	margin: 0px 0px 0px 50px;
    	padding:0;
    	z-index:0;
    	border-left:1px solid #444;
    	border-right:1px solid #444;
    	
    }
    
    * html #main_center
    {
    	margin:0px 0px 0px 25px;
    	width:539px;
    }
    
    #menu
    {
    	z-index:3;
    	position:relative;
    	padding:0;
    	margin:0px 0 0px 10px;
    	width:640pxs;
    }
    
    #nav
    {
    	font-size:0.8em;
    	padding:0;
    	margin:0;
    	z-index:3;
    	width:100%;
    
    }
    
    #nav li.tl
    {
    	float:left;
    	list-style-type:none;
    	padding:0 15px 0 20px;
    	margin:0 0 0 0;
    	z-index:3;
    }
    
    #nav li a
    {	
    	color:#afb3b6;
    	text-decoration:none;
    }
    
    #nav li a:hover
    {
    	color:#FFF;
    }
    
    #nav li ul
    {
    	display:none;
    	list-style-type:none;
    	margin:0;
    	padding:0;
    	position:absolute;
    	border:1px solid #444;
    	background-image:url(../images/000.gif);
    }
    
    #nav li ul li a
    {
    	display:block;	
    	width:130px;
    	height:12px;
    	padding:5px;
    	margin:0;
    }
    
    #nav li ul a:hover
    {
    	color:#FFFFFF;
    	background-image:url(../images/333.gif);
    	z-index:3;
    }
    
    * html #nav li #dd1
    {
    	margin-left:-78px;
    	top:16px;
    	z-index:3;
    }
    
    * html #nav li #dd2
    {
    	margin-left:-77px;
    	top:16px;
    	z-index:3;
    }
    
    * html #nav li #dd3
    {
    	margin-left:-90px;
    	top:16px;
    	z-index:3;
    }
    
    * html #nav li #dd4
    {
    	margin-left:-70px;
    	top:16px;
    	z-index:3;
    }
    
    
    #nav li:hover ul, #nav li.over ul
    {
    	display:block;
    	z-index:3;
    }
    
    /* Bread Crumb */
    
    #bread_crumb
    {
    	width:500px;
    	float:inherit;
    	z-index:-1;
    	margin:40px 0 0px 10px;
    	padding:0; /*this changes the entire ie page*/
    		
    	font:.7em Arial, Helvetica, sans-serif;	
    	color:#afb3b6;
    	font-weight:bold;
    }
    
    #bread_crumb a 
    {
    	color:#afb3b6;
    	text-decoration:none;
    	font-weight:normal;
    }
    
    .bc
    {
    	margin:0;
    	padding:0;
    }
    
    .bc li
    {
    	display:inline;	
    	list-style-type:none;
    }
    
    .bc a
    {
    }
    
    /*----------Top Main------------
    
    #top_main
    {
    	position:relative;
    	background-image:url(../images/000.gif);
    	margin-top:50px;
    	width:100%;
    	margin-left:0;
    	border-top:1px solid #333;
    	border-bottom:1px solid #333;
    	display:none;
    }
    
    .top_content
    {
    	padding:5px;
    }
    
    #top_main img
    {
    	border:1px solid #666666;
    }*/
    
    /*----------Left Main------------*/
    #left_main
    {
    	padding:0 0 0 10px; 
    	margin:30px 0px 0px 0px;
    	width:300px; /* This should be 50% in two-column*/
    	float:left;
    	background-color:transparent;
    	z-index:-1;
    }
    
    .left_content
    {
    	background-image:url(../images/000.gif);
    	border:1px solid #333;
    	padding:10px 0 10px 5px;
    	margin:0 0 0 0;
    	float:left;
    }
    
    .left_image_container
    {
    	float:left;
    	width:87px;
    	margin:0;
    	padding:0;
    }
    
    .left_paragraph_info_container
    {
    	display:block;
    	float:left;
    	width:201px;
    	padding:0 5px 0 0;
    }
    
    .left_headline_container
    {
    	margin-bottom:0;
    	float:left;
    	width:100%;	
    }
    
    .left_paragraph_container
    {
    	font-size:.7em;
    	margin:0 0 0 0;
    	padding:0;
    }
    
    .left_paragraph_headline
    {
    	margin:0;
    	padding:0;
    	color:#afb3b6;
    
    }
    
    #left_main img
    {
    	border:1px solid #999;
    }
    
    #left_main table
    {
    	padding:0px;
    	margin:0px;
    }
    
    #left_content_ul
    {
    	list-style-type:none;
    	padding:0px 0 0px 0; 
    	margin:0px;
    	float:left;
    	position:relative;
    }
    
    #left_content_ul li
    {
    	padding:0px 0px 40px 0px;
    	margin:0;
    	float:left;
    }
    
    /*----------Right Main------------*/
    #right_main
    {
    	padding:0px 10px 0 0px;
    	margin:0px 0 0 10px;
    	width:200px;
    	z-index:0;
    	border-left:1px solid #333;
    }
    
    .right_paragraph_headline
    {
    	margin:0;
    	padding:0;
    }
    .right_content
    {
    	background-color:transparent;
    	padding:0;
    	margin:0;
    }
    
    .right_column_text
    {
    	font:0.7em Geneva, Arial, Helvetica, sans-serif;
    	padding:0px;
    }
    
    #right_main ul
    {
    	list-style-type:none;
    	padding:0px 0 0 10px; 
    	margin:0;
    }
    
    #right_main li
    {
    	padding:10px 0 10px 0;
    	margin:0;
    	border-bottom:1px solid #333;
    }
    
    /*----------Left Column------------*/
    #lc
    {
    	width:51px;
    	margin: 0px 0px 0px -592px;
    	background-color: #000;
    	position:relative;
    }
    
    #rc
    {
    	width:49px;
    	margin: 0px 0px 0px 0px;
    	background-color: #000;
    	z-index:-1;
    	border-left:0px solid #444;
    }
    
    * html #lc
    {
    	width:50px;
    	margin: 0px 0px 0px -591px;
    	background-color: #000;
    	position:relative;
    	border-right:1px solid #444;
    }
    
    * html #rc
    {
    	width:49px;
    	margin: 0px 0px 0px 0px;
    	background-color: #000;
    	z-index:-1;
    }
    /*----------For Elements-----------*/
    .frmTxtbox
    {
    	background-color:#fff;
    	border:1px solid #000;
    }
    .frmParagraph
    {
    	font-size:.7em;
    }
    
    .btnSubmit
    {
    	background-color:#fff;
    	border:1px solid #000;
    }
    
    /*-------------Footer-------------------*/
    #footer
    {
    	background-image:url(../images/slices/footer.gif);
    	background-repeat:no-repeat;
    	clear: both;
    	height:50px;
    	position:relative;
    	width:640px;
    	color:#666;
    	font-size:0.7em;
    	font:Arial, Helvetica, sans-serif;
    	text-align:center;
    	border-top:1px solid #444;
    }
    
    * html #footer-wrapper 
    {
      float: left;
      position: relative;
      width: 640px;
      padding-bottom: 10010px;
      margin-bottom: -10000px;
      background: #ABB5bf;         /* Same as body background */
      z-index:0;
    }
    Thanx, alot.

  2. #2
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance of a link to the page??
    fisherboy
    Web Site Design

  3. #3
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't uploaded it to a server as yet, I'm still testing it locally...

  4. #4
    Carpe Diem = Fish of the Day fisherboy's Avatar
    Join Date
    Dec 2005
    Location
    New Zealand
    Posts
    488
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK. No worries.
    fisherboy
    Web Site Design

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to be honest with you here... you've got SO many browser specific hacks and strange CSS tricks in there I don't think I could find the problem without starting over from scratch.

    It REALLY looks to me like you overthought your CSS on the layout. A good indicator of that is the moment you start assigning CSS to html for margin and padding - you're overthinking or worse, patching a symptom and not the cause... ESPECIALLY when you have all your content inside a container DIV.

    This ALONE:
    head+body .column:before
    {
    content: ".";
    display:block;
    background:inherit;
    margin-bottom:-32767px;
    padding-top:32767px;
    }
    Is a pretty big bell given your rather simple FIXED layout that somethings not kosher in there.

    I'll take a stab at it though - I'm sitting around waiting on the information to finish off a contract, TECHNICALLY I'm supposed to be retired - but frankly, I cannot just sit here and do nothing... Gotta keep those skills up.

    Gimme a while on this one.

  6. #6
    SitePoint Zealot
    Join Date
    Mar 2005
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I fixed it... I simply re-did my nav system... simple eh?


Bookmarks

Posting Permissions

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