SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question [IE/FF] Unwanted padding on LI-elements in Internet Explorer

    I am building a menu using a unordered list. But the problem I am getting is that in IE there is more padding around the li element then in FF.

    I have tried removing whitespace around the div's with class 'item', that doesn't help. Padding, margin and border are also set to 0 on all elements using:
    Code:
    * { padding:0; margin:0; border:0; }
    Does anyone know what I might be doing wrong?


    Here two screenshots demonstrating my problem:
    Internet Explorer:


    Firefox (this is where I wanna go in IE also):


    Here is the code that is use:
    HTML Code:
        <div id="menu">
          <div class="item one">
            <img src="site/images/menu/bg-one.jpg" width="142" height="100" alt="relaterende foto">
            <ul class="buttons">
              <li><a href="#">alle sporten</a></li>
            </ul>
          </div>
          
          <div class="item two">
            <img src="site/images/menu/bg-two.jpg" width="142" height="100" alt="relaterende foto">
            <ul class="buttons">
              <li><a href="#">tarieven</a></li>
              <li><a href="#">openingstijden</a></li>
            </ul>
          </div>
          
          <div class="item three">
            <img src="site/images/menu/bg-three.jpg" width="142" height="100" alt="relaterende foto">
            <ul class="buttons">
              <li><a href="#">agenda</a></li>
              <li><a href="#">evenementen</a></li>
            </ul>
          </div>
          
          <div class="item four">
            <img src="site/images/menu/bg-four.jpg" width="142" height="100" alt="relaterende foto">
            <ul class="buttons">
              <li><a href="#">foto's</a></li>
              <li><a href="#">babbelbox</a></li>
            </ul>
          </div>
          
          <div class="item five">
            <img src="site/images/menu/bg-five.jpg" width="142" height="100" alt="relaterende foto">
            <ul class="buttons">
              <li><a href="#">stress-out centrum</a></li>
              <li><a href="#">nieuwbouw</a></li>
            </ul>
          </div>
    CSS:
    Code:
    div#menu { }
        div#menu div.item {
          float: left;
          width: 142px;
          height: 135px;
          
          background-color: #536575;
        }
          div#menu div.item.one   { background-color: #a3ba51; }
          div#menu div.item.two   { background-color: #a85944; }
          div#menu div.item.three { background-color: #b9a67e; }
          div#menu div.item.four  { background-color: #536575; }
          div#menu div.item.five  { background-color: #289a99; }
          
          div#menu div.item img {
            width: 142px;
            height: 100px;
          }
            div#menu div.item.first img { width: 142px; }
          
          div#menu div.item ul {
            margin: 0px;
            margin-left: 5px;
            padding: 0px;
            
            list-style: disc inside none;
            
            border: 0px solid red;
          }
            div#menu div.item ul li {
              margin: 0px;
              padding: 0px;
              
              color: #ffffff;
              font-size: 10px;
              
              border: 0px solid purple;
            }
              div#menu div.item ul li a {
                color: #ffffff;
                font-family: Verdana;
                font-size: 10px;
                font-weight: bold;
                text-decoration: none;
              }
                div#menu div.item ul li a:hover {
                  text-decoration: underline;
                }

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you apply a line-height: 10px to your li then that should look much better.

    You should really be using % or em's for your font-size and for any line-height's etc that you are using so that your users can resize the font.

  3. #3
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that works like a charm! Thank you!

    I know about the em's. I have read about it but I don't think I know enough to really use it already, somewhere it still is a bit vaque to me. So that's why I still use the pixel method... I'll look into it again soon Thank you for your critics.

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad that sorted your problem.

    % and em's aren't too difficult especially if you're just concerned with the text size.... just try changing it to em's or % and by trial and error adjust it until it looks similar in size to the 10px you've currently got.

    Your site will look the same at 100% font but will also allow for other users to resize the font-size which obviously improves the accessibility of your site.

    You can obviously expand upon this and create sites that adjust the whole layout as a user adjusts the font-size but you should atleast try and make it so that text can be adjusted as a bare minimum in my opinion.

  5. #5
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok, I will try it out a bit..

    I only set a font-size in the body and then use font-size: 110%; in other parts right? This will work like that in all of the recent browsers(IE/FF/Safari)?

  6. #6
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not really, if you use absolute font-sizes anywhere then that element will be forced to stay at that size (unless you overright that with a percentage). Set your body font-size as a percentage (probably around 70%) and then if you need to vary from this you can overrule this for each element.

    Note, that headings in browsers render at slightly different sizes but then once you apply a size to that heading they should render the same.

    Most modern browsers do still allow text to resize whether you have used px or % but Internet Explorer doesn't so make sure you test it in IE.

    % and ems are supported by all modern browsers.

  7. #7
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I think I got it now Thank you.

    I set 11px in body and used a percentage in any other element. Is it correct I can use line-height as well with the font-size property? I mean that I can fill in a relative font-size there?

    So far it still works in IE great!

  8. #8
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't be specifying absolute (i.e. px or pt) fonts anywhere in your webpage (unless it's for print in which case you can use pt) as this means that you'd have to overwrite every element in the page for IE to be able to resize that element correctly.

    Set your bodysize as a % and then alter the percentage accordingly where you need to.

    For example set your body size to 65% and then where you need to have larger or smaller font's you can apply a different size accordingly.

    I hope that makes more sense?

  9. #9
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok, I changed it. I understand all, but it doesn't make sense in that, how does the browser know 65% of 'what'?

    Aren't you gonna rely on the browser when doing it that way, and hope that it has the same base-font-size as every other browser? In my mind I logically think that you need to declare 1 base font-size in a absolute unit. Then use a percentage on that?

    What do think about this?

  10. #10
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is exactly the point.... by doing it this way, you aren't making a decision for the user but instead saying that this should be 65% of the usual size you would view. (It just so happens that all modern browsers display a similar size anyway).

    If you specify the base font in pixels then this still won't work as Internet Explorer will simply take your base font size and then apply whatever % you have applied to other elements. It won't allow for you to resize the text. Just have a look at the page in IE and you'll see what I mean.

    Firefox lets you resize font size anyway even if you have specified it in px but as the majority of users are using Internet Explorer, you must obviously take them into consideration too

  11. #11
    SitePoint Member
    Join Date
    Nov 2005
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah ok, I understand now Thank you for your explaining and help! All works well now Very much appreciated!


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
  •