/    Sign up×
Community /Pin to ProfileBookmark

menu bar moves when hovered in IE

Copy linkTweet thisAlerts:
Aug 27.2005

I have a menu bar that I am working on and it works great in firefox, but in IE the bottom border does not display. Also when you hover over the menu bar in IE it moves partially under the logo image at the top of the screen.

Here is the link to the page

[url]http://www.becontrols.com/trial/buttonmenu.html[/url]

Here is the CSS:

[CODE]body {background-image: url(wtback.jpg);
}

/* Horizontal Navbar Styles */

.navbar {text-align: center;
white-space: nowrap;
}

a {background-color: #cccccc;
border: 3px outset #999999;
text-align: center;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;

}

a:link {background-color: #cccccc;
padding: 1px 4px 1px 4px;

}

a:visited {background-color: #cccccc;
padding: 1px 4px 1px 4px;

}

a:hover {border-style: inset;
background-color: transparent;
text-decoration: none;
padding: 1px 4px 1px 4px;
color: #000000;
}

.centerimage {position: relative;
display: block;
margin: 15px auto 15px auto;
}[/CODE]

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@kiwibritAug 27.2005 — http://www.satzansatz.de/cssd/onhavinglayout.html[/QUOTE]
Brilliant. I've bookmarked that.
Copy linkTweet thisAlerts:
@gregmaticauthorAug 28.2005 — I manged to fix the moving menu by wrapping it in a single list item tag and styling away the bullet. I still don't have a bottom border on my links in IE. I thought I had them at some point but they are gone now. Does this still have something to do with the information in the link above?

Here's the link again:

[URL]http://www.becontrols.com/trial/buttonmenu.html[/URL]

and the current CSS

[CODE]body {background-image: url(wtback.jpg);
}

/* Horizontal Navbar Styles */

.navbar {text-align: center;
white-space: nowrap;
}

li {list-style-type: none;
margin-left: -20px}

a {background-color: #cccccc;
border: 3px outset #999999;
text-align: center;
padding: 1px 4px 1px 4px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;

}

a:link {background-color: #cccccc;
}

a:visited {background-color: #cccccc;
}

a:hover {border-style: inset;
background-color: transparent;
text-decoration: none;
padding: 1px 4px 1px 4px;
color: #000000;
}

.centerimage {position: relative;
display: block;
margin: 0px auto 8px auto;
}
[/CODE]
Copy linkTweet thisAlerts:
@FangAug 28.2005 — Add [I]position: relative;[/I] to rule [I]a[/I]
Copy linkTweet thisAlerts:
@gregmaticauthorAug 28.2005 — Thank you. You have no idea how much that helps. Did the static positioning just leave it too low for the bottom border to be seen?
Copy linkTweet thisAlerts:
@FangAug 28.2005 — No, it was 'hasLayout' problem. See the link given earlier.
Copy linkTweet thisAlerts:
@gregmaticauthorAug 28.2005 — I reviewed the link briefly. A lot of it was over my head, but I'll study it more later. I have bookmarked it because it looks like it is going to be an issue quite often. Thanks again for all your help.
×

Success!

Help @gregmatic 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 5.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...