2

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:

portfolio

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?

2
  • 1
    Different DPI settings, perhaps ?
    – driis
    Sep 2, 2012 at 9:52
  • The 4th image is pushed down on my machine as well... Chrome 21, Windows XP (96 DPI).
    – MrWhite
    Sep 2, 2012 at 11:26

1 Answer 1

2

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.

4
  • I did both things and it did not solve the problem.In my opinion it may be something that affects my installed browsers because all are affected Sep 2, 2012 at 10:14
  • THank you for solving the problem but these stil does not explain why on one computer let's take chrome for example the website is shown as if it's coded corectly and on another it shows the problems.BOth computers have the same version of chrome and the same os Sep 2, 2012 at 14:34
  • Apart from what you've already checked above, is it in something similar to IE compatibility mode? Also see DPI and PPI Explained for a explanation of DPI that you asked for above.
    – Alex
    Sep 2, 2012 at 15:30
  • "display:inline-block; is adding a tiny amount of width!" - The additional width is simply the white-space (newlines) between the elements in the HTML source.
    – MrWhite
    Sep 3, 2012 at 18:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.