CSS - vanishing Div and div contents

[Ecniv]

Hi,

I thought my site was going swimmingly well - unfortunately not.

Just opened the site in a smaller window (work browsing lol) and the menu vanished. When I resize to max - the menu appears, and resize back down the menu stays on the screen.

The main display, if shrunk too small for the pic makes the whole div disappear.


Probably my bad styling, but I thought I'd see if anyone else has come across it.

Link to the problem pages


Vince

[CornedBee]

The page looks very weird in Mozilla, too, not to mention that the DOM inspector disagrees with the main layout drawer...

Apparently it doesn't pay to mix table-based and table-less layout. The stylesheet is quite unreadable, too. What did you create the page with?

Edit: I've seen what the page looks like in IE. Apparently your code is completely off.
(Hint: if a page looks ok in IE but not in Mozilla then 99% of the case it's because the code is tuned to IE instead of the official standard.)

When I make IE very narrow the content vanishes. I believe this is because it drops below the menu which expands the full height. But given that IE is broken, it doesn't really acknowledge the fact that the content is longer now and thus doesn't extend the scrollbar.

[Ecniv]

Hi,

Thanks for checking...

The stylesheet - initially done in Notepad, and I used Hotdog to finish off.

Yup, tis tuned for IE, just doesn't refresh well as you said.

As to the tables/Divs mix, that was because I was attempting to get the table to 100% height, with a top row and a bottom row (date n copyright notice respectively) and the middle section for menu and display which should fill the rest of the screen.

I didn't want to use absolute, as this makes people use a specific scren size and font (well they are related).

Anyway, this method at least gave me close to what I wanted results without a huge gap at the bottom of the page nor losing the copyright notice too much.

As to style sheet - you say its garbled/crap layout/readability... Suggestions for easier read please let me know so with my next creation I can make a nastier monster of code/sheet.

lol


Vince

[CornedBee]

I admit, I didn't use a special reader. I used the Mozilla Edit Styles favelet, an extremely useful tool.
For development purposes the best way of having style sheets is (IMHO)

selector {
  property: value;
  property: value;
}

Your stylsheet usually has everything on one line and several tabs between the selector and the opening brace. What annoys me more, though, is that some of your ids and most of your class names are completely nondescriptive. A class and an id are both supposed to tell you what they are about, "tblupgd2" definitely doesn't.

Mozilla has an interesting effect. On first load the menu is completely visible, on resize it goes upwards and partially disappears. The top image also gets compressed somehow.