2010/4/22 Tim Snadden <li...@snadden.com>:
>
> On 23/04/2010, at 3:23 AM, MEM wrote:
>
>> http://lab.webhs.pt/webhs_testes/apregi/Home.php
>>
>> 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)
>>
>> (...), #navegacao-principal-home ul li a img
>> {
>>  display:block;
>> }
>

> Try the rather counter-intuitive trick of setting it to be inline-
> block and then block.
> http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

Thanks. I will read about it, but the fact that is counter-intuitive
doesn't appeal me that much. Should we avoid it? If so, what will be
the alternatives?

>
>> 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.
>

> To bend IE to your will you simply must understand that there is a
> property called hasLayout and you need to know how to trigger it. If
> you have a problem with IE, use the web developer toolbar and trigger
> hasLayout on or around your problem element using zoom: 1.
>
> #footer { zoom: 1; }
>

How do we know that the issue was in the footer?

>>
>> 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 solution?
>

> One simpler solution is to not use image for headings. You have
> already identified that because images are inline elements they have a
> space below for descenders (the bottom of the letters g, q etc.). If
> you must use images then set the image to display: block and set your
> margin or padding on the h2 how you like.

And we will not end up on issue one above? We don't because the issue
one is only valid for li ... ?

>
> Why are you using old school inline javascript to change out your
> image in the menu? There are many other ways of approaching this. One
> would be to use image replacement with a sprite and shift it on hover.
> It seems a bit strange to be using HTML5 (so 2010) along with inline
> javascript image rollovers (so 1999).


Thank you so much for the advice. I've read that tecnique here and
there, but the web is no place to properly get what is new or old
sometimes.
I will try that tecnique. I really prefer to have js separate from the markup.

I have made my efforts to put the css as organized and clean, as well
as the markup, the best I could.
If someone sees a path for future mistakes, or some "we don't do like
this anymore" stuff please, let me know. :))

Thanks a lot,
Márcio

ps. my last mail was not in text only format. (It will not happen
again, so I hope).
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to