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
<!-- m --><a class="postlink" href="http://www.becontrols.com/trial/buttonmenu.html">http://www.becontrols.com/trial/buttonmenu.html</a><!-- m -->
Here is the CSS:
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;
}http://www.satzansatz.de/cssd/onhavinglayout.<!-- m --><a class="postlink" href="htmlhttp://www.satzansatz.de/cssd/onhavinglayout.html">htmlhttp://www.satzansatz.de/cssd/onhavinglayout.html</a><!-- m -->
Brilliant. I've bookmarked that.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:
<!-- m --><a class="postlink" href="http://www.becontrols.com/trial/buttonmenu.html">http://www.becontrols.com/trial/buttonmenu.html</a><!-- m -->
and the current CSS
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;
}Add position: relative; to rule aThank 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?No, it was 'hasLayout' problem. See the link given earlier.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.
Here is the link to the page
<!-- m --><a class="postlink" href="http://www.becontrols.com/trial/buttonmenu.html">http://www.becontrols.com/trial/buttonmenu.html</a><!-- m -->
Here is the CSS:
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;
}http://www.satzansatz.de/cssd/onhavinglayout.<!-- m --><a class="postlink" href="htmlhttp://www.satzansatz.de/cssd/onhavinglayout.html">htmlhttp://www.satzansatz.de/cssd/onhavinglayout.html</a><!-- m -->
Brilliant. I've bookmarked that.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:
<!-- m --><a class="postlink" href="http://www.becontrols.com/trial/buttonmenu.html">http://www.becontrols.com/trial/buttonmenu.html</a><!-- m -->
and the current CSS
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;
}Add position: relative; to rule aThank 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?No, it was 'hasLayout' problem. See the link given earlier.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.