The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 border-image blowing up

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #31884


    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 – 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!


    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!

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.