CODEWITHSUNDEEP
csshtmlinternet-explorer
Toykoc
Toykoc

Reputation: 91

I tried everything! Display:inline won't work on IE

I'm very new to HTML5 and I got stuck. Here is the site I'm coding. It is OK in Chrome, Firefox and Safari. But in IE there are many problems. But I'll ask the most annoying one: I can't get menu items stay inline in IE. Before you ask, yes I've tried tens of different solutions written on the internet but none worked out.

Here is my CSS code for it:

#wrap{
margin: auto;
position: absolute;
bottom:0px;
width: 915px;
left:0;
right:0;}

nav{ 
text-align:center;
margin-bottom:-4px;}

nav ul li {
display: inline-block;
zoom: 1;
*display: inline;

background-color: rgba(255, 255, 255, 0.5);
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
-moz-border-top-left-radius: 10px;
-moz-border-top-right-radius: 10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
border-top-left-radius: 10px;
border-top-right-radius: 10px;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
-webkit-transition-property: background-color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: background-color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: linear;
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: linear;}

nav ul li:hover {
background-color: rgba(255, 255, 255, 1);}

nav ul li a {
color:#8F8F8F; text-decoration:none; 
-webkit-transition-property: color;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: linear;
-moz-transition-property: color;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: linear;
transition-property: color;
transition-duration: 0.5s;
transition-timing-function: linear;}

nav ul li a:hover {color:#000;}

And here is the HMTL:

        <div id="wrap">
    <nav>
        <ul>
            <li style="padding: 8px 25px 10px 25px;"><a style="color:#000"><h2>BS Création</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="tasarimlar.htm"><h2>tasarımlar</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="custom.htm"><h2>kişiye özel</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="magaza.htm"><h2>mağaza</h2></a></li>
            <li style="padding: 8px 25px 10px 25px;"><a href="contact.htm"><h2>iletişim</h2></a></li>
            <li style="padding: 8px 10px 10px 10px;"><a href="http://www.facebook.com/bscreation"><img  src="img/facebook.png" width="15" height="15"></a>
        </ul>               
    </nav>
    </div>

Can anyone please help me? Thanks!

Upvotes: 0

Views: 153

Answers (1)

Christoph
Christoph

Reputation: 51201

IE6-8 do not recognize HTML5 Elements such like nav. You need to "register" them to those IEs so you can use css selectors on them. Take a look at this SO question or this article on how to achieve that.

Also you should avoid inline styles at all costs. Put them in your external css since you already have one.

Upvotes: 4

Related Questions