Centred wrap on variable browser size

[leefish]

A few years ago, designing sites was a lot easier - there were less browsers and less variation in screen size. Now when I make a change to a layout or theme I plod along checking IE6, IE8, Opera, Firefox, Safari and Chrome. On windows XP and 7. I don't have a Mac so I can't check that. I try hard to keep it compliant for all browsers - but there are all the different screen sizes now as well.

On the front page of leefish we have a small gallery of downloads - picture size can vary a little bit - but not very much. The width of the container was the problem.
Most sites optimise to 1024 - I optimise to 1280, but still got some problems with users with big screens saying pages looked kind of empty

It was really noticeable on the gallery - on a BIG screen there were like 6 tragic little pics all stretched out. On a small screen there was an ugly wrap......

Anyway - I finally found an answer - was obvious really, but here is the css for it

Code:

yourdivname {
    height: required height in pixels;
    overflow: auto;
    width: 100%
}

For IE conscious folks:

Code:

yourdivname {
    height: required height in pixels;
    overflow: hidden;
    width: 100%
}

[Fishycookie]

Good ol overflow:auto, it's great for making layouts.

[leefish]

Yup, but I had tried overflow:auto before with non-optimal results - its because we are pulling the pictures via a query etc. I have SOME control over pic size, but not total.

By adding the height value I basically HID the wrap under the bottom of the box - it needs both properties - height restriction + overflow to work as it is here.

Overflow hidden is better I think as it means the gallery is viewable "normally" in IE6 upwards. Some folks are STILL using IE6. Sad I know.

[Lord Roco]

Can you share up a CSS we would need to put for rounded corners? i always wanted to try a hand at this for me

[leefish]

Hmm, thats been done so many times though - and now with CSS3 around the corner its as simple as putting border-radius: 6px;

Sadly, only IE8 and Opera (and recently Chrome/Safari) are using CSS3 properties for border radius. The webkit browser Firefox (moz-) is still using their proprietary code. Which then needs to be added to the CSS causing a shed load of extra markup. Which doesn't validate.

So I am not sure whether I would really be helping you by showing you how to cram your stylesheets with soon-to-be-outdated crap.

http://www.css3.info/preview/rounded-border/ << tells all about how to do rounded corners.

[x-Treme]

Why can't there be just one standard to follow when it comes to web browsers?
Where are the internet police to ensure everyone is following the same rules? It would make life so much easier. I try to just stick with optimizing for the 3 main ones (or what I consider main) FF,Chrome, and the dreadful IE.

[Lord Roco]

Thanks for sharing that lee!

So, does that mean I should add up the moz radius default ones too for optimization in Mozilla as well as the others?