close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Table Overflow in Chrome

Thread began 4/20/2015 3:15 am by salaroche | Last modified 5/06/2015 12:45 pm by Ray Borduin | 1214 views | 8 replies |

salaroche

Table Overflow in Chrome

Hi:

In double checking one of my sites I noticed everything works well in IE and Opera but not in Chrome. There’s one page that in Chrome shows the table overflowing outside the page. The rest of the pages are working well.

Any idea why that particular table misbehaves?

Below please find the info for accessing the page in question.

Thank you for your attention

Sign in to reply to this post

Ray BorduinWebAssist

You aren't setting a size for form text fields and it appears chrome uses a larger size by default. The solution is to set a size in the css so that all browsers will render them the same. Something like:

form input[type=text] {
width:140px;
}
Sign in to reply to this post

salaroche

Hi Ray:

Thank you for your reply. However, as the examples below show, I am setting a specific size for each input field:

<input name="dateReg" type="Text" id="dateReg" tabindex="1"size="12" maxlength="12"/>
<input name="DOB" type="Text" id="DOB" tabindex="5"size="12" maxlength="25"/>
<input name="PersID" type="text" id="PersID2" tabindex="6" size="20"/>

Incidentally, that’s the same input-field format I’m using in the rest of the pages, but the rest of the pages don’t have any overflow problems, only the page in question. Please check out the rest of the pages and you’ll see.

Any idea why ONLY the “New Student Record” page malfunctions?

Thank you for your attention.

Sign in to reply to this post

Ray BorduinWebAssist

The size property is based on the default font size, which can also vary from browser to browser. The best bet for consistency is to use the css width attribute instead of depending on the size parameter of the input field.

Sign in to reply to this post

salaroche

Ray:

Thank you for your reply.

Excuse for insisting, but, as I mentioned before, I am using the same size formatting in ALL the pages, but the ONLY page that malfunctions is the one in question. If I'm not specifying any CSS width in ANY of the pages, how come only the page in question malfunctions? I am using the same browser to open the other pages (you can do that too) but ALL the other pages work well.

Excuse me for insisting, but, do you have an answer to that question?

Thank you for your attention

Sign in to reply to this post

Ray BorduinWebAssist

You would have to give me a link to other pages that work for me to comment on why they work and the other doesn't.

My best guess is that the other pages have enough room to accommodate the larger text fields in chrome. I'd really suggest never using the size attribute of input fields and always use css and the width attribute. Size is inconsistent cross-browser and this is the cause of the issue on that page.

Sign in to reply to this post

salaroche

Ray:

Thank you for your reply. To view many other pages that work well on the site in question please do as explained in the private section of this message. Please also note that I HAVE designed ALL of the other pages using THE SAME format I used in the faulty page, yet ALL the other pages work well in Chrome.

Thank you for your attention

Sign in to reply to this post

Ray BorduinWebAssist

The difference between this form and other forms is that it has 3 text fields on the same line. Since only the text fields are rendered larger in Chrome, it isn't an issue when forms don't have multiple text fields.

Notice on the "new class record" form you only have one text field on any given line. But in chrome that text field is clearly larger as it fills the entire cell but there is padding in other browsers.

"new assessment record" doesn't use standard text fields, so the issue wouldn't be a problem there. Remember as I stated originally, the issue is that Chrome is rendering text fields as wider than other browsers. "new attendance record", same thing, no text fields, therefor no issue.

The problem and solution are exactly as I've explained before. The fact that the other forms work reinforce my original conclusion because they would work given the problem as I assessed it.

Sign in to reply to this post

salaroche

Ray:

Thanks again for your reply. I've tried a couple of things following your suggestions and I think I got a solution for the problem.

Many thanks for your attention.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...