Problem table-cell, table-row with Safari & Chrome

[rodolpheb]

Hi,

I have a problem with this page :http://www.visualize-performance.com/html/individual-follow-up.html

With Safari § Chrome only, when I shrink and I resize, the blocks (set with table-cell) don’t go back to their initial place.

I’ve dug deep in the web without finding any answer.

I would be glad if someone could help me.

[Paulie_D]

Although I wouldn’t have used table formatting (there are much better ways) I have to ask a question.

Why is this an issue (although it sort of is)?

The only people who re-size browsers are developers…the general public just don’t.

[Rohithzr]

Well i agree with @Paulie_D but still i tried and found a solution to your problem. Hope it should not cause any other problem.

.tab3col{
display:block !important;
}

add this line to your css. in @media only screen and (max-width: 480px)
it is working on chrome atleast ….

[rodolpheb]

Thanks @Paulie_D, what are the better ways you’re talking about?

I agree on the fact that it’s not an important issue but I’d like to understand.

Issue (Chrome & Safari) with table-row :http://theesdesign.net/es/test/main-test.htm

[rodolpheb]

Thanks @Rohithzr I’ll try this.

[Paulie_D]

Well there’s floats and inline-block to start with.

I would use these in preference to table formatting every time.

[rodolpheb]

@Rohithzr : it doesn’t work :/

@Paulie_D : I know how to use floats and inline-block but why do you think table formatting is not so efficient. I read so many articles advocating for table formatting and I see lots of advantages to use them.

[Rohithzr]

Well i am rechecking but it is working on my pc.. creating a [pen](http://codepen.io/seraphzz/pen/aJyLD “pen here”)

[rodolpheb]

…The page is online with your code but the problem is still here.

It works with Codepen and I don’t understand why…

[Rohithzr]

visit here….. cant understand the problem you are facing now.
http://ithc.comuv.com/csstricks/test.htm

[rodolpheb]

Can’t understand either. :(

[Rohithzr]

well there is something wrong in what you are trying to do… maybe anything pretty silly. so try to find it.

[Rohithzr]

@gcyrillus well i agree that this happens (as it happens to me) but @rodolpheb said that he uploaded that code (just as i did) but still it is not working, so according to me it is some silly kind of mistake like **uploading the wrong file**, **placing the tag at the wrong place**, **ftp did not replace the file**, etc

[Rohithzr]

> it’s annoying sometimes.

word.

[rodolpheb]

> maybe anything pretty silly

???

The problem was still here, until I added your tag in the second media @(min-device-width : 768px )…..
I removed this tag in the first media you mentioned.

Thanks for your help.

[Author]

Posts