Umar 0

Is there any genuine method following which I can use css positioning without giving any consideration to browsers?

  • Please clarify what kind of layout you would like to make. CSS positioning is very flexible and cross-browser layouts are easily acheived :) danwellman over 7 years ago

5 answers


Nowadays, most of your considerations is about how to follow the standards, and not how browsers interpret them. Some browsers have somewhat weird implementations of standards, such as MSIE. But they are getting better :) (almost good now with IE7 and 8!)

So to answer your question: Consider not foremost browser issues, but the web standard compliance of your code. But, to some extend also the somewhat quirky implementations of standards a few browsers might have.

Max the design for the majority, but don't forget the minority. Knowledge and tricks are good to a certain point, beyond that, to make really stunning design across plattforms, you need understanding of how the rendering engines of different browsers think and work.

Answered over 7 years ago by Jens Hedqvist
Simon 75

user-centric, future-proof designs start with standards.

then you extend for your exceptions (IE 6 and other rarities)

Answered over 7 years ago by Simon
Umar 0

But my visitors won't appreciate it if my website follows the coding standards but everything is overlapped. And it is the visitor I am targeting mate, not the programmers and web developers.

I have found invented one method though, if you follow the following website:

You would see I have created the entire website with division positioning and never in the code is any caring for any browser.

But again, that method requires one to use table in the lowest bit otherwise website loses flexibility of size.

(I haven't used that last table in that website, and you can see, it is not flexible to change in size of the content which I have force-fed through javascript)

I am just looking for method that would alleviate me of using that last table, or javascript for the flexibility I require.

Answered over 7 years ago by Umar
  • Web standards are made for the users as well as developers. That's why browsers are following the web standards. The key is to build for standards compliant browsers (which almost every browser is today) and making a few small adjustments for those who don't (not many today). And a tip: use comments to respond ("Add comment"). Not answering your own question ("Your answer"). If your looking for a reliable short cut to get your layout to work in different environments you're out of luck. Today you'll have to learning everything you can about web standards, browser and the user/clients technical environment. The focus here is not your ease of building a site, but the users perspective. Jens Hedqvist over 7 years ago
  • @Jens - It is comments like this that make me wish there was a way I could give a point for a "Great comment." Well said. +1 to Jens Abinadi Ayerdis over 7 years ago
elena 56

I like (and found very informative) the Yahoo grading system for browsers. It really put in order something that is just bloody obvious:

So you do what you can to make it passable in the Grade-A browsers, and worry not-so-much about the rest :)

Hey and I (still) strongly suggest reading the Zeldman book, it's so informative about this stuff.

Answered over 7 years ago by elena

The example site you give above is an excellent demonstration of the fragility of absolute positioning: when using absolute units. For me it has some overlapping text. The user has several variables beyond your control: Default font size, minimum font size, installed fonts, javascript permissions and viewport size.

You might experiment with flexible dimensions (ems) in a mainly text-based layout, but once you have images that also becomes fragile since images are dimensioned in pixels and do not scale with font size. Even then, the width of a box and which font from the stack is used might make a difference of 2 or three lines in a paragraph as text is flowed.

Although floats have less ability to be positioned, they have the powerful capability of containment, and the innate ability to keep out of each other's way (most of the time).

Answered over 7 years ago by Richard Grevers
  • You can make an image scalable by setting its width and/or height style with em-based dimensions. (BTW, Firefox 3.5 appears to scale everything, including line widths, even when dimensioned in pixels.) Robert Peters over 7 years ago