Hello,
I’m just getting into CSS3. I’m trying to use the border-image property to add the tabs to the left and right of my menu bar on this site – http://bonusest.com/clients/ourchosenheritage/ Everything seemed to be working, but sometimes this strange border magically appears at the top of the menu bar, and when you zoom the page out, things get even weirder.
I’ve tried playing with numerous things, but to no avail. Here is the CSS for that section –
nav#navContainer {
position: relative;
width: 1100px;
min-height: 28px;
border-width: 0 19px;
-moz-border-image: url("../images/menuTabs.png") 0 19 0 19 round;
-webkit-border-image: url("../images/menuTabs.png") 0 19 0 19 round;
}
#navContainer ul{
background: url("../images/menuBar.png");
min-height: 28px;
display: block;
padding: 0 0 0 250px;
}
#mainNav li {
float: left;
padding: 0 30px 0 0;
}
What am I doing wrong?
Thank you for reading!
~A.B.
P.S. PLEASE feel free to critique my code as I’m learning, and want to write clean, efficient code. The more input, the better!