Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    15
    Thanked 0 Times in 0 Posts

    Question Bulleted List CSS Problem in IE7

    Hi,

    I am working on customizing a template for someone here:
    http://www.ideaessence.com/mullaneylawoffices/

    In Internet Exploder 7, the square bullets are not showing up. It looks exactly how it should in Firefox. I want to make it look just how it does in Firefox now, but in Internet Exploder as well. First, I searched and thought it was an issue with the CSS for the actual elements directly involved. I thought for sure I found the problem in this thread:
    http://codingforums.com/showthread.php?t=140138

    Here's the strange thing. I kept changing things to add a margins/padding but it didn't work no matter what I did. Then I copied and pasted the HTML of the unordered list and the corresponding CSS into a separate page. I also copied and pasted the DIV called "left-nav" and its corresponding CSS into the separate page. Here is what I copied, pasted, and opened:
    Code:
    <!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">
    
    <style type="text/css">
    #left-nav
    {width:220px; float:left;}
    
      .leftlinks{
      width:150px;
      float:left;
      }
    .leftlinks ul
    {
    list-style-type: square;
    text-align: left;
    width: 100%;
    padding-top: 2px;
    }
    .leftlinks ul li{
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E8D9BD;
    margin: 0;
    }
    .leftlinks ul li a
    {
    text-align: left;
    padding-left: 5px;
    font-size: 12px;
    letter-spacing:1px;
    text-decoration: none;
    color: #4E4739;
    }
    .leftlinks ul li a:hover
    {
    color: #4E4739;
    padding-left: 5px;
    text-decoration:underline;
    font-weight:bold;
    }
    </style>
    
    <div id="leftnav"><div class="leftlinks">
    
    <ul>
     <li><a href="#">Areas of Practice</a></li>
     <li><a href="#">Estate Planning</a></li>
     <li><a href="#">PA Estate Administration</a></li>
     <li><a href="#">Why Have a Will?</a></li>
     <li><a href="#">Medicaid</a></li>
     <li><a href="#">Funeral Pre-Planning</a></li>
     <li><a href="#">Federal Estate and Gift Taxes</a></li>
     <li><a href="#">PA Inheritance Tax Rates</a></li>
     <li><a href="#">Title Insurance</a></li>
     <li><a href="#">Meet the Staff</a></li>
    </ul>
    
    </div></div>
    
    </html>
    When I opened the separate page, it looked perfect in both Internet Exploder and Firefox, just how I want it. I am guessing this means that the issue must be arising from the CSS or size of something it's surrounded in? I can't figure out what I need to actually write in order to fix this.

    Does anyone know how how to fix it so it looks identical in both Internet Exploder and Firefox?

    Thanks for any help.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello ideaessence,
    Try removing the width on the ul to make room for the bullet -
    Code:
    .leftlinks ul
    {
    list-style-type: square;
    text-align: left;
    /*width:100%;*/
    padding-top:2px;
    }
    Maybe even better, put the bullet inside the 100% width then margin it away from the side of the containing .leftlinks
    Try this -
    Code:
    .leftlinks ul
    {
    list-style: square inside;
    text-align: left;
    width:100%;
    padding-top:2px;
    margin: 0 0 0 5px;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    15
    Thanked 0 Times in 0 Posts
    Hi,

    Thanks for the reply. I have tried both suggestions. Both of them are a great start but raise a new challenge.

    First suggestion: Removing the 100% width revealed the bullets but the text ran down 2 lines tall for most of the links and the width of each was small. But I did realize something while experimenting with it. I knocked the width down to 90% and the bullets still didn't show. I knocked it down to 50% and the bullets didn't show. I even knocked the width down to 1% and the bullets still didn't show. I wondered if it was just specifying a relative width that caused the bullets to not show up, made the width 1px. The bullets didn't show. So, specifying any width whatsoever makes the bullets not show.

    Second suggestion:
    The link list shows up too far to the left in Internet Explorer and too far to the right in Firefox. I have re-uploaded the page with the second code suggestion you posted:
    http://www.ideaessence.com/mullaneylawoffices

    It's definitely a lot closer to being fixed. Now there's only some type of inconsistent alignment issue. Also, it is not as wide as it was by about 4 or characters in width. Is case this help, here is the separate page I made where it looks perfect in both browsers:
    http://www.ideaessence.com/mullaneylawoffices/test.html

    Thanks again.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Looks like your seeing the difference in defaults between browsers.
    Try changing your padding to look this bit highlighted in red -
    Code:
    .leftlinks ul
    {
    list-style: square inside;
    text-align: left;
    width:100%;
    padding: 2px 0 0 0;
    margin: 0 0 0 5px;
    padding: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    ideaessence (01-09-2010)

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    15
    Thanked 0 Times in 0 Posts
    It's yet even closer now. When I made that change, it set the alignment in both browsers to all the way to left, so that part is consistent now. I adjusted the left margin value from 0 to 23px and got that part good. Now there's just 1 thing left, the width. It is not wide enough in Internet Exploder. Normally, I would just think to change the width and see what happens, but the width is already at 100%. I have uploaded the updated page here again:
    http://www.ideaessence.com/mullaneylawoffices/

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    To counter defaults like that, I always add a reset at the top of my CSS.

    Some people advise against this global reset and suggest you deal with each conflict directly. I'm kind of on the fence about it, I've been using the reset long enough I'm aware how widespread it's affects can be.

    Anyway, like I said, I always use this or some version thereof -
    Code:
    * {
    margin: 0;
    padding: 0;
    border: 0;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by ideaessence View Post
    It's yet even closer now. When I made that change, it set the alignment in both browsers to all the way to left, so that part is consistent now. I adjusted the left margin value from 0 to 23px and got that part good. Now there's just 1 thing left, the width. It is not wide enough in Internet Exploder. Normally, I would just think to change the width and see what happens, but the width is already at 100%. I have uploaded the updated page here again:
    http://www.ideaessence.com/mullaneylawoffices/
    To show what's happening now, put a background color or .leftlinks and look at it in the two different browsers.
    Code:
      .leftlinks{
      width:150px;
      float:left;
    background: #f00;
      }
    To fix the issue, adjust that width:150px to whatever actually fits the size of your li's.

    OR... take another look at .leftlinks and decide if it's really needed at all. You could easily just eliminate it and style the ul itself.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Jan 2010
    Posts
    33
    Thanks
    15
    Thanked 0 Times in 0 Posts
    I haven't done anything for a while, but that universal selector brings back memories. I do remember using that universal selector to truncate everything whenever I made a layout from scratch. People advised against it but I don't remember anyone presenting any satisfying reason to me for why I shouldn't use it.

    For this page, that didn't solve the issue but I think the post after that will lead to a solution. That color change explanation shows me what's going on now, so I think that should be good enough for me to trial and error until I narrow down what's causing it. Thanks so much!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •