CODEWITHSUNDEEP
htmlcssinternet-explorercross-browsernavigationbar
Yury Lankovskiy
Yury Lankovskiy

Reputation: 153

Navigation bar cross browser compatibility

I ran into an issue with cross-browser code.

I have added a floating navigation bar at the top of my page with the following code:

    <header id="page-header" class="content-info" role="contentinfo">
        <!-- Nav -->
        <nav id="nav">
            <ul>
                <li><a href="1.html">1</a></li>
                <li><span>2</span>
                    <ul>
                        <li><a href="2.1.html">2.1</a></li>
                        <li><a href="2.2.html">2.2</a></li>
                        <li><a href="2.3.html">2.3</a></li>
                        <li><a href="2.4.html">2.4</a></li>
                    </ul></li>
                <li><a href="3.html">3</a></li>
                <li><a href="4.html">4</a></li>
                <li><a href="5.html">5</a></li>
            </ul>
        </nav>
    </header>

With the next css code:

header#page-header {
z-index: 9999;
position: fixed;
height: 40px;
line-height: 40px;
top: 0;
right: 0;
background: white;
text-align: center;
width: 100%;
border-top: 1px solid rgba(0,0,0,0.2);
margin-top: 0;
margin-bottom: 2px;
color: #5b5b5b;
display: inline-table;
}

It works perfectly on all of the browsers except for IE. The navigation menu does not show up and it is because of the parameter "right: 0;". I have tried removing this parameter but then on browsers Chrome and Safari the menu is shifted half way to the right of the page.

I have tried creating a style for all browsers but the IE like follows:

<!--[if !IE]>< -->
<link rel="stylesheet" type="text/css" href="css/xbrowser.css" />
<!-- ><![endif]-->

xbrowser.css file containing:

header#page-header {
right: 0;
}

I have made sure to remove the parameter "right: 0;" from the main css file. This did not work as IE still recognized the css file that I told it to ignore.

Can someone suggests a workaround to get this feature to work on all browsers ie Chrome, Safari, Opera, Mozilla and IE?

Thanks in advance

Upvotes: 0

Views: 1395

Answers (1)

Timmah
Timmah

Reputation: 1335

you need to alter your conditional comment, all browsers can currently still read it:

<!--[if ie]>
    Stuff. Only IE will read what's in here (up till IE 10)
<![end if]-->

In most cases, it'll be IE that needs the special treatment! Here's a good guide on IE conditional comments, they're very handy.

As for the navbar issue, as long as your IE-only CSS appears after the main css files, all you need to do is overwrite the offending property, in your case, right:0;

If it still doesn't appear to be working, I find it helps to test the conditional comments on their own to ensure they're working before dismissing the idea. Try putting something like this in plain sight on your HTML page:

<!--[if ie]>
    <h1>Conditional comments working in IE!</h1>
<!--[end if]>

Upvotes: 2

Related Questions