On 23/04/2010, at 8:39 AM, MEM wrote:
>>
>> 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?
My approach to this is that due to IE's manifest inadequacies it gets
whatever CSS it takes to make it render something sensible. As long as
this is isolated into an IE stylesheet via conditional comments and
the CSS is commented explaining why you are using such a counter-
intuitive construct then I don't see a problem. There are probably
other ways of fixing this. I don't know off the top of my head. From
memory it may be a whitespace issue so if you are able to control the
whitespace in the <li> and not have line-breaks that may 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.
>>
>
>> 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?
Use the Microsoft developer tools show you the dimensions and
properties of elements and then modify them in the browser until you
can see what is going on. It is normally the element in question, a
sibling, child or ancestor of that element.
>
>>>
>>> 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 ... ?
I don't know what the problem is. If you insist on using images then
set them to display: block and fix for IE. Otherwise use one of the
many image replacement techniques or use @font-face (font embedding),
cufon or sifr.
>
>>
>> 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.
There are many tutorials on CSS sprites and image replacement which
should be able to point you in the right direction.
You don't need javascript here, but for future reference look up
'unobtrusive javascript' for ideas about how to keep your javascript
out of your markup.
______________________________________________________________________
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/
