Member Avatar for davy_yg

Hello,

Please cek this site:

I am having a problem with the textbox and textarea of the footer in different browser:

Browser Appearance

Firefox v
Chrome x
IE x
Safari x

I wonder why the size appears differently di different browser:

footer.php

<div id="inside2">
<br><br>
<table>
<tr>
<td style="width:90px;">Nama      :</td>
<td style="color: black;"><input type="text" name="nama" size="22"></td>
</tr>
<tr>
<td style="width:90px;">Message   :</td>
<td style="color: black;"><textarea rows="5" cols="19"></textarea></td>
</tr>
</table>

<br><br>

</div>
  • 2 Contributors
  • 4 Replies
  • 290 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Browsers use different default styles and font metrics, so controls that are sized by characters or left to user‑agent defaults will rarely match across engines. Character-based attributes (the input size and textarea cols) are measured against the current font, and default padding/border and the box model can differ. Using a table for layout also locks cell widths and makes fluid scaling unreliable. Those three things together explain why the footer form looks fine in Firefox but not in Chrome/IE/Safari.

A minimal set of fixes that will produce consistent, responsive controls:

Add the responsive viewport tag in the document head so mobile breakpoints behave as intended:

<meta name="viewport" content="width=device-width, initial-scale=1">

Control widths with CSS instead of size/cols or inline pixel values. A small, portable rule that makes inputs and textareas match and fit their container:

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

input[type="text"], textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font: inherit;
  padding: 0.4rem 0.6rem;
  display: block;
}

Bootstrap notes and quick troubleshooting: Bootstrap does not require building four separate sites — its CSS contains breakpoints (media queries) that apply automatically when the viewport tag is present. Using the framework’s grid and form classes (instead of table layout and inline styling) makes forms fluid. As recommended, move styles to a stylesheet. To debug differences, compare computed padding/border/font-size in each browser’s devtools and test with mobile emulation and real devices. The combination of viewport + consistent box-sizing + CSS widths will usually resolve the cross‑browser width mismatch seen by .

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

Here you go with inline styling again. We all have different screens so perhaps you should provide a composite sceenshot of what u see and what u would like to see. Is it supposed to be static size or responsive?

Member Avatar for davy_yg

The textbox size appears differently in each browser type. It only looks neat in firefox. I expect the textbox size to be in equal width as the textarea size.

This is a responsive website.

I also have quick questions about bootstrap.

This is the tutorial for bootstrap grid system:
Grid Classes

The Bootstrap grid system has four classes:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

It has 4 types of code for different container. So do I have to create 4 types of bootstrap websites for each container?

How does the computer knows which code to choose for each containers? Can it auto select which website folder it has to appears if it is for android or if it is for a desktop?

Member Avatar for davy_yg

Hello,

There is something strange here:

I thought by using bootstrap my website should appears different in cell phone (Android) compare to PC.

In PC browser my website is already liquid like it adjust to its container.

I wonder why in cell phone it does not. I thought it should be the same way!

Cek this out:

The first page: (I already use xs (for phones) )

It still appears like non-responsive website.

This one: (I am using md (for desktops) ).

It only liquids on desktop but not on cell phone.

---------------------------

How to make a responsive website that is liquid on cell phone?

Member Avatar for Member #120589

Davy. Read the documentation on bootstrap. You do not have to create 4 diff sites. That.s the whole point. Please read the section on grids and responsive aites carefully. All the info is there.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.