Topic: I don't even know what to call this...

I am trying to put out my very first personal web site.
It is here.

The layout looks OK in IE5.5 W2k (mostly, there are some minor things with which I am not happy, especially when the window gets narrower than about 600 px, but I think I can handle that...)
but Mozilla and Netscape 6.0 just tear the page apart.
I don't even know where to begin thinking about what is the issue. Can someone please look at my code and help point me at my problems. I don't mind doing the research, I just don't even know where to start...

Thank you.
mobrul

mobrul: Its a pretty complex floating page and I suspect the problem is that you've designed it in IE5.5 and then tried it in NS6/Op and discovered problems. I've done this and the twisted wreckage of your page can reduce you to tears. Although there are quite a few bugs and differences in the browsers I'd imagine the thing that is causing your pages to go funny is IE/Win's incorrect implementation of the box model (I see you've made no allowances for it in your CSS so its a start). I'll have a more detailled comb through the code to see what I can see but that is where you shoudl start. Have a look at these resources:
http://glish.com/css

esp.: http://glish.com/css/hacks.asp

and have a look through all the examples here:
www.thenoodleincident.com/tutorials/box_lesson

What you might need to do (I know because I've had to do it) is start with a much more basic layout and build the elements back up again testing in IE, NS6 and Op5 correcting the problems as they occur. However, I would try to fix the IE/Win box model problems first.

Good luck!!

Emps


You're my wife now Dave

mobrul: I've had another look at your page and there may be other complicating factors like tables etc. I might just rip it apart and start again like this:

<div MAIN>

<div MAINRIGHT>

<div LEFTCOLUMN>
<div LEFTCOLUMNTOP>
</div>
<div LEFTCOLUMNBOTTOM>
</div>
</div>
<div RIGHTCOLUMN>
<div RIGHTCOLUMNTOP>
</div>
<div RIGHTCOLUMNBOTTOM>
</div>
</div>

</div>

</div>

Float the main right DIV right: http://glish.com/css/1.asp

and then divide the section into two floating columns: http://glish.com/css/9.asp

with a top and bottom div stacked on each other. You'll need to do the IE/Win hack to get everything working but it should be OK. If you go for a fluid design watch out for the fluid floating problem I've mentioned a couple of times here.

Good luck again,

Emps


You're my wife now Dave

> (I see you've made no allowances for it in your CSS so its a start)

Nice reply, Emperor. I am all for writing to standards. I do actually like a lot of the things that both Netscape and Microsoft added to their browsers that eventually became standards and I have no problem with people including special content on their pages--things that *add* to pages--but I hate that every new generation of browsers comes complete with incomplete support for current versions of accepted standards as common as HTML and CSS.

Brian: I don't like the IE/Win hack but if you don't ahve server side scripting it seems a necessary evil. I do like the little extras that have been added like IE filters, scroll bars and moz opacity and when done right they do degrade well but it can be a nightmare keeping track of the browsers quirky implementation of CSS - but it is worth it in the end (as far as I'm concerned anyway).

mobrul: Did that fix matters?

Emps


You're my wife now Dave

no

Part of the problem may have been sloppy coding on my part...didn't put units on lengths, that sort of thing.
I also took out the table in the menu and added span elements for each item.

The BIG problem still exists, though; that is the main text doesn't wrap around the middle picture, but instead just goes right through the middle of it...and the same with my 'page 2' box in the lower right corner.
Does NN, et al not deal well with floating within floating? That seems to be where the main issue is. The 'float' and 'text-align' aren't doing what I expect. Is this a 'known' issue that I don't know about?

mobrul

mobrul: Floating within floats is usually fine (or at least I haven't had any problems with that exactly) but I have run into problems with floating images and as that was a design I keep looking at and putting aside (in exasperation) I don't think I've fixed that problem. However, it sounds like the same problem I've had and its a problem I need to work out a fix for. I won't be around for most of the rest of the week but will dust off my files and simplify and see what the problem is and if there is a fix (there has to be). If this isn't fixed by next week I'll have another try and see what I can do.

Emps


You're my wife now Dave

mobrul: You've taken the page down but working from memory I constructed this:

<html>

<head>

	<title>mobrul</title>

<style type="text/css">



body {

  background-color: #ffffff;

  font: 12px;

}



#mainfloat {

  width: 50%;

  float: right;

  border: 1px solid #000000;

}



#leftColumn, #rightColumn {

  width: 49%;

  float: left;

  border: 1px solid #0000ff;

}



#topLeft, #bottomLeft, #topRight, #bottomRight {

  border: 1px solid #ff0000;

}



</style>



</head>



<body>

<div id="mainfloat">



<div id="leftColumn">

<div id="topLeft">text top left</div>

<div id="bottomLeft">text bottom left</div>

</div>



<div id="rightColumn">

<div id="topRight">text top right</div>

<div id="bottomRight">text bottom right</div>

</div>



</div>

<p>Main text Main text Main text Main text Main text Main text Main text Main text  

Main text Main text Main text Main text Main text Main text  Main text Main text 

Main text Main text Main text Main text</p>



</body>

</html>

The only main problem (once the borders are removed because the fluid float problem and IE/Win's box model problems come into play while they are there) I've found in my testing if the one I have run across before in that NS6.1 runs the text right under the floated box (this is an improvement as Op5 no longer does this so the NS problem should be fixable). Anyway have a look at that and a play and see if it suits and if you or anyone discovers how to fix the NS6.x problem I would be very grateful but I'll keep plugging away and see what I come up with.

[edit: code to stop scrolling]

Emps


You're my wife now Dave

[This message has been edited by Emperor (edited 11-25-2001).]

one of the first and most disheartening lessons I learned in design is to never use layers when tables will do...

tskull@hotmail.com">
"A kleptomaniac is a person who helps himself because he can't help himself." --Henry Morgan
ICQ: 67751342

Thanks...
I feel really bad, as I had all but given up on trying to make this work. I started on a new design, one that will hopefully work a little easier--thus page taken down.
Thank you for your work, Emperor, I will look into your solution as soon as time allows.
Things have been really busy at work lately, so personal projects get put on the back burner.
Will post again when project up and running on the priority list again.
mobrul

mobrul: I look forward to the new design and thanks for the query - it was the kick up the backside I needed to have another crack at this and I've made some more progress so I'm happy - a little more fiddling and I may have solved the problem (who knows?).

Petskull: Some days I feel you are right and others I feel full of missionary zeal to put misused tables to the sword.

All browsers suck - need I say more?

Emps


You're my wife now Dave