Offset in ie7 issues?

[oikram]

Hello all,

I’m having an issue on ie7 that seems to be related with a big left offset on that ie7 version.

www.nuvemk.com/nascer/

any clue about what it could be?

I’ve also notice an issue on #contactos-content and #a-nuvemk-content width on Safari (the first to options on the accordion). Any clue here?

Thanks a lot,
Márcio

[oikram]

@Stomme_poes

I has some questions:
What’s header doing here?
<header><h2>Acerca da Nuvemk</h2></header>

I mean, what purpose is it serving here that a plain <h2>Acerca da Nuvemk</h2> doesn’t do? I’m thinking I would feel bad if, in HTML4, I had
<div id=“header”><h2>Acerca da Nuvemk</h2></div>

We have a <header>, but how important is that header?
Maybe h1 h2 h3 can answer that.
So I believe.

@Stomme_poes

section, header, footer, article
{
    display:block;
}

Is this for IE? I thought these were blocks by default? (I dunno, I’ve not worked with the new HTML5 boxes).

Yes, IE isn’t aware of those, and he doesn’t treat them as blocks.
So, I believe, by default those elements have not display:block;

@Stomme_poes

#wrapper-esquerda 
{
    
    /*float will be computed as none. Does this means it will NEVER be understood if we declare that property here? */
}

I believe so, for those who understand media queries, because later you set left wrapper to position: fixed or position: absolute, both of which will override any “float: anything” set earlier.

I see. This question was prior the the media queries, but still valid.

@Stomme_poes

However, if you want it floated left, I’d add it in, because there are browsers who don’t understand media queries, and since they’ll ignore the fixed and absolute positioning, they’ll still see the float: left. A sort of graceful degredation.

Nice advice, and I will surely take it. Thanks.

@Stomme_poes

I notice some charset issues in your CSS sheet:

@font-face {
	font-family: 'Interstate-LightRegular';
	src: url('Fonts/interstate_light-webfont.eot');
        /*O smile? é para garantir que nenhuma fonte se chama assim no sistema e, para carregar o ttf que temos. Digo eu... :-)*/
	src: local('☺'), url('Fonts/interstate_light-webfont.ttf') format('truetype');
}

Well, that is actually a smile face that and the point of that smile face is to guarantee that no such local thing exists, so I believe.

I will have a look on my editor, to see if I found the charset confs.

@Stomme_poes

Note: you are using the Meyer reset which removes outline from focusable elements. In his original reset, he has a comment stating “don’t forget to add it back in”. You don’t have the comment and have not added it back in. For this reason, I believe he was very wrong to take it out in the first place: it’s an important accessibility feature, having outline. It’s only ok to remove outline when you manually add back in some other, less-ugly focus style. I don’t see any focus styles in your sheet though.

Thanks! I will take care of that. Actually, I intend to remove from the original reset what I don’t use and hence, don’t need to reset.

Thanks a lot for your comments.
Don’t worry, you still have a great team. Not like mine, that has a “Mr. Start” Ronaldo that haven’t played that much.

[oikram]

@oikram

Hello all,

I’m having an issue on ie7 that seems to be related with a big left offset on that ie7 version.

any clue about what it could be?

Adding a explicit left value ended that left offset issue.

@oikram

I’ve also noticed an issue on #contactos-content and #a-nuvemk-content width on Safari (the first to options on the accordion). Any clue here?

I was having overflow:hidden; defined on an element that was already contained. I believe safari behaves as it should behave, hidding the overflow content, leading to the visuals slices we have seen. Removing the overflow:hidden; declaration solved the issue;

Regards,
Márcio

[Stomme_poes]

They may be a great team, but I did hope they would play better than they did (and I don’t mean them losing… they didn’t play particularly well in general).

We have a <header>, but how important is that header?
Maybe h1 h2 h3 can answer that.
So I believe.

Yeah, I think so. As far as I understand it, the <header> element was to replace <div id=“header”> to make it more “semantic” or something. So, if you just have a heading element (<h#>), I can’t see how adding another wrapper to that would help or be a good thing.

Well, that is actually a smile face that and the point of that smile face is to guarantee that no such local thing exists, so I believe.

Yeah, I’ve seen the smiley in other font-face declarations in other stylesheets (though I did always wonder what it was doing : ) thanks for explaining).

[Stomme_poes]

Sorry, I missed what element was having the issue??

I has some questions:
What’s header doing here?
<header><h2>Acerca da Nuvemk</h2></header>

I mean, what purpose is it serving here that a plain <h2>Acerca da Nuvemk</h2> doesn’t do? I’m thinking I would feel bad if, in HTML4, I had
<div id=“header”><h2>Acerca da Nuvemk</h2></div>

section, header, footer, article
{
    display:block;
}

Is this for IE? I thought these were blocks by default? (I dunno, I’ve not worked with the new HTML5 boxes).

#wrapper-esquerda 
{
    
    /*float will be computed as none. Does this means it will NEVER be understood if we declare that property here? */
}

I believe so, for those who understand media queries, because later you set left wrapper to position: fixed or position: absolute, both of which will override any “float: anything” set earlier. However, if you want it floated left, I’d add it in, because there are browsers who don’t understand media queries, and since they’ll ignore the fixed and absolute positioning, they’ll still see the float: left. A sort of graceful degredation. The new positions will nullify float in any browsers who understand the media queries, just as in regular CSS:
#someElement {
display: inline;
float: left;
position: absolute;
}
The element is not floated at this point. It’s absolutely positioned.

I notice some charset issues in your CSS sheet:

@font-face {
	font-family: 'Interstate-LightRegular';
	src: url('Fonts/interstate_light-webfont.eot');
        /*O smile? é para garantir que nenhuma fonte se chama assim no sistema e, para carregar o ttf que temos. Digo eu... :-)*/
	src: local('☺'), url('Fonts/interstate_light-webfont.ttf') format('truetype');
}

I see these characters showing up throughout your stylesheet… possibly some browsers are not able to read it?
/Até chegar à altura mÃnima: */

Maybe it’s readable in your editor. You are saving your CSS sheet as utf-8 correct? Your HTML page looks ok, your server is sending out as utf-8, so I think your CSS sheet was saved as some other charset in your editor possibly.

Note: you are using the Meyer reset which removes outline from focusable elements. In his original reset, he has a comment stating “don’t forget to add it back in”. You don’t have the comment and have not added it back in. For this reason, I believe he was very wrong to take it out in the first place: it’s an important accessibility feature, having outline. It’s only ok to remove outline when you manually add back in some other, less-ugly focus style. I don’t see any focus styles in your sheet though.