SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question IE7 weirdness, etc.

    Page in question is HERE.

    After the page loads in IE7, if I scroll over the navigation menu, the white space beneath the nav menu suddenly expands, pushing the large rotating image down the page.

    Also, when in the "off" position, the "1" and "2" nav buttons on the rotating image are missing the white border that should run along the bottom edge of the square in which the numbers are positioned.

    Unrelated, but on the same page: in Firefox for Windows, the "Contact Us" tab---the background for which turns orange when moused over in all other browsers---remains blue when moused over. Wondering if anybody knows why.

    Lastly: In Google Chrome for Windows, when the large, rotating image slides to the number "2" image, the image is traveling way too far to the left. Another mystery to me, in case anyone has a clue.

    Thanks in advance for any help you might be able to offer.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You have your nav sandwiched in between a couple of empty clearing divs that do not have "haslayout" on them. I suspect that is going to be the problem with IE7. It would probably be best to get rid of them just the same and contain any floats with a different method.

    Your dropdowns are also sticking in IE7, visibility:visible on the li:hover should fix that.
    Code:
    #nav li:hover {
    background-image:url(images/nav-triangle.gif);
    background-position: top right;
    background-repeat: no-repeat;
    visibility:visible;/*fix sticking dropdown in IE7*/
    }

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As far as the "Contact Us" tab, you need to get rid of that X declaration on the background position property and just set the x position on the value. No need to declare the BG image twice either.

    Here is what you have -
    Code:
    #contact {
    width:187px;
    height:22px;
    float:right;
    background-image: url(images/nav-contact-background.gif);
    padding-top:7px;
    }
    
    #contact:hover {
    background-image: url(images/nav-contact-background.gif);
    background-position-x: 189px;
    }
    This is all you need to do -
    Code:
    #contact {
    width:187px;
    height:22px;
    float:right;
    background: url(images/nav-contact-background.gif) no-repeat 0 0;
    padding-top:7px;
    }
    
    #contact:hover {
    background-position: -189px 0 ;
    }

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd also suggest taking an axe to about a third of the markup you have in there... The wrapping div and clearing div? Completely unnecessary. The classes on ALL of the LI? Except maybe two of them; Waste of code.

    I'm not seeing ANYTHING in that markup which warrants much more code than this:

    Code:
    <ul id="mainMenu" class="page_home">
    	<li class="home"><a href="index.php">Home</a></li>
    	<li class="aboutUs">
    		<a href="about.php">About Us</a>
    		<ul>
    			<li><a href="people.php">People</a></li>
    			<li><a href="media.php">Media</a></li>
    		</ul>
    	</li>
    	<li class="products">
    		<a href="products.php">Products</a>
    		<ul>
    			<li><a href="autodetect.php">Auto-Detection Moorings</a></li>
    			<li><a href="eomstretch.php">EOM Stretch-Hoses</a></li>
    			<li><a href="eommooring.php">EOM Mooring Chains</a></li>
    			<li><a href="eomuniversal.php">EOM Universal Joints</a></li>
    			<li><a href="eomlinepacks.php">EOM Linepacks for<br />Acoustic Releases</a></li>
    			<li><a href="launchrecovery.php">Mooring Launch and<br />Recovery Gear</a></li>
    		</ul>
    	</li>
    	<li class="partners">
    		<a href="partners.php">Partners</a>
    		<ul>
    			<li><a href="whoi.php">WHOI</a></li>
    			<li><a href="collectconfidential.php">Cornell University</a></li>
    			<li><a href="mcclane.php">McLane Research Laboratories</a></li>
    		</ul>
    	</li>
    	<li class="services"><a href="services.php">Services</a></li>
    	<li class="projects"><a href="projects.php">Projects</a>
    		<ul>
    			<li><a href="excelerate.php">Excelerate Energy</a></li>
    			<li><a href="mcclane.php">McLane Research Laboratories</a></li>
    		</ul>
    	</li>
    	<li class="employment last"><a href="services.php">Employment</a></li>
    </ul>
    ... and honestly I'd try to find a way to make it work without manually fixing the width on each item (letting you axe those classes too) - though the dropdowns make that problematic.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur: Thanks. I implemented the changes you suggested. It fixed the "Contact Us" rollover behavior in Windows FF, so thank you for that. Unfortunately, the other problems still remain.

    Deathshadow: The classes on the top-level LIs in the nav are necessary in order to specify which nav item should display the orange triangle in the top-right corner, as seen in the "Home" button on the page in question. The page is still a work in progress, so I haven't trimmed everything from it yet, but it's still pretty lean, and as far as I can tell, there's nothing exotic going on that should cause the trouble I'm having.

    Meanwhile ... all of the problems noted in my original inquiry still exist (except for the "Contact Us"-tab issue in Windows FF). Any help anyone can offer would be greatly appreciated. Thanks!

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I don't see the Chrome issue, what version are you using? If the beta vesrion, I wouldn't worry about it. I vaguely recall an issue like this with a slider..though who knows, I might be going crazy

    The border cutting off, moving elements out of containers (even slightly) can result in clipped content in IE, position:relative it
    Code:
    .paging a{position:relative;}
    The hovering of the dropdown cuasing the gallery to move down (issue). I could go through a long winded explanation on how I deduced this, but I'll just give the fix
    Code:
    #content{zoom:1;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Addict
    Join Date
    Jul 2002
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ryan: Thanks very much. I appreciate the help.

    FYI: Just before coming here to read your post, I figured out the problem with IE7 pushing the gallery down: it's a "double padding" problem exclusive to IE7. Here's more info and the easy fix (add "display:inline-block;" to the element that contains the padding).

    Thanks again for the assistance!

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonzal View Post
    Deathshadow: The classes on the top-level LIs in the nav are necessary in order to specify which nav item should display the orange triangle in the top-right corner, as seen in the "Home" button on the page in question. The page is still a work in progress, so I haven't trimmed everything from it yet, but it's still pretty lean, and as far as I can tell, there's nothing exotic going on that should cause the trouble I'm having.
    You don't need them for that - because you can UNSET values on the nested ones! It's always cleaner to unset values in the cascade than waste time putting unnecessary classes in the markup.

    I have no idea if this is going to be compatible with your existing codebase, but I tossed together an example to show what I mean.

    http://www.cutcodedown.com/for_other.../template.html

    As with all my examples the directory:
    http://www.cutcodedown.com/for_others/jonzal

    ... is unlocked so you can grab the ooey-gooeys. Valid XHTML 1.0 Strict. Does away with a dozen or so classes, tested working IE 5.5, 6, 7 & 8, Opera 9.62 and 10.52, Firefox 2 and 3.6, and the latest flavors of safari and chrome. (only bug is in 5.5 due to the use of border the menu buttons come up 5px short on the right - it's still 100% functional)

    Hope this helps - all goes well you should be able to integrate this into your existing code and pitch what you already have.

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,760
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jonzal View Post
    Ryan: Thanks very much. I appreciate the help.

    FYI: Just before coming here to read your post, I figured out the problem with IE7 pushing the gallery down: it's a "double padding" problem exclusive to IE7. Here's more info and the easy fix (add "display:inline-block;" to the element that contains the padding).

    Thanks again for the assistance!
    That page confuses me, it says to go to PIE for a betterexplanation and fix, though it links to the double float margin bug.

    Also, display:inline-block doesn't make it inline-block unles it was inline by default (for IE6/7 anyway)

    I'm confused but I'm glad you figured it out .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •