Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: horizontal list

  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts

    horizontal list

    i am using a horizontal list which are text links.

    the div which contains the list items has a width of 750px and i need a border at the bottom of this div which i am able to get

    my question is about the list items, i want all the list items bottom to merge with the border at the bottom, when i tried giving a height to the list items all browsers except for ie6 were displaying properly ie6 was not able to display properly and it made all the links appear in a new line

    how can i fix this in such a way that the code will work for ie6 and all other browsers as well.

    the file is located at
    http://www.sudhakargolakaram.co.in/horizontallist.html


    thanks

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,692
    Thanks
    22
    Thanked 1,830 Times in 1,814 Posts
    Hello sudhakararaog,
    Instead of padding an anchor that may have a line-break, try a set height...
    Not sure how that will work in IE6, or how it will work on a text-size change.
    Try this-
    Code:
    #topmenu {
    	float: left;
    	width: 750px;
    	height: 45px;
    	margin: 10px 0 0 0;
    	border-bottom: 5px solid #5b32ff;
    }
    #topmenu ul {
    height: 45px;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    }
    #topmenu ul li {
    	display: inline;
    	float: left;
    	margin: 0 2px 0 0;
    	padding: 0;
    }
    #topmenu ul li a {
    height: 33px;
    	color: #000;
    	font-weight: bold;
    	text-decoration: none;
    	/*	text-align: center;*/	
    	background: #4883f2;
    	display: block;
    	padding: 12px 20px 0px 3px;
    	/*height: 10px;*/	 	
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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