Hi I have created a portfolio website using HTML and CSS and I have noticed something very wierd.I have tested the website on all the latest browsers Internet explorer 9 , Google Chrome , FireFox.And the website looks good on every one of them when I load this link from my personal computer:
Now in order to be sure that everything is working ok I tested the site on adobe browser labs and I saw there that there is a problem.Normaly there should be 4 images on each line but in the browser labs it seems in all that browsers the 4th image is being pushed down.
I checked this on another computer that also has the latest Chrome , FIrefox , Internet Explorer 9.And it seems the adobe browser labs was right the 4th image is being pushed down.
The resolution of both browsers and computers are the same and I am using on both Windows 7 Home Premium?
What could couse this problem?
Why does the same website look different on the same browser version but on different computers?
It may of temporarily stored your old CSS, have you tried the ritualistic application of CTRL+F5
also check that you are at 100% zoom!
Good luck!
–Edit
After a quick firebug your “portofoliu” div has a maximum width of 940 pixels, each of your “portofolioGalery” divs are 220px wide with a margin of 17px each, your first and 5th image have had the margin removed. This means that your items should fit!
Using firebug to flick between your “portofolioGalery” items it showed a small gap between them, what is happening is that “display:inline-block;” is adding a tiny amount of width! I replaced it with “float:left;” and it all goes to exactly where it should be.
This guys blog has some other solutions and an explanation for why.