SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: Centering a ul

  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking Centering a ul

    Hi,

    I have a <ul> inside a div. I've floated the <li>'s so that they align horizontally. The <li>'s have also been styled to become BOXES. What i want is to display 2 boxes per "line", and center them in the <div>.

    I tried doing:

    HTML Code:
    ul {
       display: block;
       width: 100%;
       margin: 0 auto;
    }
    It worked in IE but not in FF! I couldn't believe it!

    Any suggestions, tips or links to decent tutorials would help.

    Many many thanks,

    Dave
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Different problem

    Current css:


    Code:
    div#packages-listing {
    	margin: 0 auto 0 auto;
    	width: 653px;
    }
    
    ul.double-column {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 653px;
    }
    
    ul.double-column li {
    	list-style: none;
    	margin: 0 20px;
    	padding: 0;
    	width: 286px;
    	float: left;
    }
    
    ul.double-column ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    ul.double-column ul li {
    	margin: 0;
    	padding: 0;
    }
    Changed now, so that FF and IE7 work fine, but IE6 doesn't understand.

    PLEASE HELP!
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  3. #3
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Solution!

    Ok i fixed it. My solution involved focusing alot on widths. This is the key. Also remember that IE and FF have different ways of interpreting margins and padding applied horizontally.

    Final css:

    Code:
      #packages-listing {
    	margin: 0 auto 0 auto;
    	width: 653px;
    }
    
     ul.package-ul h2 {
    	background: #1B3F94;
    	color: #fff;
    	text-indent: 10px; /* <-- used as alt. to padding to avoid FF hoz padding bug! */
    }
    
     ul.double-column {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    	width: 653px;
    	display: block;
    }
    
     ul.double-column li {
    	list-style: none;
    	margin: 0 10px 20px 10px;
    	padding: 0;
    	width: 266px;
    	min-height: 450px;
    	display: block;
    	background: url(//package-radial.gif) repeat-x left top;
    }
    
     ul.double-column ul {
    	list-style: none;
    	margin: 0;
    	padding: 10px;
    	display: block;
    }
    
     ul.double-column ul li {
    	float: none;
    	padding: 0;
    	width: 240px;
    	min-height: 0; /* <-- ALTER THIS VALUE TO MAKE MIN-HEIGHT OF BOXES GREATER OR SMALLER (also change alt. value in site_ie.css */ 
    	background: 0;
    	border-bottom: 1px solid #f3f3f3;
    }
    
     ul.double-column ul li a:hover,
     ul.double-column ul li a:focus {
    	text-decoration: underline;
    }
    
     ul.double-column ul li a span:hover,
     ul.double-column ul li a span:hover {
    	text-decoration: none !important;
    }
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk


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
  •