SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ie 7 adding space on left

    looks fine in Firefox, but in IE 7 this line (<div id="events">Events, Materials, and Seeker Informaton</div>) is moved over to the right.

    The problem happens after the end if the first </ul>

    Anyone know the IE hack for this one?

    Thanks for you help.


    markup:
    <div id="navigation">

    <span id="investigation">The following pages are offered for you further investigation/span><br />
    <span id="introduction">Introduction to MasterPath and the Light and Sound Teachings</span><br />
    <ul>
    <li id="cuttingedge"><a href="#">Light and Sound is the Cutting Edge of Spirituality</a></li>
    <li><a href="#">The Human Dilemna of the Honest Spiritual Seeker</a></li>
    <li><a href="#">Distinctions Between Prayer, Meditation, and Contmplation</a></li>
    </ul>
    <div id="events">Events, Materials, and Seeker Informaton</div>
    <ul>
    <li><a href="#">Video Clips of<br />Sri Gary Olsen</a></li>
    <li><a href="#">Introductory Materials</a></li>
    <li><a href="#">Calendar of MasterPath Meetings</a></li>
    </ul>
    </div>



    css:
    #navigation {
    background: #CFF;
    width: 620px;
    height: 190px;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    background-image: url('images/navline.gif');
    background-repeat: no-repeat;
    }
    #navigation #investigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11.5px;
    font-weight: bold;
    color: #009;
    pdding: 0;
    margin: 0;
    padding-top: 20px;
    line-height: 30px;
    margin-left: 10px;
    }
    #navigation #introduction {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #009;
    padding: 0;
    margin: 0;
    padding-top: 100px;
    margin-left: 15px;
    }

    #navigation #events {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #009;
    padding: 0;
    margin: 0;
    padding-top: 70px;
    padding-left: 0px;
    margin-top: 0;
    margin-left: 15px;
    }

  2. #2
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see you got margin-left: 15px on #navigation #events. If you remove that it will remove the space

    - Frederik

  3. #3
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the thought.

    The margin-left: 15px is needed to align with a backgroundd graphic. The IE problem is moving the test over much more than 15px.

    I believe it is a problem with how IE is interpreting the line after the first </ul>

  4. #4
    SitePoint Guru
    Join Date
    Nov 2005
    Location
    Norway
    Posts
    715
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you have a link to the whole code?

  5. #5
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With the code you have provided, the result is the same in FF and IE7 (and IE6 except for the height of #navigation)

  6. #6
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I solved my problem the long way by setting up a separate div for each half of my nav. Each half is produced by an unordered list. Seemed that text wrapped funny after the </ul> so I terminated the div (</div>) and started and new div with a new unordered list.

    I have a horizontal menu so the ul is display: inline. Is that why anything I put after the </ul> doesn't wrap?

  7. #7
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the height differece in IE6 form FF the extra (+) 3px?

  8. #8
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Horizontal menu ???? Inline display ??? NONE of that is present in the code you gave above ........ The code you gave produced two vertical lists, which hung out the bottom of the #navigation container in FF and IE7.....


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
  •