1st real attempt at xhtml strict with a few minor problems

[dc dalton]

First i wanted to say thanks for all of the great info here..... I have been a web developer since 99 but always shyed away from full css sites due to browser concerns ........ those days are over.

Anyways I started reading last week & made my first stab at a full xhtml strict site with a tableless design ........ PLEASE Ignore the colors, I made the mistake of picking them on my laptop - Ill fix that later.
The page can be found at www.dcddesigns.com/rant/test.html I put all the css in the head for ease of reading. Ive looked at it in IE 5(see below) & 6, FF 1.0, Mozilla & NN7... so far almost so good.

I have a few problems that Im not quite getting. In IE 5 the menubar (on the right) has gapping holes between the sections.... Yes Ive read all the tutorials about the IE bugs but I dont think they apply to this....

In both IE 5 & 6 when you resize the browser smaller the whole right section drops below the text area ........ NN7, FF & Mozilla dont do this ..... how can I tell IE to stops dropping the floats below?

OK now to Opera (oh I can hear the groans now & I agree) Is this bucket of junk even worth trying to please. Nothing seems to work in 5 OR 6 - heck nn 4.7 LOOKS BETTER! (well not really). I cant get the drop dowsn to work & from what Ive read out there the d in dhtml doesnt work. Im using the getElementById for the drop downs ... anyone know a fix for Opera to handle this?

Lastly can I get some Mac people to look at this & let me know whats happening there ..... I dont have access to a Mac.

Feel free to beat me up, say what you feel --- Im a BIG boy & can handle it!

Once again thanks for the great site & the great info!

[Paul O'B]

Hi,

Its getting late so I'll just answer one of these points now.

In both IE 5 & 6 when you resize the browser smaller the whole right section drops below the text area ........ NN7, FF & Mozilla dont do this ..... how can I tell IE to stops dropping the floats below?

The problem is that you have made your content 65% wide and at some stage there will not be enough room for your 250px menu to sit alongside and ie will then look for space underneath. That is the nature of floats and is difficult to avoid in certain situations.

The way I would have approached your layout would be to float the right menu (first in html) and then let your content be static but with a margin-right of 300px (approx). This will ensure that the menu has 250px of space for most of the time and the screen will get quite small before it drops.

Alternatively give your menu a percentage width also so that it shrinks as well and stays in view longer.

If your content is always to be longer than the menu then you could place it absolutely to the right and it will just overlap the centre when the screen gets too small (probably not a good solution).

I need to sleep now

Paul

[Paul O'B]

This code will close the gap in ie5 as best as can be done:

 #menu li {
	padding:0;margin:0;
	background-color: #474BE6;
	border-top: 1px solid #000000;
	border-bottom: 1px solid #c0c0c0;
	}

/* commented backslash hack v2 \*/ 
* html #nav_menu li a {height:1%;position:relative}

/* end hack */

Paul

[dc dalton]

thanks for looking - Ill attempt changing around the code today as you mentioned in the two posts & see what happens - would it make more sense to enclose the three side divs (updat, menu & search) into an eclosing div? I dont want to start getting crazy with nesting as Ive seen a lot posted here about that but in this case, trying to float 3 divs next to one my first instinct would be to try containing them in one so you only have to deal with floating it.

[Paul O'B]

Sometimes it helps to enclose things but it does depend on the situation. It won't stop a float from dropping unless the height has been fixed and even then ie will still try.
The problems with floats is that they were designed to do that so that users on smaller screen sizes wouldn't need to scroll. However in relaity its a bit of a pain when you don't want them to drop.

There is one advantage in enclosing content in a float in that if you need to use a clear:both then the clear is restricted inside the parent float. Firefox 1.0 has now taken to clearing all floats previous to it and not just those in the same stacking context as before.

I do have some complicated example that don't drop but they involve negative margin techniques and are a little bit too complicated for their own good.

http://www.pmob.co.uk/temp/2colum_so...der_image3.htm

The above avoids float drop but I'm not sure it will work with the smaller column to the right (I'd have to play around with it but I'm short of time today).

Paul