Hello all, First off, I'm new to this list. I'm a newbie in CSS design, but I'm trying. In the past few weeks, since I'm member, I've already seen some solutions that are completely new to me, so i hope i can learn from what i read.
Now, the problems On http://test.mspijker.nl/app/test.php There are three CSS files added actually, the rest is echoed by PHP because of several reasons, and might have to be added later.: http://test.mspijker.nl/css/main.css http://test.mspijker.nl/css/windows.css http://test.mspijker.nl/css/menus.css Can missing CSS files be a cause for problems? (They are not used in the page, just included) What I'm trying to do, is to create a web application, that should look like a 'normal' application. For now, only a menu and a window are there, and there is still a lot of work to do. The colors are defined by the W3 user interface colors, and are recognized by the validator, without any errors. However, even on a simple code like this, I'm running into some small problems in the CSS part of it already. First: In the 'menu' Options, the first four options are sub menu headers. In FireFox/Opera, these menus are displaying nice. However, in IE(6) these options start to behave strange, they are changing height, as if they receive extra padding. (See Options->Charts->Features) The hover effect has been set by Javascript, on the LI elements, without adding classes or id's. (element.onmouseover/out), so in my opinion this should not affect the styles of these elements. Second: Is there a way to leave the width of the menus to auto? When i remove the 200px width of the menu ul, they are as wide as their li parent. In FF/Opera and IE. This 200px width causes text wrapping, as can be seen in the menu 'Report', for the item 'Metal Loss Inspection Performance Specification', so if possible, i would like to have it set to an auto-width. Third: The window control images are not floating all to the right in IE(6). In FF/Opera they look nice though. In IE6, there is some spacing showing between the images, even though in the code there are no white spaces there. Margins and Padding have been set to 0. Is there something that i have to change in line-height? I've tried that, but it didn't seem to work. Or can it be that it is caused by the paragraph element? An header element would make more sense, but it does not allow img tags in it, does it? Are floating elements taken out of the flow of the document? If so, are elements flowing behind floated elements? In that case, i could insert the images before the p element. Fourth: I've used <a> elements without name or href. In FireFox and Opera, these are nicely styled, but in IE it isn't. This is not a very big issue, but if it can be fixed, i would like to know. I do realize however, that this is not 'the way' to use <a> elements. Fifth: How can i position an element at the bottom of the window, without taking it out of the document flow? What i would like to have, is a div that is inserted between the menus and the footer, and it is taking up all the space available. Maybe it is easier than i thought, by just creating it full height, and put a margin at the bottom, equal to the height of the footer element? Then the footer can be positioned absolute ofcourse. Sixth: At this moment, i have the container div inserted before the menu div. The reason for this is, that in IE the menus were showing up behind the windows. I've tried to change the order with z-index, by setting the windows to a z-index of 1, and the menus to a z-index of 10, or even higher, but this didn't work. The only way i could fix it, was by inserting the content before the top menus. In my idea, this should be possible in a different way. As far as i understood, z-index can only be applied on absolute positioned elements. In my case, the menu UL's and the windows are absolute positioned. Can anyone help me on that? The image on the menu background is not to stay. It is there to see if anything goes wrong if i change some things in the CSS. See it as a sort of alignment. (For example, padding-left of 20px on the li elements, and the the images with margin-left -18px didn't seem to work in IE, that why the blank gif's are included) According to W3, the page is valid XHTML 1.0 Transitional, and the CSS isn't giving me any errors. Just some 'warnings' about not having colors with my background colors. I guess this should not be a problem as well. The code is generated by PHP, so if the code is too messy, I'm sorry.. By the way, the application should be designed for IE6, FF and Opera. The clients of my company operate around the world, and not all of them have IE7 installed. So, any fix, also for IE6, is welcome. I can't test on IE7 (yet), because of this reason. I'll have to wait for my company to give me a VMWare setup for that . (And then maybe also a Linux environment to test.) So any comments on other issues are welcome as well. I'm sorry for the lengthy text, but help would be highly appreciated. Thanks and regards, Mark ______________________________________________________________________ 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/
