Results 1 to 2 of 2

Thread: display:inline causing Height x Width issues

  1. #1
    Join Date
    Oct 2009
    Location
    UK
    Posts
    36

    display:inline causing Height x Width issues

    Hi guys,

    I've downloaded the dotnetblog from www.dotnetblogengine.net and i'm trying to apply an image to the background of each li element in the ul within the top menu.

    So this is my CSS for it:
    Code:
    #menu
    {
    	background: white;
    	border: 1px solid silver;
    	padding: 5px;
    	margin-bottom: 20px;
    }
    
    #menu ul
    {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	height: 36px;
    }
    
    #menu ul li
    {
    	display:inline;
    	margin: 0;
    	padding: 0px 0px 18px 0px;
    	background-image: url(../../pics/headerMenuTile1.gif);
    	background-repeat: no-repeat;
    	width: 90px;
    	height: 36px;
    }
    
    #menu ul li a
    {
    	padding: 0px 0px 0px 0px;
    	margin: 0px 0px 0px 0px;
    	font-weight: bold;
    }
    But for some strange reason the li's are wrapping around the links inside even though i have explicitly declared the height and width?

    i removed the display:inline call and although it now stacks the list the background image is fully displayed.

    Any ideas mates?

    cheers,
    Sol

  2. #2
    Join Date
    Oct 2009
    Location
    UK
    Posts
    36
    Found a solution,

    I needed to set each 'il' to display:block and float left.
    That way it obeys the height and width i have set, and the float keeps it inline.

    Sorry if anyone was spending their time looking for an answer.

Posting Permissions

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