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 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Content disappears after loading (IE)

    Hi guys,

    I have <nav> element which looks a bit like a ribbon (see screenshot attached), so I have used the :before and :after pseudo elements to attach the backgrounds to each end.

    Code:
    nav {
    	position: relative;
    	width: 737px;
    	height: 33px;
    	line-height: 33px;
    	margin: 10px 0 0 114px;
    	background: #eb138e;
    	color: #ffffff;
    	font-weight: bold;
    }
    nav:before {
    	position: absolute;
    	top: -15px;
    	left: -113px;
    	content: url("../img/nav_left.png");
    }
    nav:after {
    	position: absolute;
    	top: -15px;
    	right: -110px;
    	content: url("../img/nav_right.png");
    }
    nav ul {
    	width: 460px;
    	margin: auto;	
    }
    nav ul li {
    	float: left;
    	padding: 0 26px 0 0;
    }
    This is all working perfectly in Firefox and Chrome, and weirdly displays ok in IETester, but in my IE (v8), I can only see the two ribbon ends (nav_left.png and nav_right.png) while the page is loading, and then they instanly disappear (see other screenshot). I have been trying to play around with z-indexes thinking this was the problem, but if that is the case then I am yet to find the correct combination as I have made no difference.

    Any ideas what this could be?

    Thanks in advance,
    Attached Thumbnails Attached Thumbnails Content disappears after loading (IE)-snap-2011-05-24-00-06-29.png   Content disappears after loading (IE)-snap-2011-05-24-00-12-41.png  

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    nav:before {
    position: absolute;
    top: -15px;
    left: -113px;
    content: url("../img/nav_left.png");
    }
    nav:after {
    position: absolute;
    top: -15px;
    right: -110px;
    content: url("../img/nav_right.png");
    }
    Try after setting an adequate width and height to them.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Gave that a go but no luck.

    Would someone mind taking a look at this nav in IE and help me figure out why the :before and :after pseudo elements are only working in FF and Chrome, but appearing for a brief period when the page loads in IE:

    www.casafelipe.co.uk/jelly

    Thanks in advance,

  • #4
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Works for me in IE8 .0.6001. Try clearing your browser cache.

    (I think Ctrl-F5 forces IE to reload the entire page.)
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #5
    New Coder
    Join Date
    Oct 2006
    Posts
    82
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm 8.0.7600.16385 and it's only showing the two background images I've attached to :before and :after for a split second when the page loads, then they disappear.

    Clearing the cache has made no difference. Bizarre.

    Would be interested to know if anyone else can see them, because they are appearing in my IETester.


  •  

    Posting Permissions

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