|
HTML - Table Not Resizing Correctly In Chrome
Hello everybody,
I'm writing here because I'm having a problem with Chrome resizing a table. I have a table representing one day (24 hours). In this table I draw activity bars using colspan. The precision for activities start/stop is 2 minutes, so I draw a table containing 30*24 <td/> tags. The table has 100% width as I want the chart to be resizable. The result is great in Firefox and IE8 (all columns resize the same way), but in Chrome, when downsizing page width, the columns resize one after the other, starting from the first. So the chart scale gets corrupted. Here is a sample code I used to reproduce the issue : Code: <html> <body> <table border="1" cellspacing="0" cellpadding="0" style="table-layout:fixed;width:100%;word-wrap:break-word;"> <tr> <td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/><td/> </tr> <tr height="30" valign="middle" align="left"> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex;">0h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">1h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">2h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">3h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">4h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">5h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">6h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">7h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">8h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">9h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">10h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">11h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">12h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">13h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">14h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">15h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">16h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">17h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">18h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">19h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">20h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">21h</div></td> <td colspan="30" align="left" style="border-right:1px solid #dddddd;"><div style="padding-left:1ex">22h</div></td> <td colspan="30" align="left"><div style="padding-left:1ex">23h</div></td> </tr> </table> </body> </html> Any idea about what's going on? Thank you very much for your help Stephane Similar Tutorialshello all, I am facing a wiered pbm on text area resizing in chrome 2 and safari 4. I have on textarea which gets enabled/focus upon completion of one method (init()) . But after successful execution of init() method that text area doesnt enable user to type UNTIL user resizes the text area. I have put a css to disable the resizing of text area with resize:none style. but still the text area on chrome 2 and safari 4 isnt getting snabled/focus after init() method. Any one plz help me to solve this , will be very thank ful to him. I have even tried few options like increase the size of text area but didnt wrk, What worked is if while defining text area if I put default value , then only it focus the text area afyer init() method. But this options clashes with my requirment thanks Ani I am primarily a PPC / offsite SEO guy. My html skills are horrible and I can't do much more than basic text modificaitons using Microsoft Expression Web. One of my clients who has the site: http://www.grandaffairrental.com/ displays correctly in Google Chrome on all pages of the site. However in IE and possibly other browsers on the bottom of the home page the text overlaps and looks like garbage. Similar probelms exist on: http://www.grandaffairrental.com/AboutUs.htm (bottom) http://www.grandaffairrental.com/Services.htm (bottom right) http://www.grandaffairrental.com/PriceList.htm If someone could kindly tell me how to rectify this I'd greatly appreciate the assistance. Thanks in advance. Hello. I am currently making a website using tables. Basically I'm collecting php data feeds from an open-source CMS and feeding the data into different table cells via a php tag in each. I'm using a single background image for the whole table as I want that image to stay the same and I can't really use CSS for this. However, I cannot keep my table the same size. Of course, when my table shifts, it knocks all my data out of line and it doesn't sit right with the background image anymore. It is only about 780 pixels wide and I don't want it to resize with browsers etc, the size it is is fine to stay like that all the time. The text that is feeding into it doesn't appear to be wrapping and then just stretches the table, even though I've specified widths etc already. Any help would be much appreciated. Ta. I have a table with the height attribute set to 100%. This is displayed within a frameset. The table has a thin border on the right, and I want this to be continuous for the full height of the frame when displayed, irrespective of the content. The problem is that the table doesn't fill the frame, so the border stops leaving a gap. How can I get the table to resize to fill the frame? Hi Can someone tell me how I can stop an image from moving behind a table - next to it - when the browser window is reduced? Here's the page http://www.tall-shiprace.com/2009/04/19/1247/ When I re-size (from the bottom right corner of the browser) the image floats behind the table - to the left of the image. Can this be stopped?? Hi! this is really weird. I build a simple page with a table with a background picture. In Explorer it's all good but in Chrome & Firefox, you cant see the background picture of the table. help please? thanks Jeni I want to know why the following code doesn't work correctly: Code: <table>
<tr>
<td rowspan="2">Square</td>
<th colspan="2">Title</th>
</tr>
<tr>
<td colspan="2">Information</td>
</tr>
<tr>
<td colspan="3">Long description fits in here.</td>
</tr>
<tr>
<td colspan="2">Why, oh why?</td>
<td>pt</td>
</tr>
</table>
It should make a table with three columns, the third column is only really used in the bottom line. Is this just a problem with the way html is read or what. I presume this isn't just a browser issue, but in any case I'm using Firefox 2. Cheers. problem is fixed, no need to read. Hello, I have a website that displays fine in every browser I've tested but Chrome. The only problem is my borders. In order to get fading rounded edges I made each block a 3x3 table, like this: Code: <div class="general"><table class="bgtable"><tr><td class="bgtopleft"></td><td class="bgtopcenter"></td><td class="bgtopright"></td></tr> <tr><td class="bgleft"></td><td class="primary"> example post </td><td class="bgright"></td></tr><tr><td class="bgbottomleft"></td><td class="bgbottomcenter"></td><td class="bgbottomright"></td></tr></table></div> and here's the applicable portion of my stylesheet: Code: body
{
font-family: sans-serif;
font-size:11pt;
letter-spacing : 0.03em;
line-height : 130%;
color:white;
background-color:white;
}
.container
{
margin: 0 auto 0 auto;
width: 900px;
}
.general
{
background-color:#70a055;
margin: 0px 135px 10px 130px;
}
table.bgtable
{
border:none;
border-collapse: collapse;
width:635px;
}
table.bgtable tr
{
border:none;
}
.bgtopcenter
{
height:20px;
background-image:url(/data/bgtopcenter.gif);
background-repeat:repeat-x;
}
.bgtopleft
{
height:20px;
background-image:url(/data/bgtopleft.gif);
width:18px;
overflow:hidden;
}
.bgtopright
{
height:20px;
background-image:url(/data/bgtopright.gif);
width:18px;
overflow:hidden;
}
.bgbottomcenter
{
height:20px;
background-image:url(/data/bgbottomcenter.gif);
background-repeat:repeat-x;
}
.bgbottomleft
{
height:20px;
background-image:url(/data/bgbottomleft.gif);
width:18px;
overflow:hidden;
}
.bgbottomright
{
height:20px;
background-image:url(/data/bgbottomright.gif);
width:18px;
overflow:hidden;
}
.bgleft
{
background-image:url(/data/bgleft.gif);
background-repeat:repeat-y;
width:18px;
overflow:hidden;
}
.bgright
{
background-image:url(/data/bgright.gif);
background-repeat:repeat-y;
width:18px;
overflow:hidden;
}
In most browsers everything lines up right, but in chrome it looks like this: Any suggestions? Thanks for reading. This is driving me nuts. Try this code in IE6. Why are the three red rows on the left showing a height of considerably more than 60pixels when the code asks for exactly 60? Firefox shows this correctly. Code: <html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="20" width="195" valign="center" bgcolor="#AAAAAA"><p> </p></td>
<td rowspan="5" width="415" valign="top" style="padding: 20px;" bgcolor="#FFFF66"><p>Middle column</p></td>
<td rowspan="5" width="290" height="440" valign="top" bgcolor="#AAAAAA"><div align="center">Right column</div></td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 1</td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 2</td>
</tr>
<tr>
<td width="195" height="60" valign="center" bgcolor="#FF0000">Row 3</td>
</tr>
<tr>
<td valign="top" bgcolor="#FFFF66"> </td>
</tr>
<tr>
<td colspan="3" bgcolor="#FFFF66"> </td>
</tr>
</table>
</body>
</html>
Hi, I am designing my first website by teaching myself HTML using google, etc, so I am very new to designing from scratch (without using Dreamweaver, etc). My webpage is not online yet, so I can't post a link - sorry! First, I am using .png image files which look great in Google Chrome, but when I check my page in IE, the images look horrible - very pixelated. Why is that, and is there a way to fix them? My only thought would be to use a "smoothed out" image such as a .jpg, however that might make the problem even worse. Second, I am using frames and in my main frame I'm using a table with text on the left column and an image on the right column. Again, in Google Chrome it looks great with the text at the very top of the frame/table, but in Firefox, there is tons of space at the top of the table which makes the text too "tall" for the window, and a scroll bar is necessary. I hope I've explained this properly and would greatly appreciate your help - I have many more questions as well! Thanks so much, Kristen Hello, I'm kinda new to HTML, but have used it for a long time, just haven't used it to do stuff from scratch before. I was wondering how I would set up a page to resize and not have scrollbars. I'll attach an example. I want there to be a footer that will ALWAYS be at the bottom of the window, not just the content. I wan to have a middle section that will stretch between my header and footer, and I want it to have somewhat of an internal scrollbar if the content inside is bigger than the window: Code: The header footer, and middle section should fill the browser window ----------------------------------------------- header ----------------------------------------------- xxxxxxxxxxxxxxxxxx[^] -------------- xxxxxxxxxxxxxxxxxx| | | content: height=100%| | | | xxxxxxxxxxxxxxxxxx| | | | xxxxxxxxxxxxxxxxxx| | | more | xxxxxxxxxxxxxxxxxx| | | here | xxxxxxxxxxxxxxxxxx[v] _________| ------------------------------------------------ footer(bottom aligned to browser window ------------------------------------------------ Ok the ASCII isn't working too well... EDIT: Ok I got the footer working, but what about making the middle part span the width from the bottom of the header to the top of the footer without stretching out the page? I have a site which uses frames. I recently added a new page and in the page there is a link to open up a jukebox ,I made, in the upper frame. The frame the link is in is below the one where it is suppose to open. Everything works fine but the size for the top frame is smaller than the jukebox I want in there. So when you open up the link it opens the jukebox up but only a portion is shown. I have it so you are allowed to scroll but I'd prefer that the frame would be automatically rezized to fit the jukebox. Is that possible? If so can you please let me know how? Any Help is Appreciated Is there a way to disable the resizing of a window in firefox? I'm using this code: window.open('google.com','newwin','width=200,height=200,resizable=no') In Internet Explorer it's working fine but in Firefox it's not Thanks Hi, I've created a page in a table that's 1080 pixels width with 3 columns, two side bars that are 165 and 200 pixels with banners and ads and a central panel 600 pixels for content and my screen settings are 1024x768 when I change my screen resolution to a smaller setting the table stays the same size but the content in the three columns shrinks so the page does not fit properly in the table and everything is out of place. What is the best way to format a page to stay the same no matter what the screen resolution or screen size is? Thank you in advance for your help. Sorry it's an intranet site but here is the html. Thanks for the tip Zegron <html> <head> <title>OCC Net</title> </head> <body> <table WIDTH="100%" valign="top" border="2" cellpadding="0" cellspacing="0"> <tr> <td></td> </tr> <tr> <td rowspan="200" width="163" valign="top"> <!--#include file="includes/links.asp"--> </td> <td align="left" valign="top" width="620"> <!--#include file="includes/CenterPanel.asp"--> </td> <td width="220" valign="top" rowspan="200"> <!--#include file="includes/RightMenuHome.asp"--> </td> </tr> </table> </body> </html> OK, what I want to do is set an image in a cell which will change size as the browser window is resized. So, say I have a three-cell table: ------------------------------------------------ | ---------------------------------------------- | | ---------------------------------------------- | |----------------------------------------------| | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | | ,,,,,,,,,,,,,,, | ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, | ------------------------------------------------ It is set to width=100% and height=100% (using css). The top cell has a fixed height of 50, the bottom-right cell has a fixed width of 600 (all this is just hypothetical, the actual page will be much more complicated). So, the bottom-left cell will be changing in height and width as the browser window is resized. The problem is that when I put an image in the cell and say height="100%" and width="100%" the thing doesn't work. If I give the cell and image a set width or height, the other dimension (height or width) stretches just fine. I know that the problem is that the image wants to maintain a certain aspect ratio (say, 1:3). What I want to know, in short, is if there is any way to override this and make the image render to the size of the cell whether or not that maintains the proper aspect ratio. Hi there, I have some text inside a layer and I am pretty happy with it. Trouble is that I would like to disable the resizing from the browser so that the user cannot choose a text size that would mess up my text. I am refering to "View > Text Size" in IE. Can u help? Thks hi.i need some help : i got a web page that looks something like this how can i make the background image to autoresize according to the screen resolution of the monitor from where the page is seen?same with the banner and the rest of the images.i basically want my website to look exactly like in the picture no matter what is the resolution of the screen and without a scroll bar. and another thing: how can i make to load only the text on the orangebox when i click a side link(e.g:assus) without refreshing the hole page.and how can i put a scroll only on the orange box so i can put a longer text and not to exit from that rectangular space? thank you I have a link that needs to open in a new, smaller window. I have the target="_blank" attribute set but the window opens at full size. I know that some people advise against opening links in a new window, but I need this one to do so. Any help greatly appreciated. I have a site which I made relative and positioned to my 15" laptop screen... instantly I found a problem when I saw it on a smaller screen... and then on a larger screen... I need to somehow figure out a way for the images, text and div boxes to resize relative to the monitor being used. I've figured it out for the div tags, using a percentage, rather than pixel... but imaging size/possitioning and text size are a little more trickier to figure out? Code: .logo{
position:absolute;
width:100%;
top: 11px;
}
The images have been given a pixel width and height because the actual image is slightly bigger. What can I do? I work it out by dividing my screen resolution: (1280 x 800) by the actual pixels on my screen to get a percentage... is this the right way? (for example the div class .logo is 11 px from the top... would this then be 11 / 800 (resolution height) ... which gives me 0.013% is there another way perhaps? |
|||||||