SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    FireFox vs IE Problems

    Hey everyone,

    I'm adding some things to my WordPress blog www.practicalebayselling.com at the top and I have it exactly the way I want it... in FireFox.

    If you check it out, you can see that the adsense is aligned with the content on top in FireFox, but falls underneath it, on the sidebar in IE.

    Any suggestions on how to fix it?

    Kenny,

    Also, why are the arrows, as list style images, not aligned in IE but are in FireFox?

  2. #2
    Guru Meditation Error gnarly's Avatar
    Join Date
    Dec 2003
    Location
    Cheltenham, United Kingdom
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm on a Mac right now, so I can't check your site in IE - looks fine in Camino though

    Generally though, these problems come down to IE (and sometimes the coder) failing to add things up correctly. Check and double check your widths, margin and padding and make sure they don't collectively add up to more than the space you've alotted to them. Try making everything a little bit narrower to see if that sorts it.

    Re: The list style images - it can be very tricky to get these to line up the same across browsers. I tend to use a background-image on the list item instead.
    Olly Hodgson
    thinkdrastic.net

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    I wrote a long post here telling you how to fix it but it seems to have disappeared

    The gist of it (because i haven't got time to go back and sort it all again) is that your left and right columns are 150px wide plus some extra margins which makes then about 307px wide (IIRC) and you have them nested in your sidebar which is only 280px wide! How is that supposed to work unless you are utilizing the 4th dimension.

    Make sure your basic mathematics is correct and account for margins . borders and padding. You may also want to add display:inline to any floats that you apply margins to to cure the double margin bug in Ie6 and under (see faq on floats).

    That change by itself won't fix the column because you have loads of invalid html.

    e.g. here:
    Code:
            </ul>
        </div>
        <br />
        <li>
            <h2>Recent Comments:</h2>
            <ul>
                <li><a href="http://www.practicalebayselling.com/ebay-selling/get-a-3100-start-on-your-ebay-business-16/" title="Get a $3100 Start on Your eBay Business, April 28, 2007">...</a>:  eBay's Number One Computer Selling Consultant</li>
                <li><a href="http://www.practicalebayselling.com/selling-info-products/5-ways-to-drive-traffic-to-your-website-using-ebay-28/" title="5 Ways to Drive Traffic to Your Website Using eBay, July 2, 2007">Great information, very useful. I...</a>:  Nancala</li>
                <li><a href="http://www.practicalebayselling.com/selling-info-products/5-ways-to-drive-traffic-to-your-website-using-ebay-28/" title="5 Ways to Drive Traffic to Your Website Using eBay, July 2, 2007">Excellent tips - particularly the...</a>:  The Old Vic</li>
                <li><a href="http://www.practicalebayselling.com/ebay-business/7-reasons-to-start-an-ebay-business-21/" title="7 Reasons to Start an eBay Business, June 14, 2007">That is all sound advice...</a>:  Chris Braithwaite</li>
                <li><a href="http://www.practicalebayselling.com/ebay-selling/3-more-ways-to-make-money-on-ebay-9/" title="3 More Ways to Make Money On eBay, January 18, 2007">Another way to make more money...</a>:  Eric Carlson</li>
            </ul>
        </li>
        <ul>
        </ul>
        </li>
    </div>
    <div id="footer">
    Remove all those tags marked in bold.

    There is much more like that in the page so run it through the validator as one missing or incorrectly placed tag can throw a layout out completely.

    e.g.More here:

    Code:
                </ul>
                <br />
                <div id="recent">
                <h2>Recent Entries:</h2>
                <ul>
                    <li><a href="http://www.practicalebayselling.com/selling-info-products/whats-to-come-with-practical-ebay-selling-45/" id="post-45">What’s to Come with Practical eBay Selling</a></li>
                </ul>
                <li><a href="http://www.practicalebayselling.com/research/auction-yen-on-youtube-39/" id="post-39">Auction Yen on YouTube</a></li>
            </ul>
            <li><a href="http://www.practicalebayselling.com/ebay-selling/salehoo-vs-world-wide-brands-38/" id="post-38">SaleHoo vs. World Wide Brands</a></li>
            </ul>
            <li><a href="http://www.practicalebayselling.com/ebay-selling/5-ways-to-find-what-to-sell-on-ebay-30/" id="post-30">5 Ways to Find What to Sell on eBay</a></li>
            </ul>
            <li><a href="http://www.practicalebayselling.com/selling-info-products/5-ways-to-drive-traffic-to-your-website-using-ebay-28/" id="post-28">5 Ways to Drive Traffic to Your Website Using eBay</a></li>
            </ul>
        </div>
    and here:
    Code:
            <div class="toprecent"> <img src="http://www.practicalebayselling.com/images/justin.jpg" />
                <ul>
                    <ul>
                        <ul>
                            <li><a href="http://www.practicalebayselling.com/selling-info-products/whats-to-come-with-practical-ebay-selling-45/" rel="bookmark" title="October 11, 2007">What’s to Come with Practical eBay Selling</a></li>
    Only list tags follow ul tags.

    e.g.

    Code:
       
       <ul>
      <li> content
        <ul><li>inner content </li></ul>
      </li>
    </ul>
    Nested uls start inside a list pair.

    That's about all i can remember from the last post but should keep you going for a while.

    Remember that valid code and making sure that things add up correctly is basic housekeeping and if you don't do this then there's no guarantee that anything will work correctly

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks for the response, and such a detailed response from PaulO'B (your CSS blog is awesome)

    I actually fixed it somewhat using a different approach. I was actually referring to the top part with the Just In and Reviews and adsense. Everything is lined up now, the only thing is the little arrows beside the list items in IE are slightly off.

    Thanks for the help

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    the only thing is the little arrows beside the list items in IE are slightly off
    As gnarly said the list-style-image is placed by the browser and you have no control over the position. Therefore I tend not to use it at all but to use a simple background image instead on the list which can be placed with pixel perfection cross browser. (Its not as semantic of course but until the browser can do it properly then its the best option. )

  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)
    Looks like you're using list-style-image which isn't that consistent cross browser.

    I always apply bullets to lists by removing the list style by using list-style-type: none; and then apply the bullet using background-image, no-repeat and a little bit of left padding to budge the text over as far as needed (You might also need to use background-position to budge the image down a bit).

    You'll achieve much more consistent positioning using this method as apposed to list-style-image
    Last edited by DaveWoods; Oct 15, 2007 at 14:13. Reason: Paul beat me to it


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
  •