10 Replies Latest reply on Mar 30, 2010 6:37 AM by houstonalle

    Bullets in ul align incorrectly in IE6

    houstonalle Level 1

      On this page, the bulleted list items in the the main content area align fine in Google Chrome, FF on PC and Safari and FF on Mac, but in IE6, they bullets appear out of alignment with the item to which they belong. Is there a fix for this?

       

      http://www.mgmlaw.us/IndexTest2.html

        • 1. Re: Bullets in ul align incorrectly in IE6
          BobLevine MVP & Adobe Community Professional

          I don't have a machine with IE6 handy right now but try adding this near the top of your CSS:

           

          ul,li {
          list-style:none;
          margin:0;
          padding:0;
          }

           

          Bob

          • 2. Re: Bullets in ul align incorrectly in IE6
            houstonalle Level 1

            Tried that, but it just took out the bullets and moved the (formerly bulleted) paragraphs flush left with the other text, so I removed it from the CSS again.

            • 3. Re: Bullets in ul align incorrectly in IE6
              Nancy OShea Adobe Community Professional & MVP

              Try this instead of what you have now:

               

              #mainContent ul li {
              font: .80em/1.5 Arial, Helvetica, sans-serif;
              margin-bottom: 12px;
              }

               

              Also, you better test your page in Firefox with increased text-size (zoom, text only).  It's messed up.

               

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

              • 4. Re: Bullets in ul align incorrectly in IE6
                houstonalle Level 1

                Nope. That didn't fix it in IE6. Since this is the browser causing the trouble does anyone know any comment that  can be added to fix in IE6?

                 

                Yes, the text does scroll further down the page with zoom text.

                • 5. Re: Bullets in ul align incorrectly in IE6
                  Nancy OShea Adobe Community Professional & MVP

                  Your CSS and HTML code is messing you up.  If you copy & paste this code into a new, blank HTML page, I think you'll find the majority of your problems are solved.  CHECKED and works in IE5.5, 6, 7, 8, FF 3.6

                   

                   

                  <!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=utf-8" />
                  <title>M. Gavin McGee Practice Focused on Construction Law</title>
                  <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" />
                  <style type="text/css">
                  /**GENERAL STYLE**/
                  body  {
                  background-image:url(../backgroundrolls.png);
                  margin: 0; padding:0; font-size:100%; line-height:100%; 
                  text-align: center; /**for older browsers**/
                  color: #000;
                  background-repeat: no-repeat;
                  font-family: Arial, Helvetica, sans-serif;
                  }
                  
                  /**LINKS**/
                  #container a:link,#container a:visited  {
                  background:none;
                  text-decoration: none;
                  color: #645F48;
                  }
                  #container a:hover, #container a:active {
                  text-decoration: none;
                  color: #D12713;
                  }
                  
                  /**LAYOUT**/
                  .thrColFixHdr #container {
                  width: 1100px;
                  text-align: left; 
                  margin: 0 auto;
                  margin-bottom: 0;
                  } 
                  .thrColFixHdr #header {
                  margin:5px 0 10px 0px;
                  background-color: #C4BA8E;
                  top:5px;
                  width: 1100px;
                  }
                  /**CONSTRUCTION LAW**/
                  #CLtext {
                  float: right;
                  padding-right: 45px;
                  }
                  
                  .thrColFixHdr #mainContent {
                  float: left;
                  display:inline;
                  background-image: url(../mainParaBackground.png);
                  padding: 5px 0 0 30px;
                  margin: 10px 20px 0px 30px;
                  } 
                  #mainPara {
                  width:520px;
                  padding-top:2px;
                  }
                  .thrColFixHdr #sidebar1 {
                  float: left; /* width req'd on floats.*/
                  width: 200px;
                  margin-top:10px;     
                  }
                  .thrColFixHdr #footer {
                  padding: 0; 
                  background: url(../footerBackground.png) center bottom no-repeat;     
                  } 
                  /**TEXT STYLES**/
                  body,td,th {
                  font-size: 0.95em;
                  }
                  #mainContent p{
                  font: .80em/1.4em Arial, Helvetica, sans-serif;
                  }
                  #mainContent ul li {
                  font: .80em/1.4 Arial, Helvetica, sans-serif;
                  margin-bottom: 12px;
                  list-style: disc;
                  margin-left: -12px;
                  padding-left: 15px;
                  }
                  h1 {
                  color:#D42D27;
                  font: bold 1.3em/1.5em Arial, Helvetica, sans-serif;
                  margin-top: 12px;
                  padding: 6px;
                  }
                  h2 {
                  font-weight: bold;
                  font-size: 1.3em;
                  line-height: 1.3;
                  margin-top: 0px;
                  }
                  #copyright {font:0.75em/1 Arial, Helvetica, sans-serif; text-align:right;padding-right: 80px; padding-top:20px;}
                  
                  .note {
                  font:.80em/1.1 Arial, Helvetica, sans-serif;     
                  font-style: italic;}
                  
                  .pdftag {font: .85em/1.2 Arial, Helvetica, sans-serif; font-style:normal;display:block;}
                  
                  blockquote{
                  width:190px;
                  float: right;
                  background-color: #D1D2C1;
                  margin: 0;
                  padding: 0;
                  }
                  blockquote p {
                  color:#645f48;
                  text-align: left;
                  line-height: 1.3em;
                  font-size: 0.8em;
                  padding: 10px 15px 0 15px;
                  }
                  #footer p{
                  margin: 0; 
                  padding: 10px 0 5px 0; 
                  font-size:.9em;
                  text-align:center;
                  color:#C00;
                  }
                  /**MISC FLOATS AND CLASSES**/
                  .fltrt { 
                  float: right;
                  margin-left: 8px;
                  }
                  .fltlft {
                  float: left;
                  margin-right: 8px;
                  }
                  .clearfloat { 
                  clear:both;
                  height:0;
                  font-size: 1px;
                  line-height: 0px;
                  }
                  </style>
                  
                  <!--[if IE 5]>
                  <style type="text/css"> 
                  /* place css box model fixes for IE 5* in this conditional comment */
                  .thrColFixHdr #sidebar1 { width: 180px; }
                  </style>
                  <![endif]-->
                  
                  <!--[if IE]>
                  <style type="text/css"> 
                  /* place css fixes for all versions of IE in this conditional comment */
                  body {font-size: 76%}
                  .thrColFixHdr #mainContent { zoom: 1; }
                  /* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
                  </style>
                  <![endif]-->
                  
                  </head>
                  <body class="thrColFixHdr">
                  <div id="container">
                  
                  <div id="header"> <a href="http://www.mgmlaw.us/index.html"><img src="McGeelogohex485sm.png" alt="McGee Logo" width="113" height="109" border="0" style="position: relative; top:2px; float:left; padding-right:10px; padding-left:20px;" /></a> 
                  
                  <div id="CLtext">
                  <h1>Construction Law</h1>
                  </div> 
                  <h1>M. Gavin McGee<br />
                  Attorney at Law</h1>
                  <br class="clearfloat" />
                  
                  <div id="navbar"> 
                  <!--end nav -->
                  </div> 
                  <!--end header --> 
                  </div> 
                  
                  <div id="sidebar1">
                  <img src="constructionSite.jpg" width="180" height="94" alt="construction" /> 
                  
                  <img src="MCGEE_headshot.jpg" width="180" height="241" style="margin-top:10px" alt="M. Gavin McGee"  /> 
                  
                  <img src="CourtroomSmall.jpg" width="179" height="97" style="margin-top:10px"  alt="Roche-Bobois project" />
                  <!-- end #sidebar1 -->
                  </div>
                  
                  <blockquote><p>&quot;Gavin McGee is exceptionally popular with clients, owing to the expertise he gained through ten years of work as a project manager and estimator.&quot;</p>
                  <p>&quot;He can address all the facets of an issue as a result of his dual legal and industry training.&quot;</p>
                  <p>-Chambers USA 2008</p>
                  </blockquote>  
                  
                  <div id="mainContent">    
                  <div id="mainPara">
                  <h2>Practical advice from an attorney who has experienced 
                  your construction issues firsthand</h2>
                  <p>With over 20 years combined experience in construction management and construction law, Gavin McGee understands the issues facing today’s construction professionals, and can provide the legal advice you need to address them.</p>
                  <p>As a frequent speaker and writer on construction law topics, Mr. McGee maintains a depth of  information and resources on current legal issues affecting the construction industry. </p>
                  <p>This Houston-based practice focuses exclusively in the area of construction law, including:</p>
                  
                  <ul> 
                  <li>Dispute Resolution – Negotiating, mediating, or advocate for clients in arbitration and litigation of construction disputes between contracting parties. </li>
                  <li>Risk Management – Drafting, revising, reviewing, and negotiating construction contracts, subcontracts, purchase orders, and all manner of legal form documents for the construction industry.</li>
                  <li>Field/Management Training – Seminars conducted in-house for construction professionals at all levels.  Customized lecture series on issues including lien and bond claims (asserting and defending against), project documentation, common legal mistakes, contract documents and others.</li>
                  <li class="pdftag"><a href="#">Profile and CV</a>
                  <a href="#" target="_blank"><img src="PDF.gif" alt="PDF" width="26" height="28" border="0" style="padding: 0 10px 0 0;margin-top:-10px;margin-left:5px;"/></a></li>
                  </ul>
                  </div>
                  </div>
                  <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
                  <br class="clearfloat" />
                  <div id="footer" class="thrColFixHdr" >
                  <p>5909 West Loop South, Suite 550, Bellaire, Texas 77401 | 713.523.0400 | <a href="contact/mgmcgee+mgmlaw+us">
                  Click to email us</a></p>
                  <!-- end #footer -->
                  </div>
                  <!--begin copyright-->
                  <div id="copyright">&copy;2010 M. Gavin McGee PLLC
                  <!--end copyright -->
                  </div>
                  <!-- end #container -->
                  </div>
                  </body>
                  </html>
                  
                  

                   

                   

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

                  1 person found this helpful
                  • 6. Re: Bullets in ul align incorrectly in IE6
                    mshef534 Level 1

                    houstonalle, I love the background and the main content over the transparent white.  May I ask how you made that transparent?

                    • 7. Re: Bullets in ul align incorrectly in IE6
                      houstonalle Level 1

                      Sure, the body background image is the rolls paper. The main content div then has a background image (the translucent off-white) which goes behind the text. I made a square in an off white colour in Illustrator. I made the opacity a percentage of the colour (trial and error to get the amount of transparency desired) then saved it as a png. The png is inserted as a background image to that div.

                      • 8. Re: Bullets in ul align incorrectly in IE6
                        houstonalle Level 1

                        It did fix the bullet alignment in the test page http://www.mgmlaw.us/test.html, however, when I saved that page as ../IndexTest3.html and made the p width of that div narrower, it again shifted the bullets down and out of alignment.

                        • 9. Re: Bullets in ul align incorrectly in IE6
                          Nancy OShea Adobe Community Professional & MVP

                          You had & now have a float-drop problem in IE6.  This happens when the width of a main division or #wrapper is too narrow to accommodate widths on divisions (plus margins, padding & borders) inside it.

                           

                          Either increase width of #wrapper or decrease widths on #sidebars and #Content divisions.

                           

                          Good luck with your project,

                           

                           

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

                          1 person found this helpful
                          • 10. Re: Bullets in ul align incorrectly in IE6
                            houstonalle Level 1

                            Thanks, Nancy. I appreciate your help.