"Growing" blocks puzzle — OZONE Asylum, home of the Mad Scientists

XML - XSL - XSLT - XHTML - CSS - DOM

"Growing" blocks puzzle

This page's ID: 11008

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	The issue with different browser's different rendering has often been discussed in the Asylum. And here's a good one for ya'll. I really need some good help with this puzzle: Every single site that I have made or rebuilt since I started working with CSS have had a similar problem. Example: A block (#menutext) starts at top 2px left 0px, with the width 134px and height 300px. Next block (#info) starts at top 302px left 0px, with the width 134px and height 50px. These two are the left menu. Main block starts at top 2px left 135px, with the width 630px (to fit in 800x600) and height 95%. In IE and Opera this looks neat and fine, just the way it is supposed to in my opinion. In Netscape and Mozilla the left blocks overlap the main block. Furthermore, the main block has become "too big", so two scrolliebars appear, both to the right and in the bottom of the screen. It seems to me that Netscape and Mozilla read pixel-sizes larger than IE and Opera, but only when it comes to text, width and height - NOT starting points. And when did 95% become more than 100% of the window's height? This really bugs me. It throws off the entire design that I am trying to do. Here are a few screenshots in different browsers which illustrate what I mean: [url=http://www.malmo.bostream.se/richcris/test/.]http://www.malmo.bostream.se/richcris/test/.[/url] On the first four shots I have put in green circles to show where the problem is. I have colored the two menu blocks and put a frame on the main block to make it show more clearly what I mean. Here is also the CSS for the three blocks the way they show on the first four screenshots: [b]#menutext[/b] { font-size : 15px; background-color : yellow; font-family : "Trebuchet MS", Helvetica, sans-serif; position : fixed; top : 2px; left : 0px; width : 134px; height : 300px; padding : 10px; text-align : center; line-height : 18px; z-index : 2; } [b]#main[/b] { position : absolute; top : 2px; left : 135px; width : 630px; height : 95%; overflow : visible; padding : 20px; text-align : justify; border-style : solid solid none solid; border-color : white; border-width : 1px; z-index : 4; } [b]#info[/b] { font-size : 75%; background-color : red; position : fixed; top : 302px; left : 0px; width : 134px; height : 50px; padding : 10px; text-align : center; z-index : 3; } There is as far as I can understand nothing wrong with this CSS-code. But is there anything in this code that makes the blocks "grow" in NN and Mozilla? Or is there a good way of going around this problem? As I said in the start, a few more sites that I have been working on lately have the similar problem with "growing" blocks. Look at the right part of the menu on this site: [url=http://www.malmo.bostream.se/richcris/studioone/]http://www.malmo.bostream.se/richcris/studioone/[/url] This one has a picture in the very right part of the menu bar, to create a transparent effect with the menu bar and the background image. Looks like bad web design in NN and Mozilla. Tried to make the fonts smaller, lower the line-height, make the block bigger - and smaller, etc. Nothing works... And have a look at the right side of the upper menu bar on this site (I have tried to tweak the size here): [url=http://www.malmo.bostream.se/richcris/kartis/]http://www.malmo.bostream.se/richcris/kartis/[/url] The borders of the horizontal menu is supposed to go all the way to the right border. In NN and Mozilla they overlap. Looks like the web designer had too much whiskey and missed with a few pix. Tried to make the menu shorter, as you can see. Currently it is too short in IE and Opera, and too long in NN and Mozilla. Neither is good... I would appreciate as much help as possible, since I'm out of ideas of how to get around this problem. All you guys who use Mozilla-based browsers, haven't you noticed this "growing-block" problem? Or am I just blind to not see what I am doing wrong??? (Another difference is that a "fixed" block isn't fixed in IE (still scrolls), but works fine in all the other three. I guess that is just a thing they "forgot" to put into IE... ) This browser thing makes me soooo tired!!! Please help! :confused: Kasta sten i glashus? Jag? Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu