8 Replies Latest reply: Jun 17, 2011 5:27 AM by phyllisj9 RSS

    Styling inline definition lists with CSS

    phyllisj9 Community Member

      Okay I'm stumped on a CSS problem.

       

      I'm trying to style inline definition lists with CSS.  Here is a page that shows the way I want to use them in my design:

      http://phyllis.fellowshipx.org/RunInDefList.html

       

      This displays fine in the most recent versions of IE, Google, and Firefox.  But in IE 7, the first line of each section is messed up (the first dd drops a bit and messes up the spacing).  I'll attach a picture below of the way it looks in IE 7.

       

      I've managed one hack that fixes IE 7:

      http://phyllis.fellowshipx.org/RunInDefListHacked.html

       

      (The hack is the if/then statement at the bottom of the style section).

       

      That hack doesn't help with earlier versions of IE.  I'm also thinking maybe I have the CSS wrong to begin with or wouldn't need a hack.  But I can't figure it out.  The code validates, although that doesn't mean it's logical....

       

      Any help would be appreciated.  I'm trying to use semantic markup rather than tables as this is going to be part of the layout of a portfolio site.  I could fix my portfolio pages (see HTML sample)  with just a regular paragraph and an extra class at the beginning of it.  But I need the indention aspect on my resume pages (also shown in that sample).

       

      Any ideas?

       

      Thanks, Phyllis

       

      RunInDrop.jpg

        • 1. Re: Styling inline definition lists with CSS
          Nancy O. CommunityMVP

          Some of your CSS is redundant, contradictory and unsupported by all browsers.  As an example, I'm utterly confused by this rule and I'm sure most browsers will be too.

           

          #folioInside dt {
              color: #ffd264;
              font-weight: bold;
              margin-right: 6px;
              display: run-in;
              clear: both; 
              float: left;

          }

           

          More on the Display property and why run-in is not a good choice here:

          http://www.quirksmode.org/css/display.html

           

          Keep things simple.  You'll have far fewer problems with pre-IE9 and other lesser browsers.

           

          More on Definition Lists and how to style them:

          http://www.maxdesign.com.au/articles/definition/

           

           

           

          Nancy O.
          Alt-Web Design & Publishing
          Web | Graphics | Print | Media  Specialists 
          http://alt-web.com/
          http://twitter.com/altweb

          • 2. Re: Styling inline definition lists with CSS
            phyllisj9 Community Member

            Thanks,

             

            Here's a page where I've tried to simplify matters.  I'm only going to try to do the main experience section inline (and just do the rest as a paragraph with a class toward the front).

             

            http://phyllis.fellowshipx.org/ResumeAttempt2.html

             

            Any idea how I could get the year and the company name on the same line?  I've got display inline in there right now, but it has no effect (so could remove it).

             

            Would tables be the best solution?

             

            Funny, I worked on this new sample before I saw your page.  I'm trying to mimic #7 on the link you sent me (though without the rule line).  Can't get it to work though.  And their output sample is actually an image (so maybe it doesn't work!).

             

            Thanks, Phyllis

            • 3. Re: Styling inline definition lists with CSS
              Nancy O. CommunityMVP

              This code works fine for me in Firefox, Chrome & IE.

               

               

              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
              <html xmlns="http://www.w3.org/1999/xhtml">
              <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
              <title>Definition List Example #7</title>
              
              <style type="text/css">
              
              dl.event
              {
              margin: 2em 0;
              padding: 0;
              font-family: georgia, times, serif;
              }
              
              .event dt
              {
              position: relative;
              left: 0;
              top: 1.1em;
              width: 5em;
              font-weight: bold;
              }
              
              .event dd
              {
              border-left: 1px solid #000;
              margin: 0 0 0 6em;
              padding: 0 0 .5em .5em;
              }
              </style>
              </head>
              
              <body>
              
              <dl class="event">
              <dt>23 March</dt>
              <dd>Car club meeting</dd>
              <dd>7 pm</dd>
              <dd>See a wide range of classic cars on display... </dd>
              <dt>13 June</dt>
              <dd>Cake stall</dd>
              <dd>12 pm</dd>
              <dd>Cakes of every type. All proceeds go to the... </dd>
              </dl>
              </body>
              </html>
              
              

               

               

               

              Nancy O.
              Alt-Web Design & Publishing
              Web | Graphics | Print | Media  Specialists 
              http://alt-web.com/
              http://twitter.com/altweb

              • 4. Re: Styling inline definition lists with CSS
                phyllisj9 Community Member

                I finally got it!!!

                 

                I had to replace one piece of their code at a time.  Finally figured out that if you set a line-height on DL, it messes up the spacing.  I can do without the line-height.

                 

                Thanks for your help.  No one even responded to me on other forums.

                 

                Thanks, Phyllis

                • 5. Re: Styling inline definition lists with CSS
                  phyllisj9 Community Member

                  Any idea why the dt has to be set 1.1 em from the top?  Changing that value messes up the spacing, but I can't figure out a way to make adjustments.  I'm hoping to eventually figure out some way to use line-height in this also because it would look better.

                   

                  Thanks, Phyllis

                  • 6. Re: Styling inline definition lists with CSS
                    phyllisj9 Community Member

                    Discovered I can't make any adjustments to the spacing at all or it's no longer lined up.  And that's spaced too far apart to be used in my online resume.

                     

                    Can you think of any other way to write this?  Or are tables my best bet?

                     

                    Thanks, Phyllis

                    • 7. Re: Styling inline definition lists with CSS
                      Nancy O. CommunityMVP
                      No one even responded to me on other forums.

                       

                      I don't know which forums you posted to.  For code and layout questions, check out the Dreamweaver General Discussion Forum

                      http://forums.adobe.com/community/dreamweaver/dreamweaver_general?view=discussions 

                       

                      This removes line space between definitions:

                       

                      event .dd {

                      padding: 0;

                      }

                       

                      This moves title down

                       

                      event .dt {

                      top: 2.25em;

                      }

                       

                      Also experiment with margins.

                       

                       

                      Nancy O.
                      Alt-Web Design & Publishing
                      Web | Graphics | Print | Media  Specialists 
                      http://alt-web.com/
                      http://twitter.com/altweb

                      • 8. Re: Styling inline definition lists with CSS
                        phyllisj9 Community Member

                        Thanks Nancy,

                         

                        The other forums weren't part of Adobe (posted on webdeveloper).

                         

                        I appreciate all your input!  I'll keep playing around with it.  It's possible I'll opt for tables to be on the safe side as I'm afraid the inline spacing is a bit ornery on different browsers.  I'm probably just too anti-table since they've been preached against for a long time now.  But my year/job info is more or less tabular data anyway.  I definitely wouldn't lay out page designs with a table (using CSS only for that).

                         

                        Funny I got through putting together a Javascript section on my portfolio site faster than this one bit of HTML....

                         

                        Thanks for your help,

                        Phyllis