 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / October 2007Table with 100% width of page instead of page in IE7
I set a table with 100% width to occupy all available space, but in IE7 it uses more than that, it uses 100% of the page width instead of 100% of the table container. Could you test the page in IE7 and in other browsers please? http://auriance.com/docs/tmp/test.html I'd like the main content and the right menu on the same level. It's working fine in most browsers except in IE7. Do you know how I can fix it? Thanks. Ok, I found out. If I set the container to width: 100%, then the table fits properly. In article <1193345447.270895.170870@22g2000hsm.googlegroups.com>, > I set a table with 100% width to occupy all available space, but in > IE7 it uses more than that, it uses 100% of the page width instead of [quoted text clipped - 7 lines] > it? > Thanks. Put in a 4.01 Strict doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> right at the top of your html page and this should fix.  Signaturedorayme > Put in a 4.01 Strict doctype: > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" > "http://www.w3.org/TR/html4/strict.dtd"> > > right at the top of your html page and this should fix. Thanks dorayme. The problem is that with a doctype I can't enable quirks mode to use all page height to center a page vertically. Charles. >> Put in a 4.01 Strict doctype: >> [quoted text clipped - 5 lines] > Thanks dorayme. The problem is that with a doctype I can't enable > quirks mode to use all page height to center a page vertically. Then you are screwed. Standards mode does not centre "vertically". You are solving the wrong problem. You should be looking into why you need to centre a "page" vertically. Vertically in what? The current viewport? Why? What does this gain your viewer? Invoking quirks mode in the couple of browsers that support it is not the solution. If you show us what you have to date, even the quirks mode version, we may be able to help. URL? SignatureRichard. > >> Put in a 4.01 Strict doctype: > >> [quoted text clipped - 17 lines] > If you show us what you have to date, even the quirks mode version, we may > be able to help. URL? Yes, I agree with rf, it is highly unlikely to be a good solution. The doctype that made your problem disappear on my Winbox is almost certainly more advantageous overall than a couple of tactical advantages you may have found. What exactly is it that you want to vertically centre? Is it something small that is somehow more attractive on most?/average?/medium? screens/browser sizes? Signaturedorayme > Then you are screwed. Standards mode does not centre "vertically". Yeah, I know, the view port stops where the content stops and not in the lower boundary of the screen. > You are solving the wrong problem. You should be looking into why you need > to centre a "page" vertically. Vertically in what? The current viewport? > Why? What does this gain your viewer? Yes, centered vertically and horizontally in the browser. I can achieve it in quirks mode: http://auriance.com/docs/tmp/notcenter.html If I add the doctype, I'm in standard mode and it doesn't work anymore: http://auriance.com/docs/tmp/notcenter.html > Invoking quirks mode in the couple of browsers that support it is not the > solution. Ok, I actually can achieve it in standard mode but only stuffing the code with javascript and lately I have dropped it, I'm using quirks mode with less code. If you have another suggestion, please let me know. Thanks, Charles. [...] > http://auriance.com/docs/tmp/notcenter.html [...] > Ok, I actually can achieve it in standard mode but only stuffing the > code with javascript and lately I have dropped it, I'm using quirks > mode with less code. If you have another suggestion, please let me > know. Well, this should work in strict mode in Firefox, Opera and Konqueror: html, body { margin: 0; padding: 0; height: 100%; /* I suspect this is what quirks mode is giving you in this case */ } table { width: 100%; height: 100%; } td { /* These are preferable to align="center" */ vertical-align: middle; text-align: center; } <body> <table> <tr> <td>Centre of screen</td> </tr> </table> </body> > Well, this should work in strict mode in Firefox, Opera and Konqueror: > [quoted text clipped - 24 lines] > </table> > </body> Thanks, indeed, it's working fine: http://auriance.com/docs/tmp/xhtml.html I could remove safely "padding: 0;" from html, body, it's still working fine. What I don't understand is that the browsers consider the viewport is all the window and not the content (just one line). What do you think? Thanks anyway :-) Charles. [...] > Thanks, indeed, it's working fine: http://auriance.com/docs/tmp/xhtml.html > I could remove safely "padding: 0;" from html, body, it's still > working fine. Most browsers have a bit of margin on body by default, but some may use padding instead, so it's safer to set both to 0. The idea is to make sure that body's content area is exactly the same as the viewport, no smaller, or you'll end up with an annoying short scroll bar. > What I don't understand is that the browsers consider > the viewport is all the window and not the content (just one line). > What do you think? That's just what the viewport is defined as. Its dimensions are whatever the user sized the window to. > Most browsers have a bit of margin on body by default, but some may use > padding instead, so it's safer to set both to 0. The idea is to make > sure that body's content area is exactly the same as the viewport, no > smaller, or you'll end up with an annoying short scroll bar. I'll keep it, then. > That's just what the viewport is defined as. Its dimensions are whatever > the user sized the window to. Alright, thanks for everything :) Charles. > Well, this should work in strict mode in Firefox, Opera and Konqueror: > [quoted text clipped - 24 lines] > </table> > </body> Hello guys, Me again :-) The above doesn't work with a division, does it? http://auriance.com/docs/tmp/xhtml.div.html Please let me know, thanks. Charles. >> Well, this should work in strict mode in Firefox, Opera and Konqueror: >> [quoted text clipped - 30 lines] > The above doesn't work with a division, does it? > http://auriance.com/docs/tmp/xhtml.div.html No. Vertical-align: middle means something different when not applied to a table cell. It means align text to the middle of the line box instead of to the baseline (actually it means move it up from the baseline by half the ex-height of the div's "strut") In this case it just moves your text up by a small number of pixels. Vertical centering is not easy to achieve without tables or display: table unless you're prepared to set an explicit height. If you've really got just one line of text saying something like "Centre of screen" then you can just set the div's height to 1.2em or so. If you can set width and height something like this should work: position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 1.2em; width: 15em; text-align: center; See also http://www.student.oulu.fi/~laurirai/www/css/middle/ > If you can set width and height something like this should work: > [quoted text clipped - 9 lines] > > See alsohttp://www.student.oulu.fi/~laurirai/www/css/middle/ Thanks Ben. Actually, text will be "Loading..." :) I tried your suggestion, it's working fine in Opera but not IE7 :( http://auriance.com/docs/tmp/xhtml.div.html I read the article (pretty good). The problem in my case is that height is variable... Any idea? Thanks, Charles. >> If you can set width and height something like this should work: >> [quoted text clipped - 15 lines] > I read the article (pretty good). The problem in my case is that > height is variable... If it's just one line-- "Loading..."-- then I was thinking you could set the height to about 1.2em. That should be about the right size. Otherwise you need a table, and if you want it to work in IE, that means a <table>. > If it's just one line-- "Loading..."-- then I was thinking you could set > the height to about 1.2em. That should be about the right size. > > Otherwise you need a table, and if you want it to work in IE, that means > a <table>. Thanks Ben, yes, in my case I'll use this: http://auriance.com/docs/tmp/align.div.html Seems to be working fine in most browsers. If I need to center a Flash movie, I'll take care of the height of the movie and I'll substract 1/2 of its height in the negative top margin to keep it centered :) Cheers, Charles. In article <1193416504.612525.219370@57g2000hsv.googlegroups.com>, > ... centered vertically and horizontally in the browser. I can > achieve it in quirks mode: [quoted text clipped - 5 lines] > > http://auriance.com/docs/tmp/notcenter.html ? Signaturedorayme |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.