ASP.NET - dealing with Layout & positioning - PART 2
Previously I have dealt with the problem of positioning in the web page. Yet there's another thing that I'd like to deal with, which is to layout the controls nicely. At first I thought of using the HTML table to segment the controls properly, but I have a problem with that. Once it's rendered into HTML, it may looks pretty with IE6 and IE7, but the positioning will definitely out with Firefox because of the absolute positioning.
During developing the content page, I drag a few HTML tables into the page, put all into relative positioning, and align them properly. Then, in order to add the controls into the table, I'll just drag the control and move it to the desired table (highlighted with blue frame), and it will align to the top left corner of the table to show that I drag to the right place. Note here, that the controls within the table are all absolute positioning. I can't use relative positioning here because the alignment process will not work. So once I'm happy with the arrangement, I tried to view it in IE6, and it looks fine, in IE7 it looks fine too with a few things that could be fixed, but when it comes to Firefox, everything went wrong.
Firefox some how rather not able to render the positioning of the controls, which has been translated into CSS style properly. So I was scratching my mind to find a way to do this because as a software engineer, it is my responsibility to make sure that the website will function and layout well across at least all browsers.
The solution is to use layout instead of table. Layout can be inserted through tools -> layout. With layout, we could add borders/edges and apply any kind of styles we desired. I did the same to layout as I did with table; insert the layout, with the layout still selected, make it relative positioning, and arrange it, then add the controls into the layout with absolute positioning, align all controls, align the layouts, finally build the website. The result is acceptable, it's able to be viewed well in IE6, IE7, and Firefox too!
Note here, that the source code of the controls and layouts in code view will have to be properly positioned as well to avoid any alignment flow problems later. Meaning that the first layout has to be on top, and the first control in the layout has to be on top as well, then followed subsequently by each control in their respective position.
During developing the content page, I drag a few HTML tables into the page, put all into relative positioning, and align them properly. Then, in order to add the controls into the table, I'll just drag the control and move it to the desired table (highlighted with blue frame), and it will align to the top left corner of the table to show that I drag to the right place. Note here, that the controls within the table are all absolute positioning. I can't use relative positioning here because the alignment process will not work. So once I'm happy with the arrangement, I tried to view it in IE6, and it looks fine, in IE7 it looks fine too with a few things that could be fixed, but when it comes to Firefox, everything went wrong.
Firefox some how rather not able to render the positioning of the controls, which has been translated into CSS style properly. So I was scratching my mind to find a way to do this because as a software engineer, it is my responsibility to make sure that the website will function and layout well across at least all browsers.
The solution is to use layout instead of table. Layout can be inserted through tools -> layout. With layout, we could add borders/edges and apply any kind of styles we desired. I did the same to layout as I did with table; insert the layout, with the layout still selected, make it relative positioning, and arrange it, then add the controls into the layout with absolute positioning, align all controls, align the layouts, finally build the website. The result is acceptable, it's able to be viewed well in IE6, IE7, and Firefox too!
Note here, that the source code of the controls and layouts in code view will have to be properly positioned as well to avoid any alignment flow problems later. Meaning that the first layout has to be on top, and the first control in the layout has to be on top as well, then followed subsequently by each control in their respective position.
Comments