Blog not displaying correctly in IE6 - fine in Mozilla?

Discussion in 'HTML & Website Design' started by dallasditty, Apr 7, 2006.

  1. #1
    Sorry if this should be in the blog forum but anyway - I've spent quite some time in (Firefox) playing with the code (so my apologies to all experts out there) on an original blogger template for my site at: http://propertyinturkey.blogspot.com (I can't post a live link yet) andt thought I'd better check what it looked like in IE - disaster! The sidebar is a mess and I can't work out what code I've screwed up.

    Any help greatly appreciated!
     
    dallasditty, Apr 7, 2006 IP
  2. spainexpat

    spainexpat Peon

    Messages:
    125
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well, I'm trying your blogspot url there and it's not working.

    There's so many problems with IE sometimes I'd just rather give up. Instead I monetize it with google referrals, but whatever.

    Can you post a working link though?
     
    spainexpat, Apr 7, 2006 IP
  3. dallasditty

    dallasditty Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The URL I posted is correct - the site's display name is: 'Turkish Property Help, Finally' which is flagged on a Google search so I'm not sure why you can't get it but thanks for trying.
     
    dallasditty, Apr 7, 2006 IP
  4. dallasditty

    dallasditty Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I know it's not glamorous but any help much appreciated! See original post re: IE v. Mozilla display issues.
     
    dallasditty, Apr 7, 2006 IP
  5. vulcano

    vulcano Active Member

    Messages:
    418
    Likes Received:
    63
    Best Answers:
    0
    Trophy Points:
    68
    #5
    I am pretty much sure it depends on the width of either a picture like the one of Bitez Bay (try to lower the same) or when there are text passages that are indent stretching content, which both messes up IE and the right part showing up below. Try playing around, you should be able to get it fixed easely.
     
    vulcano, Apr 7, 2006 IP
  6. dallasditty

    dallasditty Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Thanks vulcano, will try tomorrow and let you know.
     
    dallasditty, Apr 7, 2006 IP
  7. brian394

    brian394 Well-Known Member

    Messages:
    226
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    108
    #7
    I sometimes encounter little nuisances like this. Your code looks one way in Mozilla and all other browsers and looks totally different in IE. What I usually do to fix it is to write two lines of CSS code. One line for IE, and another for all other browsers. To make IE process a line of css and make all other browsers ignore it you can prefix the line with a *. For example...

    margin-left: 10px;
    *margin-left: 5px;

    This *should* make the left margin 5px in IE and 10px in all other browsers. Or you can also type...

    margin-left: 5px;
    margin-left/**/:/**/ 10px;

    In this case IE will read the first command and ignore the second (so the left margin will be 5px in IE), but all other browsers will read and process both the first and second commands so the left margin will be 10px. Also you can do a search for...

    The demise of CSS hacks

    in Google to read an interesting article on MSDN about CSS hacks in IE.
     
    brian394, Apr 8, 2006 IP
  8. dallasditty

    dallasditty Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks very much for that, I understand the principle - there's even something just like that written by the original coder of my template. I'll try and play with the following sections:

    @media all {
    #sidebar-wrapper {
    display: inline; /* fixes a strange ie margin bug */
    float: right;
    margin: 0 3px 0 0;

    and....

    a.comment-link {
    /* ie5.0/win doesn't apply padding to inline elements,
    so we hide these two declarations from it */
    background/* */:/**/url(http://www.blogblog.com/thisaway_blue/icon_comment.gif) no-repeat 0 45%;
    padding-left: 14px;

    Unfortunately, this is all one big experiment for me - just an amateur I'm afraid!
     
    dallasditty, Apr 8, 2006 IP
  9. dallasditty

    dallasditty Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Vulcano, I tried your suggestions by reducing the width of the photo and removing some bulleted text but no joy I'm afraid.
     
    dallasditty, Apr 8, 2006 IP
  10. dallasditty

    dallasditty Guest

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Thanks to all here!

    It seems that it's a common problem with IE & Blogger. The Blogger help forums light up when you type in 'Sidebar problem'. It was an e-mail button causing the problem - too wide. Thanks Vulcano!
     
    dallasditty, Apr 8, 2006 IP