Forums

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

Home Forums CSS overflow:hidden property isn't workingwith chrome

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #146867
    Pmollman
    Participant

    I just started working on a website (im pretty new to html and css) and i created a basic navigation bar. The navigation bar has border-radius property to round the bottom corners of the bar, but when the text boxes change color when hovering over them, they make the text box visable, being a rectangle it defeats the porpose of the rounded corners. So i used overflow:hidden to cut the rectanle off when i hover over the text. this works fine with firefox, but in chrome it still shows the full text box, making for an undesirable look and feel. Is there a way I can fix this? Or should I do it an entirley differant way? I am working in one PHP file at first then optimizing it by making actual CSS files later. so all the code is together, for now.

    `

        body {
        margin:0;
        padding:0;
        }
    
        .banner {
        top: 80px;
        width: 1000px;
        height: 400px;
        margin: 0px;
        padding: 0;
        overflow:hidden;
        position:relative;
        border-top-left-radius:20px;
        border-top-right-radius:20px;
        }
    
        .navbar {
        top:80px;
        position:relative;
        width:1000px;
        height:40px;
        background-color:#44A6A1;
        margin:0;
        padding:0;
        list-style-type:none;
        text-align:center;
        border-bottom-left-radius:20px;
        border-bottom-right-radius:20px;
        overflow:hidden;
        }
    
        .navbar li {
        float:left;
        z-index:100;
        }
    
        .navbar li a {
        padding-top:10px;
        padding-bottom:10px;
        height:40px;
        color:#FFFFFF
        }
    
        a:link,a:visited {
        display:block;
        width:200px;
        text-align:center;
        text-decoration:none;
        text-transform:uppercase;
        }
    
        a:hover,a:active {
        background-color:#55CFC8;
        color:#2E6E6A;
        }
    
        .navbar li a:hover {
        color:#2E6E6A;
        }
    
    </style>
    

    `

    The site im working on http://theshadowview.x10host.com/

    Thanks to anyone who can help.

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