SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict darkwater23's Avatar
    Join Date
    Nov 2005
    Location
    Omaha, NE
    Posts
    335
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styles inheritence issue

    I am using the following styles:

    Code:
    dl{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	margin: 0em;
    	padding: 0em;
    }
    
    dt {
    	font-weight:bold;
    	color: #a19d6e;
    	margin-bottom: 0.5em;
    	margin-left: 1.5em;
    	text-indent: -1.5em;
    }
    
    dd {
    	color: #646464;
    	margin-left:1.5em;
    	text-indent: -1.5em;
    	margin-bottom:2.5em;
    }
    This is all well and good until I put an unordered list in the content like so:

    HTML Code:
    <dl>
    <dt>Q: How much is my surgery, or visit, going to cost?</dt>
                    <dd>A: Nebraska Orthopaedic Hospital would be happy to assist you in identifying the cost of your surgery.  Since each surgery can be different, we will need some basic information from you.  Please call us at 402.637.0600 and be prepared to answer the following questions.  Once we have this information, we can help you find the approximate cost of your visit.
                    <ul>
                      <li>What is the CPT Code of the service you are to have? You can get this information from your physician.</li>
                      <li>Who is the physician ordering the service?</li>
                      <li>Physician office phone number?</li>
                      <li>Is this service being performed as the result of an accident or other third party responsibility? If the answer is yes, we will need some additional information.</li>
                      <li>Do you have insurance?<ul>
                      <li>What insurance do you have?</li>
                      <li>What is the insurance policy number?</li>
                      <li>What is the insurance group number?</li>
                      <li>Have you met your deductible?</li>
                    </ul>
                    </li>
                    </ul>
                    </dd>
    </dl>
    This puts a text-indent on the list items in IE7 and FF renders the text over the bullets on the list. What's the best way to handle this? Should I create a specific class for this list to fix the indenting/overlap problems?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE and FF handle default list indents differently, with IE using margins whilst FF uses padding, so it is best to zero out whatever is not needed. As the <ul>s will inherit the text indenting, you can target these with different styling which can address the browser differnce issue. IE also puts extra spacing between list items which can be handled with line height.
    Code:
    dl{
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	margin: 0;
    	padding: 0;
    }
    
    dt {
    	font-weight:bold;
    	color: #a19d6e;
    	text-indent: -1.5em;
    	margin: 0 0 0.5em 1.5em;
    	padding: 0;
    }
    
    dd {
    	color: #646464;
    	text-indent: -1.5em;
    	margin: 0 0 2.5em 1.5em;
    	padding: 0;
    }
    
    dd ul {
    	text-indent: 0;
    	margin: 0 0 0 1.5em;
    	padding: 0;
    	line-height: 1.2em;
    }


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
  •