george Posted October 28, 2009 Share Posted October 28, 2009 My site uses tables to partition the screen into three columns. I know, I am supposed to use CSS for that - but the left and right sides are empty, and variable length dependant on the length of the middle column. They serve as color bands only, and must extend to the bottom of the middle column. And since tables does that nicely, I used tables. More tables - Inside the middle column, are the various sections of a dinner menu. Each section is a table of different length. After fiddling with how to position these, I finally decided on position:relative. I carefully positioned all the little tables in Firefox, and it looked wonderful. Then I went to IE 8, and carefully positioned the tables for IE in the conditional comment, as prescribed. Again, looked wonderful. Then I went back to Firefox. AFU. Now please, I did the Firefox style sheet coding in the style sheet section of the HTML, and I did the IE corrections outside of the style section, and in it's own conditional comment section. I know the conditional comment section is not supposed to mess with the style sheet section, but it did. My site, and my HTML, now looking good in IE can be found here. Anyone know what I did wrong? Or, if I took the wrong approach altogether, how SHOULD I approach this? Link to comment Share on other sites More sharing options...
thescientist Posted October 28, 2009 Share Posted October 28, 2009 yikes, the validator's results for this site scare me alone!well, as you already know, tables are not the ideal way to layout a website. It really is a piece of cake to google "CSS three column layout" and find tons of ready to use example to do just what you want. and the good one's will let you know how to clear your div's so your side div's will extend all the way down like you want. Link to comment Share on other sites More sharing options...
george Posted October 28, 2009 Author Share Posted October 28, 2009 yikes, the validator's results for this site scare me alone!My apologies for not validating before asking. This one had the wrong doc type to begin with. It should have been HTML 4 Tansitional. This reduced the number of errors from 113 to 13, but correcting these did not fix the firefox rendering problem. I still have two issues giving me a "Tentatively checked as HTML 4.01 Transitional" message. All errors are now corrected. But the original problem persists. Is position: relative ever to be used? Am I using it improperly here? Link to comment Share on other sites More sharing options...
Ingolme Posted October 29, 2009 Share Posted October 29, 2009 If it's "tentatively" then your page is probably not running in standards compliant mode, which is important when laying out the site because the browser uses a different rendering engine.Try adding a <!DOCTYPE> tag to the document.position: relative is usually only used to position other elements absolutely within the current element. But if you want to make layouts that work correctly, you shouldn't need the position property at all, it's best if you don't mess with it. Link to comment Share on other sites More sharing options...
thescientist Posted October 29, 2009 Share Posted October 29, 2009 no tables Link to comment Share on other sites More sharing options...
george Posted October 29, 2009 Author Share Posted October 29, 2009 no tables All the sections of the menu contain tabular data. So thoes areas I have used tables. But I position the tables using CSS position:relative, then specifying top and left. I got it to work in Firefox. Then got it to work in IE using the comment conditional code after the firefox compliant style section. This has worked for me in the past, but this time fixing for IE threw off the Firefox. I did try using CSS exclusively in my first round. But that still required relative positioning - just a whole lot more of it. Link to comment Share on other sites More sharing options...
thescientist Posted October 29, 2009 Share Posted October 29, 2009 All the sections of the menu contain tabular data. So thoes areas I have used tables. But I position the tables using CSS position:relative, then specifying top and left. I got it to work in Firefox. Then got it to work in IE using the comment conditional code after the firefox compliant style section. This has worked for me in the past, but this time fixing for IE threw off the Firefox. I did try using CSS exclusively in my first round. But that still required relative positioning - just a whole lot more of it.the point is that you are using tables to create your columns, not just to exclusively hold "tabular" data. Although to be fair that is from memory and based on your original post, as I can't get your page to load anymore to confirm what I just said, haha.You should CSS to make your columns, and then you can use tables, styled with CSS, within that for your menu stuff. Link to comment Share on other sites More sharing options...
jeffman Posted October 30, 2009 Share Posted October 30, 2009 This might be a dead issue, but I threw together a solution that seems to work. The markup is pretty clean, the CSS is short, and it looks consistent in Firefox and IE7. (I still don't do IE8.) AND there's no need for IE conditionals, which bug me on general principles. The result is a combination of divs, CSS, and tables for the individual menu sections, since I think menus count as tabular data, and alignment is simplified in tables.The real trick was using a repeating background to create the colored borders instead of creating page elements for them. To put the content in the correct spot, we just use really deep padding. An old sort of trick.I did not bother with the image map, mostly because you took it down. This may also explain any significant differences in appearance. I played with it last night, but some I had to recreate from memory, and I may have goofed. I'm sure you can make appropriate changes.http://www.sophox.com/ilporto/ Link to comment Share on other sites More sharing options...
george Posted October 30, 2009 Author Share Posted October 30, 2009 I threw together a solution that seems to work. http://www.sophox.com/ilporto/ Wow, Thank you. I will study yours tomorrow. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.