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)
(...), #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?
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.
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?
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.
#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;*/
[COLOR=Blue] display:inline-block;
vertical-align:bottom;[/COLOR]
}
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.
#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;*/
[COLOR=Blue]display:inline-block;[/COLOR][COLOR=DarkGreen]/*kill IE7 whitespace*/[/COLOR]
[COLOR=Blue] vertical-align:top;[/COLOR]/[COLOR=DarkGreen]*good browsers need v-a:top with height on "li"*/[/COLOR]
}
#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*/
[COLOR=Blue] display:block;
height:20px;[COLOR=DarkGreen]/*image height*/[/COLOR][/COLOR]
}
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.
footer
{
clear:both;
[COLOR=DarkGreen]background:lime;[/COLOR] [COLOR=DarkGreen]/*test BG color*/[/COLOR]
[COLOR=Blue] min-height:0;[/COLOR][COLOR=DarkGreen]/*IE7 haslayout*/[/COLOR]
padding-top:4em;
margin-right:3.37em;
/*float:right; - nao posso ter isto*/
}
V
V
V
#a-apregi
{
[COLOR=Red]/*margin-bottom:1.6em; set as top margin on floats*/[/COLOR]
}
#a-apregi p a img
{
margin-left:.7em;
}
#o-que-e-alojamento-web
{
clear:left;
[B]float:left;[/B]
width: 15em;
margin-right:3.25em;
[COLOR=Blue] margin-top:1.6em;[/COLOR][COLOR=DarkGreen]/*replace bottom margin on #a-apregi*/[/COLOR]
}
#o-que-e-alojamento-web span, #o-que-e-dominio span
{
text-decoration:underline;
}
#o-que-e-dominio
{
width: 15em;
[B]float:left;[/B]
[COLOR=Blue] margin-top:1.6em;[/COLOR][COLOR=DarkGreen]/*replace bottom margin on #a-apregi*/[/COLOR]
}
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:
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:
#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.
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:
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:
#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.
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.
