1 Replies - 3830 Views - Last Post: 14 March 2010 - 09:30 PM

#1 gretty  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 123
  • Joined: 25-May 09

UL Left Margin too Large in FireFox

Posted 14 March 2010 - 08:46 PM

Hello

I have a problem with displaying an Unordered List in my webpage. It is supposed to be displayed inside a div & it should float to the left with a left margin of 0px.

But for some reason when I display my page in Firefox, the unordered list is inside the div but with a left margin of about 20px. If I open my page in IE, then the UL has the correct left margin. This is an assignment & its supposed to be made specifically to run just in Firefox so I really need some help with this.

Can you help me get my UL to sit with a left margin of 0px inside my div?

Here is the UL & div CSS code that is relevent:
/* The unordered list below should be shown inside the '#menu' container the the left but it appears as there is like a 20px left margin? */
#menu {float:left; text-align:left; background-color:#646454; margin-left:0px;}
#menu ul {float:left; width:100px; margin-left:1px; }
/*#menu li  {padding:6px; width:100%; height:100%; margin-left:0px; border-color:#35351D; border-width:2; border-style:solid;}
#menu a:link   {background-color:#646454; color:#8AE62E; text-decoration:bold; font-size:1.05em; margin-left:0px; }
#menu a:hover {color:#E8FAD5; background-color:#003300; margin-left:0px; }*/


And here is the full CSS code, incase something else is causing the problem:
body {background-color:#595930; margin-left:20px; margin-right:20px; color:black; font-size:14; 
     font-family:"Tahoma","Arial","Serif";}

