Opacity in IE - Rounded corners FF


me again with the same website: link

I’ve created a sidebar with a subnavigation.

Problem 1: The rounded corners don’t work in FF (win) It does work in FF (mac) strangely enough. I think the problem is the background color “bleeds” through the border. That leads me to the second problem.

Problem 2: the background-color bleeds through the border, it’s very clear in Chrome (win/mac).

Problem 3: the sidebar won’t float right in IE7. It just floats left…

Problem 4: while we’re busy, can anyone suggest a solution for my “call us”-button at the top of the page? It should be aligned to the button of Contact in the navigation.

Thanks in advance!

They work fine for me in Firefox 7 on Windows 7

I’m not following, in Chrome for me it looks exactly the same as what it does in Firefox

The reason behind this is because your not using the HTML5 shiv which emulates HTML5 elements in the DOM for older browsers including IE 8 and below, you can download the JS file from html5shiv - HTML5 IE enabling script - Google Project Hosting and simply call the file within your <head> tags.

Give your “#header” element a position of relative then instead of a margin on “#call” use ( right: 12px ) which will align it perfectly to the hover state of your contact navigation item.

I’m working on a Win Vista. I’ve updated my Firefox, because I hadn’t used this PC in a long time… (i’m mainly working on my iMac). I’ve updated and it looks better, BUT… (see following problem)

Now it looks the same for me as well. But if you look at the last list-item, you can see the corners bleed out of the border… Look closely.

Is it because I’m using <aside>? I tried to work around it to give it a class “sidebar”, so now the sidebar gets the css style, but it just doesn’t float right, like specified in the css stylesheet.

Yay thanks! So simple to solve, just couldn’t think of it.

This is because the border radius property only works on the parent element and not the children, what you need to do is add a class to the last list item and give it a bottom border radius to match the parent border radius.

Yes is is because of the <aside> element, this element is native to HTML5 which IE 8 and below doesn’t support. The link i supplied will allow you to continue using HTML5 without any issues.

Allright that looks much more like it :slight_smile:

I’ve added this code for the rounded corners problem:

.subnav li ul li:last-child { 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

It works for the regular button, but not for the roll-over. If I add the following code, then all children, not only the last-child, have rounded corners at the bottom.

.subnav li ul li a:hover:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

Oops, solved it myself.

The code for the rounded corners is this:

.subnav li ul li:last-child,
.subnav li ul li:last-child a:hover { 
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;

But now my dropdown menu has disappeared… Don’t understand why?!