Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    I am probably missing something fairly simple here, I have a div with the id sidebar and in that div there is a <ul>. The div looks good in IE7 (by good I mean looks how I think it should look) however in Firefox the whole div has too large a width.

    HTML:
    HTML Code:
    <div id="sidebar">
    	<ul>
    		<li id="desc">Links</li>
    		<li><a href="about.aspx" title="About">About</a></li>
    		<li><a href="flyer.pdf" title="Flyerr">Flyer</a></li>
    		<li><a href="MCA.pdf" title="MCA">MCA</a></li>
    	</ul>
    </div>
    CSS:
    Code:
    div#content #sidebar
       {
    	margin-left: 555px;
    	width: 150px;
       }
    
    div#content #sidebar ul
       {
    	background-color: #ffffcc;
    	border: 1px dashed #99ccff;
    	border-top: none;
    	height: 100%;
    	min-height: 300px;
    	width: 150px;
       }
    
    div#content #sidebar ul li
       {
    	list-style-type: none;
    	margin-left: 8px;
    	width: 150px;
       }
    
    div#content #sidebar ul li#desc
       {
    	color: #cc0099;
    	font-weight: bold;
    	margin-bottom: 20px;
    	margin-left: auto;
    	margin-right: auto;
    	text-align: center;
    	width: 150px;
       }
    
    div#content #sidebar ul li a:link
       {
    	color: #cc0099;
    	font-size: 0.8em;
    	text-decoration: none;
       }
    
    div#content #sidebar ul li a:visited
       {
    	color: red;
    	font-size: 0.8em;
    	text-decoration: none;
       }
    
    div#content #sidebar ul li a:hover
       {
    	background-color: #f1f1f1;
    	color: #ee0099;
    	font-size: 0.8em;
    	text-decoration: none;
       }
    
    div#content #sidebar ul li a:active
       {
    	color: red;
    	font-size: 0.8em;
    	text-decoration: none;
       }
    The ul has a lot of room to the left of the li links, could it be the margin-left: 8px ?

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Margin and padding work differently with lists than with other elements, and they work differently in different browsers, too.

    Play around with the margin and padding on your UL and LI in combination, and see the results you get.

    Also, try putting borders on your UL and LI elements so you can see exactly which is doing what.

  4. #3
    Junior Member simplewebs's Avatar
    Join Date
    Jul 2008
    Location
    Shanghai
    Posts
    9
    Member #
    17045
    We often set ul ol dl margin padding as 0px, like this

    ul ol dl{ margin:0px; padding:0px;}

    Then set the padding and margin if necessary.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com