/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] IE wont display elements

I cant figure out why IE won’t display my navigation links. I’m assuming its something to do with my CSS.Modern browsers have no problem spitting out what you would expect. I’ve validated- no clues to be had there.

I was hoping someone with fresh eyes would be kind enough to give it a look over. If theres anything that I could do to help you help me, let me know. Thanks in advance.

Link to site:
[url]http://www.austinlowery.limewebs.com[/url]

link to CSS source:
[url]http://austinlowery.limewebs.com/style2.css[/url]

Targeted Snippets:

HTML that is not displaying

[CODE]<nav class=”main”>
<a href=”index.html” class=”home”><span class=”invisible”>Home</span></a>
<a href=”blog.html” class=”blog”><span class=”invisible”>Blog</span></a>
<a href=”about.html” class=”about”><span class=”invisible”>About</span></a>
<a href=”web_design.html” class=”web_design”><span class=”invisible”>Web Design</span></a>
</nav> [/CODE]

Related CSS

[CODE]
.invisible{
visibility:hidden;
}
.main{
top:50%;
margin-top:-16px;
display:block;
left:50%;
margin-left:-293px;
z-index:6;
}

.main a{
display:inline-block;
height:31px;
background-image:url(links.png);
text-decoration:none;
margin:0px 25px 0px 25px;
top:-7px;
z-index:7;
}

.home{
background-position: 0px 0px;
width:78px;
}.home:hover{background-position: -78px 0px;}

.blog{
background-position: -306px 0px;
width:66px;
}.blog:hover{background-position: -372px 0px;}

.about{
background-position: -156px 0px;
width:75px;
}.about:hover{background-position: -231px 0px;}

.web_design{
background-position: -438px 0px;
width:155px;
}.web_design:hover{background-position: -593px 0px;}[/CODE]

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@JavaboeyOct 22.2010 — Wouldn't this:

.invisible{

visibility:hidden;

}

make it invisible in all browsers? And I don't see a reason to use z-index here. You're placing your links in .main above .main. They're within .main, and shouldn't be needed to be placed above.

Also, I've experienced problems using inline-block with IE. Instead of using inline-block, use float. You get the same effect.
Copy linkTweet thisAlerts:
@DrPepperauthorOct 22.2010 — Javaboey

all that z-index stuff was there to see if ie was doing something weird and placing the links behind something so it was just temporary troubleshooting code.

The invisibility was only applied to the text for seo reasons which had no effect on the images that I was using.

I went ahead and changed to float, seemed like a good idea, thanks.

Anyway after a few hours I finally found out that it was the html5. For some idiotic reason ie will not change the display on the nav tag from inline to block even with styling. So all I had to do was change the nav tag to a div. Finally resolved. Thanks for your time though. You gave me a reason to go back and give it another couple hours of hours fiddling with before I gave up.
×

Success!

Help @DrPepper spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.1,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...