After trying to develop a fluid CSS only layout entirely em based with min and max-width's I'm unsurprisingly stumped. I'm trying to get a Layout functioning from IE5 and up on all browsers/platforms. If anyone could give me any advice on these problems I would be very much appreciated. This has taken me a couple of weeks of work, bug hunting, redeveloping and now I really need some expert advice to move forward.
The website is available here: http://www.newearthpermaculture.com.au/bm/BusMentorMenu14.htm The css document here: http://www.newearthpermaculture.com.au/bm/BusMentorMenu14.htm The aim is very simple and yet seems unatainable in one browser or another each time I try something new. Majorly suffering CCS (Crasy Coder Syndrome). Javascript code: (entire problem with validation at the moment) I have doubled up on the javascript code due to the present code not looping through the entire Menu and applying mouse-over classes to all 'li'. This has forced me to add another javascript loop and add multiple uses id's which I want to avoid. Can anyone tell me how to force the loop to edit all 'li' not just the direct child decendants. Here is the line of code that needs editing: for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i]; The other issue with this code is the validation. The use of the un-escaped & stops validation. W3 recommends placing the script inside <!CDATA[]]> but this seems to stop IE5mac (and possibly others) from utilising the script. I can stick the code in a conditional comment but that seemed to stop IE5mac as well.(though now in hind sight I'm not sure why) Button Centering: The button for the login form isn't centered in IE5mac (a known bug). The solution is to wrap the text in a <span> which does indeed centre the text and then removes all functionality of the button. Anyone know of any other solution for this IE5mac bug? Text-input area: Since all elements in this layout at 'em' based the input elements struggle from each browser seemingly choosing a different font size for the input and thus varying the input area width and height. I can't find anyway to force a browsers input text dimensions etc. Image tinted: I've seen this in many of my layouts previously and I'm wondering if anyone can shed some light on it. In the Gecko rendering engine I get the left most image from the menu bar being tinted lighter and no other images get this effect. Cant' for the life of me know why this happens or solutions. The image is a png with transparency though its the same as the right end of the menu bar which doesn't have this issue. Menu layout: The aim so far is to get the menu to appear ontop of the bar which is proving more difficult that I expected. At the moment the layout only works in Safari, and Firefox on the mac. The menu appears under the bar and is pulled up through top:-2.5em at the moment. I've tried margin-top:-2.5em as well but nothing seems to work everywhere. I had a different system initially which was working in all but IE(win) but though all the testing I've regressed :( Win Testing: I work solely on the Mac so I run each layout through the 10 different browsers I have on hand. I have access to one IE6(win box and nothing else. So far IE Win is still well off being useable but if anyone has any recommendations for the code to make it IE friendly let me know. Thanks for any help anyone can provide Wesley Lamont ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