h1         {background-image:url();}	 
h2, h3 {float:left; margin:2px; background-color:#646454; width:500px; } /*margin-left:290px;*/
ul         {list-style-type:none; overflow:hidden;}
li          {float:left;}

a:link       {color:#94FF70; }
a:visited {color:#85855C; }
a:active   {color:#669900;}
a:hover     {color:#99FF33;}

#container {}
#header {text-align:right; }

/* The unordered list below should be shown inside the '#menu' container the the left but it appears as there is like a 20px left margin? */
#menu {float:left; text-align:left; background-color:#646454; margin-left:0px;}
#menu ul {float:left; width:100px; margin-left:1px; }
/*#menu li  {padding:6px; width:100%; height:100%; margin-left:0px; border-color:#35351D; border-width:2; border-style:solid;}
#menu a:link   {background-color:#646454; color:#8AE62E; text-decoration:bold; font-size:1.05em; margin-left:0px; }
#menu a:hover {color:#E8FAD5; background-color:#003300; margin-left:0px; }*/

#query-form {float:right; text-align:right; }
#search         {font-size:0.8em; font-family:"Tahoma","Arial","Serif"; color:gray; }
#query-box   {color:#7A7A00; width:80%; }
#query-box:hover     {background-color:#292900;}
#content-container {margin-left:100px; text-align:center; }

#index                  {float:top; margin-left:450px; }
#index li               {display:inline; }
#index a:link     {padding:3px; width:100% height:100%; color:#8AE62E; background-color:#646454; }
#index a:hover   {color:#E8FAD5; background-color:#003300; }
#index a:active {background-color:darkblue; }
#index a:visited {background-color:brown; color:magenta; }

#content {}
#research-center {}
#events {}
#day {}
#time {}
#building {}
#room {}
#table-events {}
#research-area {}
#info-research-area {float:left; width:100px; height:400px; overflow:auto;}
#comments {}
#news {float:right; width:100px; height:400px; overflow:auto;}
#news-intro {}
#news-item   {}
#footer         {}

span.clt               {}
span.lt                 {font-style:italic; font-size:1.05em; }
span.lt:hover     {color:gray; font-size:1.06em; }
span.clt-abbrev {color:blue; }
span.conference {color:blue; }
span.workshop     {color:blue; }
span.paper           {color:blue; }
tr.alt                    {color:#AEAE99; background-color:#5C5C33;}




And the HTML page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
  
<head>
     <title> Welcome to the Centre for Language Technology </title>
      <link rel="stylesheet" type="text/css" href="clt.css"> 
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>

  <div id="container">
  

    <div id="header">
      <h1> <span class="clt">Centre for <span class="lt">Language Technology</span></span> </h1>
    </div>


    <div id="menu">
      <ul>
        <li><a href="#">Macquarie Home</a></li>
	  <li><a href="#">Course Handbook</a></li>
	  <li><a href="#">Library</a></li>
	  <li><a href="#">Campus Map</a></li>
        <li><a href="#">Macquarie Contacts</a></li>
        <li><form id="query-form" name="query-form" action="" method="get"> 
              <span id="search">Search Site:</span>
              <input id="query-box" name="q" value="" size="20"> 
              <input type="submit" value="Submit">
            </form></li>
      </ul>
    </div>


    <div id="content-container">

      <div id="index">
  	  <ul>
	    <li><a href="#"><span class="clt-abbrev">CLT</span> Home</a></li>
	    <li><a href="#">Information</a></li>
	    <li><a href="#">Teaching</a></li>
	    <li><a href="#">Research</a></li>
          <li><a href="#">People</a></li>
	  </ul>
      </div>


      <div id="content">

        <div id="research-center">
        <h2> <span class="clt">Centre for <span class="lt">Language Technology</span></span> </h2>
           
          <p>Located in Sydney, Australia, Macquarie University's <span class="clt">
             Centre for <span class="lt">Language Technology</span></span> (<span class="clt-abbrev">CLT</span>)
             is Australasia's largest and longest-established body of researchers working in 
             natural language processing, computational linguistics and language technology. 
             We have a well-developed infrastructure for carrying out research and teaching 
             in these areas, and welcome approaches from students or visitors interested in 
             working with us. We also frequently have employment opportunities available on 
             research projects.</p>
         </div>

         <div id="events">
         <h3> <span class="clt-abbrev">CLT</span> Events </h3>

           <p>The <span class="clt-abbrev">CLT</span> holds weekly discussion seminars with 
              speakers drawn from amongst the group members and visiting researchers - all 
              students are invited to join these meetings. Seminars usually take place on 
              <span id="day">Mondays</span> at <span id="time">11am</span> in 
              <span id="building">Building E6A</span>, <span id="room">Room 202</span>.</p>
  
           <table id="table-events">
             <thead>
               <tr>
                 <th>Date</th>
                 <th>Speaker</th>
                 <th>Topic</th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td>February 22</td>
                 <td>Diego Molla </td>
                 <td>NLP Challenges for Evidence Based Medicine</td>
               </tr>
               <tr class="alt">
                 <td>March 1</td>
                 <td>Ben Hachey </td>
                 <td>Explainable Text Mining </td>
               </tr>
               <tr>
                 <td>March 8 </td>
                 <td>Mark Johnson </td>
                 <td>Parsing Speech Corpora </td>
               </tr>
               <tr class="alt">
                 <td>March 15</td>
                 <td>Robert Dale </td>
                 <td>Automating Proofreading </td>
               </tr>
               <tr>
                 <td>March 22</td>
                 <td>Pawel Mazur </td>
                 <td>Processing Temporal Expressions </td>
               </tr>
               <tr class="alt">
                 <td>March 29</td>
                 <td>Matthew Honnibal </td>
                 <td>Exploiting Morphology in English Statistical Parsing </td>
               </tr>
               <tr>
                 <td>April 5 </td>
                 <td>Ilya Anisimoff </td>
                 <td>Hesitation Modelling </td>
               </tr>
                 <tr class="alt">
                 <td>April 12</td>
                 <td>Andrew Lampert </td>
                 <td>Detecting Emails Containing Requests for Action Speaker </td>
               </tr>
             </tbody>
           </table>
         </div>


         <div id="research-area">
         <h3> What is <span class="lt">Language Technology</span>? </h3>

           <p><span class="lt">Language Technology</span> (<span class="lt-abbrev">LT</span>) is 
              the late 1990s outgrowth of 40 years of research 
              into natural language processing, a subfield of artificial intelligence. 
              <span class="lt-abbrev">LT</span> is concerned with the computational processing of 
              human language, whether 
              in spoken or written form, and with the dual aims of easing both interaction 
              with machines and the processing of large amounts of textual information. This 
              translates into applications such as spoken language dialog systems, intelligent 
              Internet search engines, machine translation and automatic text summarisation.</p>
 
           <p><span class="lt">Language Technology</span> is widely recognised as constituting 
              the next major challenge for computing:</p>

             <ul>
               <li>With the business desktop saturated, the ability to communicate easily with 
                   intelligent handheld devices and appliances in the home becomes a priority. 
                   This requires sophisticated natural language processing as well as speech 
                   recognition. </li>
               <li>At the same time, business desktop users need language technology too: for 
                   example, the explosion of information on the Internet requires sophisticated 
                   techniques for processing text and documents to extract meaning.</li>
             </ul>

           <p>These drivers make language technology a critical technology for the 21st century.</p>
         </div>

           
         <div id="info-research-area">
         <h3> Further Information about <span class="lt">Language Technology</span> </h3>

           <p>To find out more about <span class="lt">Language Technology</span>, a good place 
              to start is by browsing  this site. You can also consult the following:</p>

             <ul>
               <li>A leaflet about 
                   <a href="http://web.science.mq.edu.au/files/file/CLT/CLTLeaflet.pdf"><span class="lt">
                   Language Technology</span></a>, 
                   its applications, and the undergraduate units on offer by the <span class="clt">Centre for 
                   <span class="lt">Language Technology</span></span>.</li>
               <li>The site of the Australasian Language Technology Association 
                   (<a href="http://www.alta.asn.au/">ALTA</a>). It contains a mailing list and further 
                   information about language technology in Australia and New Zealand.</li>
               <li>A <a href="http://cslu.cse.ogi.edu/HLTsurvey/HLTsurvey.html">Survey of the State of 
                   the Art in Human Language Technology</a>. You can get a feel for the broad range of 
                   issues addressed in language technology research by browsing the contents of this 
                   online survey.</li>
             </ul>
         </div>

      
         <div id="comments">
           <p>We hope you find our web site interesting and useful. If you have any comments, please
              <a href="mailto:ltinfo@ics.mq.edu.au">mail us</a>.</p>
         </div>

       </div> <!-- close div id="content" -->

		
       <div id="news">			
       <h3>News</h3>

         <div id="news-intro">
           <p>Got some news about <span class="lt">Language Technology</span>?</p> 
           <p><a href="mailto:ltinfo@ics.mq.edu.au">Let us know</a>!</p>
         </div>

         <div class="news-item">
         <h4> 22/02/2010 </h4>

           <p>Ben Hachey is co-organising the <span class="conference">NAACL 2010</span>
              workshop <span class="workshop">Computational Linguistics 
              in a World of Social Media</span>, Los Angeles, 5-6 June.</p>
         </div>

         <div class="news-item">
         <h4> 20/02/2010 </h4>

           <p>Jette Viethen, Simon Zwarts and Robert Dale have a paper accepted at 
              <span class="conference">LREC2010</span>, Malta, 
              17-23 May, with title <span class="paper">Dialogue Reference in a Visual Domain</span>.</p>
         </div>

         <div class="news-item">
         <h4> 27/01/2010 </h4>

           <p>Andrew Lampert, Robert Dale and Cecile Paris have a paper accepted at 
              <span class="conference">NAACL 2010</span>, 
              Los Angeles, 2-4 June.</p>
         </div>

         <div class="news-item">
         <h4> 26/01/2010 </h4>

           <p>Mark Johnson, previously of Brown University, has joined Macquarie&rsquo;s Centre 
              for Language Technology as of the beginning of 2010. Drop by to a Monday morning 
              group meeting and say hello!</p>
         </div>
       </div> <!-- close div id="news" -->

     </div> <!-- close div id="content-container" -->

     <div id="footer">
       &copy; <span class="clt">Centre for <span class="lt">Language Technology</span></span>, 
       Macquarie University, 2010
     </div>

   </div>   <!-- close div id="container" -->

</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: UL Left Margin too Large in FireFox

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 4319
  • View blog
  • Posts: 12,101
  • Joined: 18-April 07

Re: UL Left Margin too Large in FireFox

Posted 14 March 2010 - 09:30 PM

Simply add a padding-left: 0px to your UL definition to remove that left margin padding.

ul { list-style-type:none; overflow:hidden; padding-left: 0px; }



Btw, I saw no difference when viewing in IE 8 so if you saw it fixed in a version of IE prior to 8 it is was probably because of some quirk or something.

This will adjust the padding on the left that the UL is creating for your list options. This will cause your LI elements to sit flush left against its containing div. Hopefully that is what you were looking to do. :)

This post has been edited by Martyr2: 14 March 2010 - 09:32 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1