SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 ie7 issues - vertical space issues in general

    Hello,

    Can I have your help here please:

    On Mac OS X 10.6.3 - running IE 7 with wine;

    http://lab.webhs.pt/webhs_testes/apregi/Home.php
    http://lab.webhs.pt/webhs_testes/apregi/Css/Main.css


    1) Issue one:
    On the left main menu, I was getting inconsistent results between li space, due to the browsers different white space interpretation between li's with inline elements inside (so I believe);

    In order to solve this, I have added with following selector, the display:block; property, like so: (line 213 more or less)

    Code CSS:
    (...), #navegacao-principal-home ul li a img
    {
      display:block;
    }

    Once I did this, the white space was removed on FF 3.6.3 (mac), Safari 4.05, Opera 10.10 but in IE 7, I just got a very big space between LI items that I cannot identify due the lack of tools for this very experimental IE7 version running in mac.
    Any clue in order to solve it?


    2) Issue two:
    On IE7 as well, I'm getting a very large vertical space difference between the content and the footer, the intended result is to render it, more or less, with the same space difference as it appears on other modern browsers like the listed above.

    3) Issue three:
    On the h2 inside the header element, in IE7 we get no white space like we get on other browsers. I'm inclined to apply yet another display:block; to the image inside this h2 element as well, and define a margin value, but I'm just wondering, all this display:block; here and there... hmm... isn't there a simpler/cleaner solution?

    Any other comments you might find worthy?

    Thanks in advance,
    Márcio

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I see you are using html 5.

    For the first problem you can float that image to kill the whitespace bug in IE7.
    Code:
    (...), #navegacao-principal-home ul li a img
    {
        float:left;
    }
    Let me look further at the other questions.

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    After looking through that first issue again, setting a float on the li img will require the li to be floated also. Then the ul would need to contain it's floats.

    An easier way would be to use display:inline-block to set haslayout for IE7. Then you would only need to give it a v-a:bottom for good browsers.

    Code:
    #navegacao-principal-home header img, #navegacao-principal-home ul li a img /*issue may be here*/
    {
        /*para remover as inconsistências com li white space cross-browser;*/
        display:inline-block;
        vertical-align:bottom;
        
    }

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Her are my final conclusions on the first two issues.

    1)
    Set display:block on the "li" so you can set a height equal to the "a" image height. Then use display:inline:block; with v-a:top for good browsers.

    Code:
    #navegacao-principal-home header img, #navegacao-principal-home ul li a img /*issue may be here*/
    {
        /*para remover as inconsistências com li white space cross-browser;*/
        display:inline-block;/*kill IE7 whitespace*/
        vertical-align:top;/*good browsers need v-a:top with height on "li"*/
        
    }
    
    #navegacao-principal-home ul
    {
        list-style-type:none;
        padding-left:1.8em;
    }
    
    #navegacao-principal-home ul li
    {
        margin-top:25px;
        /*background:red; test bg color*/
        display:block;
        height:20px;/*image height*/
    }
    2)
    Set haslayout on the footer for IE7 and then move the #a-apregi bottom margin to the top of the #conteudo-principal-home nested floats.

    Code:
    footer
    {
        clear:both;
        background:lime; /*test BG color*/
        min-height:0;/*IE7 haslayout*/
        padding-top:4em;
        margin-right:3.37em;
        /*float:right; - nao posso ter isto*/
    }
    
    V
    V
    V
    
    #a-apregi
    {
        /*margin-bottom:1.6em; set as top margin on floats*/
    }
    
    #a-apregi p a img
    {
        margin-left:.7em;
    }
    
    #o-que-e-alojamento-web
    {
        clear:left;
        float:left;
        width: 15em;
        margin-right:3.25em;
        margin-top:1.6em;/*replace bottom margin on #a-apregi*/
    }
    
    #o-que-e-alojamento-web span, #o-que-e-dominio span
    {
        text-decoration:underline;
    }
    
    #o-que-e-dominio
    {
        width: 15em;
        float:left;
        margin-top:1.6em;/*replace bottom margin on #a-apregi*/
    }

  5. #5
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much.

    Can I please ask, how have you found that the footer was the one that was not having hasLayout triggered ?

    I'm on IE7 via wine very instable on mac. As a result, I cannot have any ie7 plugins installed. But probably you have used other method to find it?


    Thanks in advance,
    Márcio

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Rayzur

    Just to share: I always want to avoid giving widths and heights as possible, so that the content could decide about that.

    1)
    I've end up founding this:
    http://www.456bereastreet.com/archiv...t_items_in_ie/

    And having an image or text, doesn't play a role, so this will work for both.

    So here were the steps taken:
    a) leave the css for good browsers intact.
    b) create a conditional css for later IE 8 and apply:

    Code CSS:
    #navegacao-principal-home ul li a {display:inline-block;}
    #navegacao-principal-home ul li a {display:block;}

    2)
    zoom:1; applied on the conditional comment as suggested. (the question about, how you found it still applies).

    3)
    It was not a real issue. Rather a browser interpretation of the heading elements. The best bet (on those cases were we use img instead of a text replacement technique for example), would be give display:block on those heading elements containing images, and declare a margin or padding for consistent results cross-browser.

    @all
    4)
    Wasn't there, but using js for hovering when css sprite technique will do it really fine, seems to be not appropriate. Should change that as well.

    Note: Credit for those conclusions should be given to Tim Snadden as well.



    I'm making my efforts to use proper markup and css organization. If something doesn't make sense on your eyes, please shared it with me.


    Thanks a lot,
    Márcio

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oikram View Post
    Thank you very much.

    Can I please ask, how have you found that the footer was the one that was not having hasLayout triggered ?
    Hi,
    I ran your files on my local machine while testing in IETester for windows. I was also using a native copy of IE8 in IE7 mode.

    Setting haslayout on the footer was just one of the things I did while testing and it straightened things out.

  8. #8
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rayzur View Post
    Setting haslayout on the footer was just one of the things I did while testing and it straightened things out.
    So, some reason must have guide you to change something on the footer element and not somewhere else on the document.

    Should we just trigger hasLayout around the elements that soround or IE gaps?


    Thanks again,
    Márcio

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by oikram View Post
    @Rayzur

    Just to share: I always want to avoid giving widths and heights as possible, so that the content could decide about that.
    Good for you but bad for IE unfortunately

    I always apply widths to any complicated containers (containers that hold more than simple text) where possible and fix haslayout bugs at source and without hacks.

    1)
    I've end up founding this:
    http://www.456bereastreet.com/archiv...t_items_in_ie/

    And having an image or text, doesn't play a role, so this will work for both.

    So here were the steps taken:
    a) leave the css for good browsers intact.
    b) create a conditional css for later IE 8 and apply:

    Code CSS:
    #navegacao-principal-home ul li a {display:inline-block;}
    #navegacao-principal-home ul li a {display:block;}
    All that code is doing is giving IE haslayout which could have been done by giving the element a width and not using any hacks. Alternatively just use the proprietary zoom instead.

    However in my experience haslayout on its own does not cure all the whitespace bugs in lists and the only 100% reliable way is to float the elements (list and anchor) (but that would mean defining explicit widths for both). It's a little more complex and confines you to dimensions but if you want pixel perfection then it is pixel perfect.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,372
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by oikram View Post
    .

    Should we just trigger hasLayout around the elements that soround or IE gaps?

    Márcio
    Any container that holds more than simple text must have a layout in ie6 (and frequently IE7) or all bets are off.

    There is a section in the Sitepoint reference on haslayout that you might find useful.

  11. #11
    SitePoint Wizard
    Join Date
    Feb 2009
    Posts
    1,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot. I was aware of hasLayout thing on IE - but I will sure have read on that to.

    It's true that having those hacks is a nasty thing and sometimes width will do just fine.
    Probably min-width will be a nice middle virtue? If we can find one on css?
    I will try to avoid but, not at any cost, after reading your reply.

    However, since the site will have more floats here and there, I believe a css for Mrs IE only will eventually, sooner or later, arrive, hence, no issues about having some property property declared, here and there, or a nasty thing here and there.


    Thanks again, for the reply. Sometimes, more then doubts we need to know what other are doing and how they do it, so we can all be better.

    Regards,
    Márcio


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
  •