Results 1 to 2 of 2

Thread: IE 7 Border Problem...

  1. #1
    Join Date
    Jan 2007
    Location
    The stage
    Posts
    568
    Thanks
    23
    Thanked 6 Times in 6 Posts

    Question IE 7 Border Problem...

    I am having a problem with a menu i made from scratch. It has a 1 pixel border on both the top and bottom for each element. Then when hovered it changes to a 2 pixel border with a different color. Now in Google Chrome it works beautifully. But IE 7 refuses to show the borders. Here is my css code:
    HTML Code:
    .menu{
    	float: left;
    	border-top: 1px solid #888888;
    	border-bottom: 1px solid #888888;
    	width: 100%;
    	overflow: hidden;
    	margin: 0px 0px 0px 0px;
    	}
    .menu ul{
    	display:inline-block !important;
    	list-style-type: none;
    	}
    .menu ul li{
    		float: left;
    		}
    .menu li a{
    	padding: 5px 5px 5px 5px;
    	border-bottom: 1px solid #CCCCCC !important;
    	border-top: 1px solid #CCCCCC !important;
    	color: #888888 !important;
    	
    	text-decoration: none;
    	}
    .menu li a:hover{
    	border-top: 2px solid #888888 !important;
    	border-bottom: 2px solid #888888 !important;
    	color: #444444 !important;
    	}
    here is the html code for the menu:
    HTML Code:
        	<div class="menu">
                <ul>
                    <li><a href="index.php">Home</a></li>
                    <li><a href="team.php">Team Profiles</a></li>
                    <li><a href="portfolio.php">Portfolio</a></li>
                    <li><a href="experience.php">Experience</a></li>
                    <li><a href="contact.php">Contact Us</a></li>
                    <li><a href="login.php">Client Login</a></li>
                </ul>
            </div>
    This seriously baffles me... Help is greatly appreciated...

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    First, ensure you have a DTD on your page (in case you don't have as the snippet you've shown only shows the markup).

    Secondly, add highlighted:
    Code:
    .menu li a{
    	padding: 5px 5px 5px 5px;
    	border-bottom: 1px solid #CCCCCC !important;
    	border-top: 1px solid #CCCCCC !important;
    	color: #888888 !important;
    	display:block;
    	text-decoration: none;
    	}
    IE has problems showing the top and bottom border, on a element which is displayed inline.

    See example code for testing:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    ul{
    list-style-type:none;
    }
    ul li{float:left;margin:10px;}
    ul li a{border:5px solid #222;padding:10px;}
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    </ul>
    </body>
    </html>
    Don't ask me the reason why, I'm uncertain.

    On CF, there's an exact the same problem as what you are experiencing, where other alternatives are given.

    Hope that helps.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    Rockonmetal (10-15-2008)

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •