I have added a header, so that I may place application icon/name on left, then menu on left, then links on right.
However, I have an issue with CSS. There is, in html output, a div with no class, which places the top of my header 2px from top of browser window. This is the output as seen in Firebug, which I am using to find the CSS classes assigned to each html element.
<div style="position: absolute; top: 2px; left: 0px; width: 1440px; height: 23px;">
<div id="my_header">
<table style="width: 100%; padding: 0px; border: 0px none;">
<tbody>
<tr>
<td>My Application Name</td>
<td>
<div id="topMenu" class="dir_left dhtmlxMenu_dhx_skyblue_Middle">
<div dir="ltr" class="align_left">
<div id="xLgNJGnu2vNofile" class="dhtmlxMenu_dhx_skyblue_TopLevel_Item_Normal">
<div class="top_level_text">File</div>
</div>
<div id="xLgNJGnu2vNoedit" class="dhtmlxMenu_dhx_skyblue_TopLevel_Item_Normal">
<div class="top_level_text">Edit</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
2px isn’t so much, but then it adds 2px in other places also, so that my items in page will be pushed down more and more.
I see in the javascript, there are 46 occurrences of “2px” in dhtmlx.js, as well as 11 occurences of font-family. This is not good for me, because I spent hours fixing the CSS files so they do not switch between several fonts throughout application, and to use em values instead of px values for font. I don’t want to touch javascript because my windows editor breaks it, when I add paragraphs into the JS files.
Also, the CSS files do not validate in CSS Validator: validator.w3.org/
I would appreciate very much if you could make it better for me to design in the CSS.
I like the file for the Grid CSS, because each skin is contained in the dhtmlxgrid.css. This is well organized, because I don’t have to search through several files for item. But I would have liked a default skin that is applied if no other skin is applied. This one would be named default (not blue or skyblue), and would have all possible values listed in css file, as just another skin, but named “default”. This would be much clearer, because the default for each component isn’t the same, too, right?
Anyway, how can I get rid of the 2px and the height 23px? Must edit javascript?
Thanks so much!