IE image gap and content "push" issues

Discussion in 'Web Design and Development' started by 124151155, Apr 6, 2010.

  1. 124151155 macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #1
    Hi,
    I'm working on a website which will hopefully be going live very soon. I've had most of the IE issues fixed there there are still a few that are lingering on.

    The first is: the header image is made up of of two images (one in the css and one in the html) which sit together and appear as the header. In IE 7 and below there is a gap in between this images - this also happens in the footer but the gap is much smaller (1 or 2 pixels). Here's a picture of what's going on:
    [​IMG]
    The site can be accessed at http://dev.trapdoor.cbdweb.net/.

    The second is: In IE 6 only, the whole content of the home page (but not other pages...) gets pushed downwards. Here's a picture:
    [​IMG]

    Not vital but i've also noticed that IE 7 and under are not displaying the link colours as I specified them in the css - they are displaying the default colours... they are define in my css as a:hover{colour:red} etc... Should I be more specific for ie? Like, p a:hover or body p a:hover? This one's not exactly a show stopper... as long as the site can be read.

    Also, does anybody know of a good IE PNG hack? I've tried this one and had no luck (It made all the PNGs in the CSS invisible and did nothing to those in the HTML).

    Any help is greatly appreciated :) The site can be accessed here.

    Thanks,

    Tim.
     
  2. aerta macrumors newbie

    Joined:
    Apr 7, 2010
    #2
    IE probs

    Your big gap looks like the infamous IE double margin bug.

    When you left float a container and give it left margin, IE6 will erroneously double the margin width. So if my container is 600 pixels with a 10px margin, IE6 will display the magin as 20px margin. The same is true for right float + right margin.

    One solution that normally works is to use padding instead of margin to get your white space.

    #container6 { background-color: #e3e4db; text-align: left; margin-top: 16px; margin-left: 40px; width: 611px; height: auto; float: left; margin-bottom: 20px; }

    change to...

    #container6 { background-color: #e3e4db; text-align: left; padding-top: 16px; padding-left: 40px; width: 611px; height: auto; float: left; padding-bottom: 20px; }

    then

    #container5 { background-color: #e3e4db; text-align: right; top: 98px; left: 701px; margin-top: -26px; margin-right: 42px; width: 137px; height: auto; float: right; margin-left: 16px; }

    #container5 { background-color: #e3e4db; text-align: right; top: 98px; left: 701px; margin-top: -26px; padding-right: 42px; width: 137px; height: auto; float: right; padding-left: 16px; }
     
  3. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #3
    You could also try changing your container box to using CSS3 rounded corners, In IE9, Firefox, Safari, Chrome, Opera the box will have rounded corners, gradients, shadows, etc if you please.

    <IE8 will see square corners.
     
  4. stndn macrumors member

    Joined:
    Oct 22, 2006
    Location:
    earth
    #4
    When I tried to validate your webpage, and got some errors. Try to fix that and see if it helps.

    Also, for the link color, you need to put the rule in an a and not a:hover, since the later will only work on hover state, and not by default.

    For a:active and a:visited links, you don't need to explicitly specify inherit since they will inherit from the default a rule (specify above).


    -stndn.


    Edit: Btw, the Username and the Member number text got cut off in the textbox fields. See attachment. Browser is SeaMonkey 2.0.4, on OS X Leopard.
     

    Attached Files:

  5. 124151155 thread starter macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #5
    Neither of the two images have any padding or margins... I tried adding margin:0px;padding:0px; to the image in the html but had no luck... ANy other ideas?

    Thanks.
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    For #leftcontainer try using position: absolute rather than relative. I don't have time to try it out in IE6, but the fix will likely deal with messing with the position and/or float properties of the left/right containers.
     
  7. 124151155 thread starter macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #7
    I'm not sure I really understand you... I want to change all the link states (link, hover, active, visted...) not just a standard link...

    Thanks for pointing out the login box problem... That happened across all browsers. The login box was causing a lot of problems so I've switched to a different one. Thanks =)

    Thanks.
     
  8. 124151155 thread starter macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #8
    Ah, this works... Well, sort of. Doing this moves up the article to where it should be but it makes the content of the side menu disappear...

    This is the template I used for the columns, btw. I thought that might help.
    http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm
     
  9. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #9
    Switch to a strict doctype (either html 4.01 or XHTML-preferred). Transitional just sends IE into quirks mode.
     
  10. 124151155 thread starter macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #10
    Thanks for the suggestion 7on...
    Unfortunately changing the doctype to strict doesn't change anything visually, except the image gap problem then spreads to all other browsers too =/

    Any other ideas?
     
  11. 7on macrumors 601

    7on

    Joined:
    Nov 9, 2003
    Location:
    Dress Rosa
    #11
    Well it's not magic. It makes everything consistent, meaning once you fix that image gap it should fix in all browsers. Taking away that table would be a good start.

    And IE6 doesn't work with @imports
    <style media="screen" type="text/css">@import "/templates/nineteensixtyfive/css/template.css";</style>

    try linking to that to see if that helps (and if you're @importing to serve something different to IE, change your doctype and you won't need to ;) )
     
  12. stndn macrumors member

    Joined:
    Oct 22, 2006
    Location:
    earth
    #12
    If you want to change all the link states, use this rule
    a { color: #f00; }

    If specific states, use the ones you had before
    (can't seem to find it now. did you update your code?)

    -stndn.
     

Share This Page