Visual differences in IExplorer and Firefox/Chrome

Good day,

Please take a look to:
Libromania - Todos sus textos escolares

With Internet Explorer and Chrome or Firefox.
With Internet Explorer, text under flags is not sorted as it is showed with Firefox or Chrome.

Additionally, if I want to add bottom padding to the last text (Klicken Sie hier Press here Presione aquí), Internet Explorer adds also top padding to that text, which is not made by Firefox and Chrome.

Could you please give me advise for these strange situations?
1.- Why text looks different in Internet Explored and it is showed perfectly positioned in Firefox and Chrome? How can I solve it?
2.- How can I add bottom padding without separate text in Internet Explorer?

Thanks a lot!!!

Hi,

You would have found the error yourself if you ran the page through the w3c html validator. :slight_smile:

It’s the first thing you should do before you even start to debug as it will catch simple typos in seconds and save you hours of work.

The problem is because you have not closed the anchors and thus you have mismatched tags and the browser has to error handle as best it can.

Replace the missing end anchor tags and it will display properly.

However, that’s not a good way to split text over two lines and then use two anchors with the same destination. It’s non semantic and wasteful of code.

Do it like this.


#index_language_links li {
    color: #b10c34;
    font-size: 200%;
    list-style: none;
  [B]  display: inline-block;
    padding:0 0 10px;
    vertical-align:top;[/B]
}
[B]* html #index_language_links li{display:inline}/* inline-block hack for ie6 must follow original rule*/ 
*+html #index_language_links li{display:inline}/* inline-block hack for ie7 must follow original rule*/ [/B]
[B]#index_language_links[/B] li.sidepadding_language {
    padding: 0 5% 0 5%;
}




    <ul id="index_flags">
        <li> <a href="german/home_german.shtml"> <img src="http://www.libromania.cl/images/germany_flag.png" width=20%> </a> </li>
        <li class="sidepadding_flags"> <a href="english/home_english.shtml"> <img src="http://www.libromania.cl/images/united_kingdom_flag.png" width=20%> </a> </li>
        <li> <a href="spanish/home_spanish.shtml"> <img src="http://www.libromania.cl/images/chile_flag.png" width=20%> </a> </li>
    </ul>
[B]    <div id="index_language">
        <ul id="index_language_links">
            <li><a href=german/home_german.shtml>Auf Deutsch<br>Klicken Sie hier</a></li>
            <li class="sidepadding_language"><a href=english/home_english.shtml> In English<br>Press here</a></li>
            <li><a href=spanish/home_spanish.shtml>En Español<br>Presione aquí</a></li>
        </ul>
    </div>
[/B]</div>
</body>
</html>


That should get the effect you want with less code and the padding bottom you needed.:slight_smile:

Hi Paul,

I will start using w3c html validator from now on …

I have implemented your changes and website is now perfect. Thanks again!!!
Now I have to do deep in your code and analyze it.

You have explained me before display inline and display block … what is display inline-block?

Following the same idea you did, is it possible to have three sections in page, one per language, in order to have all text and flag (per language) properly centered?

Thanks a lot!!!

Its a cross between a block level element and in inline element. It makes both block and inline elements behave as though they are block boxes but stacked inline. That means you can apply dimensions to them and still have them stack horizontally (similar to table cells in a row).

It has the same effect as floating but without the wrapping behavior associated with floats or the snagging behaviour of floats as inline-blocks always drop to the next line cleanly when they wrap at the end of the line.

Following the same idea you did, is it possible to have three sections in page, one per language, in order to have all text and flag (per language) properly centered?

Thanks a lot!!!

I can’t quite envisage what you mean (but it is late). If you are looking foir something equally distributed then that’s not something you can do automatically.

Or did you mean you wanted the big image above in the same block as the text? Yes you can do that with the structure I just gave and you’d just stick your image in the same div as the text.

I guess it is the second alternative.
As you can see now, as welcome text, flags and click here texts are separated, making them are not properly aligned. What Id like to do is to have one section for three elements of each language (welcome text, flags and click here texts), in order they are centered in each section.
I am testing now and lets see …

Have a nice weekend!!

I did what you said, and it worked very well. Many code saved in index file and also in style sheet definitions. Now it looka as I wanted.

Thanks a lot!!!