Big problem with positioning, sizing, overflow etc. etc.

OK, here's the problem. My latest site be seen at http://www.soapi.com (I am not trying to do any promotion with this post!)

If you decide to visit the site to see what I am talking about, please do so in IE 5.5+ at the moment, because the site falls to pieces in Mozilla... which is my problem.

I did the site quite quickly so that it would be up there, and now I am trying to make it cross-browser. However, there is one thing that is proving VERY difficult! I have spent all day trying to reproduce the same scrolling system that I have currently working in the site, with no success as yet!!!

I am currently using Mozilla 1.2.1 and IE 6 with strict processing (standards on) in order to make sure the site works well. What I need to do is this:

- Title bar that is 100% of the width of the screen, and 70px high (done)
- box under the title bar, which fills the remaining space, i.e. 100% width and 100% height minus 70px, and which will scroll any content that overlaps those boundaries.
- side menu, contained in the box, which is aligned left, 100% available height, and 200px wide.
- content area, which is 100% of the remaining height and width.

The idea is that the content and sidebar areas will always be the same height, i.e. the height of the tallest, plus they should make the main box scroll if they are too big for it.

This should be acheivable - especially as I have already acheived it and it is up on the site and working fine - but making it cross-browser is a pain in the neck!!!

Please, anyone, any ideas...?

::] krycek [::

Please, anyone, any ideas...?

::] krycek [::
Here's one: Don't code specifically for IE next time! :D

Well anyways, I ONLY have mozilla and Opera because I'm a linux user... and you're right... your site's pretty messed up! In fact I've never seen a site that was almost (http://validator.w3.org/check?uri=www.soapi.com) valid XHTML display so horribly in Moz.
Aha... the problem is not in your HTML, it's in your CSS... I counted quickly and got 40+ errors in your CSS. See for yourself (http://jigsaw.w3.org/css-validator/validator?uri=http://www.soapi.com/css/styles.css&warning=1&profile=css2).

Looks like you've got a lot to sort out in there... hope that gets you on the right track though.

-Doug

lol @ you... :D

I did point out that the site was rushed in order to get it up. 95% of people use IE, so it is fine for them. However, this situation is not good enough for me - I want it to look the same in both IE and Mozilla (forget Opera, it's total ****) and so I was merely wondering if anyone knew of the 'proper' way to do what I am after.

My XHTML IS compliant, except for a couple of things - I hardly ever bother to put ALT tags on everything, so that gets flagged, plus I have a line of xml in the doc which I remove if I want IE in standards mode, plus I haven't converted all of my PHP scripts to use XHTML yet so there are some (but very few) tags that do not close correctly. But like I said, a quickie job...

I am not really after anyone to criticise my code, well, I am, but only when I say it is ready :D but thanks for taking a look anyway, coz if I didn't know about the things you mentioned then I would definitely be pleased to know about them (most of the CSS validation errors are down to me using _ in style names, which I have only recently realised is not a good idea, even though it is supported!)

SO... back to the original topic... ANY ideas, anyone, PLEASE??? :confused:

::] krycek [::

...oh, and another thing... my CSS might have temporary invalidations (:D heheh good word that) but it isn't broken :)

::] krycek [::

Ermm…

It looks real whacky in IE5.2 on a Mac by the way. Macs are shipped with IE (yuck) and trying to get something right in IE on a Mac is verging on getting it almost right for Mozilla.

meerkat

yeah I know... IE5 for the Mac is probably the best of all IE versions at actually implementing standards.

Now, does anyone have any IDEAS about how to DO this? I know what browsers it does and doesn't work on - that's why I am trying to GET it to work! lol! :D

::] krycek [::

Originally posted by krycek
yeah I know... IE5 for the Mac is probably the best of all IE versions at actually implementing standards

It also has more rendering, procedural and compiling errors than any other browser I know.


My advise, to be honest, would be to basically start again. JKD always advocates designing in mozilla, and then working backwards to get IE compatibility. perhaps you might find this approach suits you better.

lol - that's what I AM doing! :p

Not easy though. IE on standards mode is similar to Mozilla, but by no means identical. And although I started again yesterday morning, I have yet to acheive anything that I would call 'success' with this feisty little problem.

I am really, really, really after ideas about how to make it work. Examples of sites that do it, if you know any. Anything else is not gonna be very helpful to me atm.

::] krycek [::

I'd use three style sheets: one for Netscape/Mozilla, one for IE PC, and one for IE Mac. A one-for-all solution with your design is impossible.

...are you sure? :( that's bad news... I can't make it work in Mozilla at all. Ideally I would like this to be pure CSS, but I might have to resort to using JS to get it to work.

::] krycek [::

You can make stylesheet selection done on the server.....