Another CSS IE positioning question

Posted on 2011-10-08
Last Modified: 2012-06-21
I am working on a wordpress site that is giving me fits when I try to position links over an image. FF works fine, but IE does not display the links at all. I have tried zoom, z-index, and a variety of other tweaks but am at a loss.

The link to the page I have been working on is:

The site is registered users only so the user name: test, password: test123

The original site url which works in IE is: as an example. Zoom was the fix for this site.

Question by:PatSchraier
    LVL 9

    Expert Comment

    I don't know why but some of the source is commented in fire fox
    <div id="header">
    		<div id="masthead">
    			<div id="branding" role="banner">
    								<div id="site-title">
    						<a href="" title="Color Wisdom Cards" rel="home">Color Wisdom Cards</a>
    				<div id="site-description"></div>
    								<div style="clear: both;"></div>
    			</div><!-- #branding -->
    			<!-- div id="access" role="navigation">
    			  				<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
    				<div class="menu"><ul><li ><a href="" title="Home">Home</a></li><li class="page_item page-item-1531"><a href="" title="About this Project">About this Project</a><ul class='children'><li class="page_item page-item-32"><a href="" title="Behind The Fables">Behind The Fables</a><ul class='children'><li class="page_item page-item-1383"><a href="" title="Behind the Fables 2">Behind the Fables 2</a></li></ul></li><li class="page_item page-item-46"><a href="" title="Card Meditation">Card Meditation</a><ul class='children'><li class="page_item page-item-1563"><a href="" title="Card Meditation 2">Card Meditation 2</a></li></ul></li><li class="page_item page-item-15"><a href="" title="Fable Group &#8211; Page 1">Fable Group &#8211; Page 1</a><ul class='children'><li class="page_item page-item-26"><a href="" title="Fable Groups &#8211; Page 2">Fable Groups &#8211; Page 2</a></li></ul></li><li class="page_item page-item-49"><a href="" title="Glossary">Glossary</a><ul class='children'><li class="page_item page-item-1581"><a href="" title="Glossary Page 2">Glossary Page 2</a></li><li class="page_item page-item-1584"><a href="" title="Glossary Page 3">Glossary Page 3</a></li><li class="page_item page-item-1587"><a href="" title="Glossary Page 4">Glossary Page 4</a></li></ul></li><li class="page_item page-item-41"><a href="" title="Manifesting Desires">Manifesting Desires</a><ul class='children'><li class="page_item page-item-1550"><a href="" title="Manifesting Your Desires 2">Manifesting Your Desires 2</a></li><li class="page_item page-item-1554"><a href="" title="Manifesting Your Desires 3">Manifesting Your Desires 3</a></li></ul></li><li class="page_item page-item-37"><a href="" title="The Cards And You">The Cards And You</a><ul class='children'><li class="page_item page-item-1544"><a href="" title="The Cards and You 2">The Cards and You 2</a></li></ul></li></ul></li><li class="page_item page-item-1600"><a href="" title="blog">blog</a></li><li class="page_item page-item-108 current_page_ancestor"><a href="" title="Colors">Colors</a><ul class='children'><li class="page_item page-item-82"><a href="" title="Blue">Blue</a><ul class='children'><li class="page_item page-item-134"><a href="" title="Aqua People">Aqua People</a></li><li class="page_item page-item-148"><a href="" title="Blue November">Blue November</a></li><li class="page_item page-item-180"><a href="" title="Brad Blueberry">Brad Blueberry</a></li><li class="page_item page-item-221"><a href="" title="Electric Blue Moon">Electric Blue Moon</a></li><li class="page_item page-item-254"><a href="" title="Navy Trail">Navy Trail</a></li><li class="page_item page-item-315"><a href="" title="Sky Blue">Sky Blue</a></li></ul></li><li class="page_item page-item-72"><a href="" title="Green">Green</a><ul class='children'><li class="page_item page-item-193"><a href="" title="Charmaine Chartreuse">Charmaine Chartreuse</a></li><li class="page_item page-item-238"><a href="" title="Grass">Grass</a></li><li class="page_item page-item-245"><a href="" title="Kelly the Green Dragon">Kelly the Green Dragon</a></li><li class="page_item page-item-253"><a href="" title="Penelope Pickle">Penelope Pickle</a></li><li class="page_item page-item-260"><a href="" title="Pistachio">Pistachio</a></li><li class="page_item page-item-289"><a href="" title="Sage">Sage</a></li><li class="page_item page-item-322"><a href="" title="The Emerald Stone">The Emerald Stone</a></li><li class="page_item page-item-321"><a href="" title="The Green Acorn">The Green Acorn</a></li><li class="page_item page-item-328"><a href="" title="The Loden Lesson">The Loden Lesson</a></li></ul></li><li class="page_item page-item-86"><a href="" title="Neutrals">Neutrals</a><ul class='children'><li class="page_item page-item-161"><a href="" title="Beige Bahana">Beige Bahana</a></li><li class="page_item page-item-177"><a href="" title="Black and White">Black and White</a></li><li class="page_item page-item-242"><a href="" title="Ivory Tower">Ivory Tower</a></li><li class="page_item page-item-304"><a href="" title="Shadow Grey Storm">Shadow Grey Storm</a></li><li class="page_item page-item-303"><a href="" title="She Shaman">She Shaman</a></li><li class="page_item page-item-308"><a href="" title="Silver Cloud">Silver Cloud</a></li><li class="page_item page-item-334"><a href="" title="Wolf of While Light">Wolf of While Light</a></li></ul></li><li class="page_item page-item-58"><a href="" title="Orange">Orange</a><ul class='children'><li class="page_item page-item-190"><a href="" title="Carrot Colored Cloak">Carrot Colored Cloak</a></li><li class="page_item page-item-214"><a href="" title="Dancin Daisy">Dancin Daisy</a></li><li class="page_item page-item-228"><a href="" title="Final Sunset">Final Sunset</a></li><li class="page_item page-item-236"><a href="" title="Honey Adams">Honey Adams</a></li><li class="page_item page-item-268"><a href="" title="Princess of Amber">Princess of Amber</a></li><li class="page_item page-item-267"><a href="" title="Reggie Rust">Reggie Rust</a></li><li class="page_item page-item-298"><a href="" title="Saint Apricot">Saint Apricot</a></li><li class="page_item page-item-297"><a href="" title="Salmon Chair">Salmon Chair</a></li></ul></li><li class="page_item page-item-77"><a href="" title="Purple">Purple</a><ul class='children'><li class="page_item page-item-340"><a href="" title="A Woman Named Aubergine">A Woman Named Aubergine</a></li><li class="page_item page-item-224"><a href="" title="Emaciated Periwinkle">Emaciated Periwinkle</a></li><li class="page_item page-item-248"><a href="" title="Lucy from Indigo">Lucy from Indigo</a></li><li class="page_item page-item-274"><a href="" title="Rhonda Rhino of Amethyst">Rhonda Rhino of Amethyst</a></li><li class="page_item page-item-290"><a href="" title="Royal Purple Brick">Royal Purple Brick</a></li><li class="page_item page-item-310"><a href="" title="Shrinking Violet">Shrinking Violet</a></li><li class="page_item page-item-327"><a href="" title="The Lilac Key">The Lilac Key</a></li></ul></li><li class="page_item page-item-53 current_page_ancestor current_page_parent"><a href="" title="Red">Red</a><ul class='children'><li class="page_item page-item-197"><a href="" title="Cherry Heart">Cherry Heart</a></li><li class="page_item page-item-211"><a href="" title="Crimson Dreams">Crimson Dreams</a></li><li class="page_item page-item-218"><a href="" title="Demon Red Rainbow">Demon Red Rainbow</a></li><li class="page_item page-item-231"><a href="" title="Geranium">Geranium</a></li><li class="page_item page-item-261 current_page_item"><a href="" title="Pink from Pinkton">Pink from Pinkton</a></li><li class="page_item page-item-281"><a href="" title="Righteous Raspberry">Righteous Raspberry</a></li><li class="page_item page-item-280"><a href="" title="Rose Without Thorns">Rose Without Thorns</a></li></ul></li><li class="page_item page-item-67"><a href="" title="Yellow">Yellow</a><ul class='children'><li class="page_item page-item-173"><a href="" title="Bernie Banana">Bernie Banana</a></li><li class="page_item page-item-183"><a href="" title="Bronze God">Bronze God</a></li><li class="page_item page-item-187"><a href="" title="Canary Yellow">Canary Yellow</a></li><li class="page_item page-item-207"><a href="" title="Cool Lemonade">Cool Lemonade</a></li><li class="page_item page-item-234"><a href="" title="Gold Coins">Gold Coins</a></li><li class="page_item page-item-316"><a href="" title="Sun Sparkler">Sun Sparkler</a></li><li class="page_item page-item-336"><a href="" title="Topaz">Topaz</a></li></ul></li></ul></li><li class="page_item page-item-98"><a href="" title="Offers">Offers</a></li><li class="page_item page-item-92"><a href="" title="Order">Order</a><ul class='children'><li class="page_item page-item-102"><a href="" title="FAQ&#8217;s">FAQ&#8217;s</a></li><li class="page_item page-item-94"><a href="" title="Join Our Community">Join Our Community</a></li><li class="page_item page-item-100"><a href="" title="Videos">Videos</a></li></ul></li><li class="page_item page-item-1224"><a href="" title="Sign Up or Login">Sign Up or Login</a></li></ul></div>
    			</div><!-- #access -->
    		</div><!-- #masthead -->
    <div style="clear: both;"> </div>
    	</div><!-- #header -->

    Open in new window


    Author Comment

    The commenting comes from the template on Wordpress.
    LVL 9

    Expert Comment

    The comenting should contains the missing images in fire fox

    Author Comment

    The images are not missing. There is one big image on the page with links that are positioned absolutely. The links are working correctly in FF, not IE. The html above is just the header, not the main section of the page.
    LVL 42

    Accepted Solution

    The solution to that IE bug is to give those links a transparent background image.  In IE9 you could also use "rgba(0,0,0,0)", but that doesn't work for older versions of IE.

    > I don't know why but some of the source is commented in fire fox

    That's because it's not valid for comments to contain "--" (since that's part of the start and end delimiters) and one of the comments there was not properly closed before the next began.  In other words, it's not valid to nest comments in HTML.

    Author Comment

    Your solution saved my bacon - thank you so much. And, thanks for the notice on the comments.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    #Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now