SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    left-hand navigation in wrong location IE7

    Hi all,
    My problem is that the left hand navigation menu first appears outside, on the left, of the main section of the page in IE7. (Please see code below.) When the page is refreshed, the nav goes right to where its supposed to be. It seems to works well in other browsers, just IE7 is giving me fits.
    thoughts please?
    many thanks


    Code:
    <!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>44 3-column</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    	body {
    		font-family: Arial, Helvetica, sans-serif;
    		font-size: .95em;
    		width: 955px;
    		margin: 0 auto;
    		padding: 0 auto;
    	}
    	#wrapper {
    		border: 1px solid #000;
    		background-color: #fff;
    		width: 944px;
    		line-height: 130%;
    	}
    	#header {
    		height: 100px;
    		background-color: #fff;
    		padding: 0px;
    		margin-bottom: 0px;
    		border-bottom: 2px solid #c80024;
    	}
    	h1#page-title-info {
    		background-color: #fff;
    		padding-top: 6px;
    		margin-top: 6px;
    		margin-left: 0px;
    		padding-left: 0px;
    	}	
    	h1#page-title-info_3col {
    		background-color: transparent;
    		padding-top: 6px;
    		margin-top: 6px;
    		margin-left: 0px;
    		padding-left: 0px;
    	}
    
        /* LEFT HAND NAVIGATION */
    	#left-nav {
    		position: relative; 
    		width: 220px; 
    		z-index: 100;
    		font-size: 1.20em;
    		float: left;
    	}		
    	#right {
    		float: right;
    		width: 180px;
    		margin: 0;
    		*margin-top: 31px;
    		padding: 0 12px 12px 12px;
    		*padding-top: 31px;
    	}
    	#content-wrapper {
    		padding: 1px;
    	}
    	#content {
    		margin-left: 250px;
    		*margin-left: 228px;
    		margin-right: 10px;
    		*padding: 12px;
    	}
    	
    /* FOOTER NAVIGATION AND INFO */
    	#partner-logos {
    		height: 30px;
    		padding-top: -60px;
    		margin-top: -60px;
    		padding-bottom: 4px;
    		margin-bottom: 4px;
    		float: left;
    	}
    	#logo-partner {
    		padding: 0px;
    		margin: 0px;
    	}
    	#partner-logos p {
    		font-size: .75em;
    		font-weight: bold;
    		line-height: .85em;
    		padding: 0 0 0 5px;
    		margin: 0 0 0 5px;
    	}
    	#footer {
    		clear: both;
    		font-size: .77em;
    		text-align: center;
    		padding: 0;
    		border-top: 2px solid #c50025;
    		border-bottom: 2px solid #000;
    		background-color: #fff;		
    		}
    	#footer-nav li {
    		display: inline;
    		list-style: none;
    		padding: 0 15px;
    		margin: 0 15px;
    	}
    	#footer p{
    		font-size: .75em;
    		padding: 0px;
    		margin: 0px;
    		text-align: center;
    	}
    	#footer-nav a {
    		text-decoration: none;
    		color: #000;
    	}	
    	#footer-nav a:hover {
    		text-decoration: none;
    		border-bottom: 2px solid #c50025;
    	}
    	
    	/* MISC FORMATTING */
    	#content p {
    		margin: 0 0 0 6px; 
    	}
    	h1 {
    		padding: 0 20px;
    	}
    	#content h2 {
    		margin: 0 0 .5em 0;
    	}
    	.logo-link {
    		padding: 0;
    		margin: 0;
    	}
    	.login {
    		float: right;
    		position: relative;
    		margin-top: -86px;
    		padding-top: -86px;
    	}
    	
    	/* LINKS */	
    	#menu {
    		height: 160px; 
    		margin: 0 auto; 
    		position: relative;
    		margin: 0px 0 0 15px;
    	}
    	#menu ul {
    		margin: 0; 
    		padding: 0; 
    		list-style: none; 
    		white-space: nowrap; 
    		text-align: left; 
    		background-color: #eee; 
    		padding: 1px 1px 0 1px; 
    		border: 2px solid #ccc;
    		border-width: 2px 2px 0 1px;
    	}
    	#menu li {
    		margin: 0; 
    		padding: 0; 
    		list-style: none;
    	}
    	#menu li {
    		display: inline-block; 
    		display: inline;
    	}
    	#menu ul {
    		position: absolute; 
    		left:-9999px;
    	}
    	#menu ul.first-level {
    		position:absolute; 
    		left: -7px; 
    		top: 5px;
    		width: 208px;
    	}
    	#menu a {
    		display: block; 
    		font: normal .95em verdana,arial,sans-serif; 
    		color: #000; 
    		line-height: 22px; 
    		text-decoration: none;
    		padding: 0 20px 0 10px; 
    		border-bottom: 2px solid #ccc;
    	} 
    	#menu ul li:hover > ul {
    		visibility: visible; 
    		left: 100%; 
    		margin-top: -24px; 
    		margin-left: -1px;
    	}
    	#menu a:hover ul,#menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul {
    		left: 100%; 
    		visibility: visible;
    	}
    	#menu a:hover ul ul, #menu a:hover a:hover ul ul {
    		left: 34px;
    	}
    	* html .menu a:hover {
    		color: #fff; 
    		background: #c50025;
    	}
    	.menu :hover > a {
    		color: #fff; 
    		background: #c50025;
    	}
    	#menu li a:hover {
    		background: #c50025; 
    		color: #fff;
    	} 
    	#menu li:hover > a {
    		background: #c50025;
    	}
    	/*#menu li a.flyout {
    		
    	}*/
    	#menu li a.flyout:hover {
    		background: #c50025;
    		color: #fff;
    	} 
    	#menu li:hover > a.flyout {
    		background: #c50025;
    		color: #fff;
    	}
    	#menu table {
    		position: absolute; 
    		left: 99%; 
    		height: 0; 
    		width: 0; 
    		border-collapse: collapse; 
    		margin-top: -7px; 
    		margin-left: -1px;
    	}
    	.image-link a:{
    		text-decoration: none;
    	}
    	a: active {
    		outline: none;
    	}
    	#logo-partner a {
    		outline: none;
    	}
    </style>
    
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <a href="#" title="title-1"></a>
                <a href="#"></a></div>
            <div id="content-wrapper">
              <div id="left-nav">
                <div id="menu">
                    <ul class="first-level">
                        <li><a href="#">Home</a></li>
                        <li><a class="flyout" href="#">list one</a>
                            <ul>
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                            </ul>
                        </li>
                        <li><a class="flyout" href="#">list two</a>
                            <ul>
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                            </ul>
                        </li>
                            <li><a class="flyout" href="#">list three</a>
                            <ul>
                                <li><a href="#">item 1</a></li>
                                <li><a href="#">item 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">list four</a></li>
                        <li><a href="#">list five</a></li>
                    </ul>
                </div>
            </div>
            <div id="right">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit ante. </p>
                <p>Etiam mi est, rhoncus vitae bibendum eget, viverra in massa. In tellus mauris, consectetur tempus fringilla at, consectetur fermentum lorem. </p>
                <p>Vivamus rutrum mauris sem, et feugiat dui. Vivamus in augue orci, et lacinia ligula.</p>
            </div>            
            <div id="content">
                <h1 id="page-title-info_3col">page title info</h1>
                <p>Lorem ipsum dolor sit amet, consectetur . Sed porttitor leo a est eleifend facilisis. . Sed leo lorem, placerat a commodo eu, posuere a ipsum. Donec dictum nulla in metus pulvinar ut luctus eros sagittis. </p>
            </div>
            <p>&nbsp;</p>
          </div>
            <div id="footer">
              <div id="partner-logos"><a href="#"></a></div>
               <ul id="footer-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">footer 01</a></li>
              </ul>
              <p>footer text</p>
            </div> 
        </div>
    </body>
    </html>

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I don't see why you think it should be on the right in the first place. It's floated left and comes first in your source code so it's going to the left. Refreshing does nothing for me. If you want it on the right, then float it right. Also why are you using hacks here for IE?
    Code:
    #right {
    		float: right;
    		width: 180px;
    		margin: 0;
    		*margin-top: 31px;
    		padding: 0 12px 12px 12px;
    		*padding-top: 31px;
    	}
    Now it looks different in IE7 then FF with that :/. Any reason?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  3. #3
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    thanks for getting back to me
    Geez, very stupid and careless me. I meant the left side. Thoughts?

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    I don't see it wrong in the first place. Perhaps someone that can see this can help. I checked browsershots and they show it on the left side too..perhaps it's just your machine?

    Perhaps try removing position:relative; on #left and see if that is the cause. Sometimes that can cause misplaced elements in IE. Just a guess though.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  5. #5
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    my clients are seeing the problem, so not the machines. Good thought though.
    I tried what you suggested, removing the position:relative. The placement of the nav bar changed, but not for the better. Please see the attachment for what it looks like for me.
    thank you
    Attached Images Attached Images

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    ..I tho;ught you said the problem was that the navbar was appearing on the right....it's on the left in the SS..

    Can you SS both the wrong one, and the correct placement? Seems like a miscommunication here.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I misspoke when I said I wanted it on the right (sorry for that) -- it's on the left-hand side I'd like it to be.
    Please see the screenshot of the two. The placement, on the left, is what I'd like.
    thank you
    Attached Images Attached Images

  8. #8
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any other thoughts?
    I really need help with an answer to this question.
    thank you

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Try on #content-wrapper giving zoom:1; and position:relative;.

    Most of the time the problem of misplacced elements is just invoking haslayout on the appropriate elements. Normally elements in IE (especially 6, though sometimes 7) get elements misplaced if the parent of a positioned child doesn't have haslayout or a position. Normally this is a fix but just shout if it isn't . I can't get it working for me anyway (I mean producing the test case).

    Though I'm rendering IE7 via IEtabs in firefox, so that is probably the issue .

    If #content-wrapper code doesn't fix it, then try setting haslayout on every element and if that fixes it, try and put it on an element (one at a time) until you find the element that needs it. Here is the code to put haslayout on everything.
    Code:
    *{zoom:1;}
    Thoguh don't keep haslayout on every element as that causes more issues then it fixes (especially with inline elements)

    That should get you going .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi,
    thanks for the reply,
    trying both the adjustments, neither helped.
    Upon more experimentation, resizing the window (which I hadn't tried) also caused the problem.
    Actually, as the window is expanded or contracted, the menu location is relative to the left edge of the window until the page is refreshed -- again only in IE7 or earlier. After the page is refreshed, the menu goes to the proper location.
    I've been looking at the hasLayout problem and trying various fixes with no success.
    More things to try, please.
    thank you

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    (Hopes someone else cna see this so this thread ca nbe finished)

    Try setting *{min-height:0;} to set haslayout to everything in IE7. Does it still exist then? Have you set all the parents of the sidebar to position:relative;? I don't know what to tell you-all these are guesses. My IE7 still won't reproduce this :/
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by marioo View Post
    ...
    Actually, as the window is expanded or contracted, the menu location is relative to the left edge of the window until the page is refreshed -- again only in IE7 or earlier. After the page is refreshed, the menu goes to the proper location.
    ...
    Auto centering on body can be confusing for IE<8. As here when position is used, elements with position becomes horizontally fixed in viewport. That is because the elements original/refreshed position will refer to the viewport html if the auto centered body does not have position itself.

    The best solution here is to move the auto centering from the body to the #wrapper. (Or if the body element must be centered, the body needs position to contain the position holding parent #left-nav.)
    Code:
    body {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: .95em;
    /*	width: 955px; */
    /*	margin: 0 auto; */
    	margin: 0;
    	padding: 0;
    }
    #wrapper {
    	border: 1px solid #000;
    	background-color: #fff;
    	width: 944px;
    	margin: 0 auto; /* moved here from body */
    	line-height: 130&#37;;
    }
    Happy ADD/ADHD with Asperger's

  13. #13
    SitePoint Addict
    Join Date
    May 2005
    Posts
    248
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    wonderful!
    that worked perfectly.
    thank you for the info and explanation.

  14. #14
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is an old bug. Here is two links that are mentioning this fault at resizing in different cases:

    Internet Explorer Developer Center

    Friendly Bit
    Happy ADD/ADHD with Asperger's


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
  •