Webdesign

Out of something bad something good must come. How true!


Messed up design in Chrome and Opera
If i did not have had problems with FireFox i probably wouldn't have been pointed (thanks Frosch ) to the fact that the design of my blog appeared somewhat awkward in Chrome and Opera.

To position the logo and the top menu i used 'position:absolute' and a negative margin. FireFox responded fine to that and did exactly as supposed only Chrome and Opera decided that it should be placed somewhere in the middle of the page directly over an article i wrote earlier on dropping FireFox as my standard browser. How ironic is that!

To fix this i spend a few hours trying the usual, putting elements around it, setting different positions and margins. Nothing worked. Chrome and Opera simply would not place the elements accordingly to what 'position: absolute' and 'top: 0;' should do - taking them out of the flow and placing them on top of the page.

Dont tell me positioning with negative margins is not done, its perfectly fine according the W3C "Negative values for margin properties are allowed, but there may be implementation-specific limits." Hm, again browser specific?

Yep! It would be a perfect world if browser-builders-would-not-have-their-own-ideas-on-implementing-recomandations-every-one-should-use!!!

You build a browser? I know you are tempted but:
Dont, no dont follow the dark path of your own i know it better ideas. Microsoft already appologized for IE6 (they should for every version) you want to be next?

The case:

Positioning Logo and menu to the top of the page from within a layout consisting of tables.

• Serendipity as a blogging tool
• Template chosen: MT Rusty
• Layout in tables
• HTML Headers on top of the table in a div (dont ask me why)
• The elements to be positioned are inside that table
• CSS to control the style and layout for the table, values set to:
  • border-collapse: collapse;
  • border-spacing: 0px;

The solution:

As mentioned i tried many things but nothing worked, Chrome and Opera refused to place the elements outside the table. In a table-less design they worked fine, so the table must be the problem when using negative margins and i decided to place it all in the table and work from there.

I had to do the following:

• Creating a space for the elements on the top of the page by setting a padding for the top of the table
• Placing the div with the headers into the reserved space i created in the table with a position: absolute;
  
  • The div will be taken out of the flow and the table will move to the top of the page, used a z-index:2000; to get the div on top
• Placing the logo and menu into that same space by using position: absolute;

I put a padding to the table and noticed it didnt reserve the space wanted??? What now, a new problem?
Searched for it and ah okay i knew that but forgot: "The border-collapse table definition gets rid of the spacing and the padding in this instance removes all padding from a cell." What meant my padding set was ignored. So i took out the rule completely and it worked.

Played a bit with margins and bingo, the elements moved according to the rules.