473,399 Members | 4,177 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,399 software developers and data experts.

width: 100% problem

VK
Stock in one strange problem equal to both FF and IE.

With form width set to 100% the right border of form goes hell knows
where behind the screen. Is there a way to tell reliably to form to
take 100% of available space, where available space means the same as
with say table width="100%" - thus without going outside of the screen?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
"http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">
html {
margin: 0px 0px;
padding: 0px 0px}

body {
margin: 10px 10px;
padding: 0px 0px;
font: 1em Verdana, sans-serif;
color: #000000;
background-color: #FFFFFF}

form {
/* 100% of what? */
width: 100%;
margin: 10px 10px;
padding: 5px 5px;
border: thin outset;
background-color: #EEEEEE}

form fieldset {
margin: 10px 10px;
padding: 10px 10px}

form fieldset legend {
margin: 0px 0px;
padding: 5px 5px;
cursor: default;
font-weight: bold}
</style>
</head>

<body>

<form name="frm01" method="post" action="foobar.cgi"
<fieldset><legend>100% of what?</legend
<label for="foo">Foo:</label
<input type="text" name="foo" id="foo" accesskey="f"</fieldset
</form>


</body>
</html>

Apr 2 '06 #1
3 2529
VK wrote:
Stock in one strange problem equal to both FF and IE.

With form width set to 100% the right border of form goes hell knows
where behind the screen. Is there a way to tell reliably to form to
take 100% of available space, where available space means the same as
with say table width="100%" - thus without going outside of the screen? [...] form {
/* 100% of what? */
width: 100%;
margin: 10px 10px;
padding: 5px 5px;
border: thin outset;
background-color: #EEEEEE}


Use
padding: 10px;

on form's parent instead of

form {
margin: 10px 10px;
}

and remove the
width: 100%;
--
Johannes Koch
Spem in alium nunquam habui praeter in te, Deus Israel.
(Thomas Tallis, 40-part motet)
Apr 2 '06 #2
VK
Oops - I overlooked the thread
<http://groups.google.com/group/comp.infosystems.www.authoring.stylesheets/browse_frm/thread/7bec5fd9a15c3ebc>

Seemed first as another problem but I see now that it is the same just
from another end. So I guess it is an evangelism problem of the
standard box model. (I just noticed that leaving IE in backCompat mode
- no DTD - solves the problem, but only for this browser).

Apr 2 '06 #3
VK

Johannes Koch wrote:
Use
padding: 10px;

on form's parent instead of

form {
margin: 10px 10px;
}
Form's parent is body and I would really prefer to have its margins set
away from html rather than paddings. I still could go for it and replay
the schema but:
and remove the
width: 100%;


what simply means "use width:auto instead of width:100%". In such way
it works any way: with paddings or with margins, I already knew it.

So it doesn't answer my question really. But I already (sorry too late)
found a recent thread linked in my previous post. As I understand
width:100% is not usable by design in the standard box model, at least
with body as parent box. Shameful but not killing - there are some
alternatives, including yours.

Apr 2 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Graham J | last post by:
Apologies for the partial post that mysteriously escaped as I was composing. I shall try again. For many years I have been happily and successfully coding tables such that the WIDTH specified...
8
by: BiNZGi | last post by:
Hi I have reduced the problem to this code: <form> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td><input type="text" style="width: 100%;" value="Lorem ipsum dolor...
5
by: Chris Leipold | last post by:
Hi, I have a problem with an element of 100% width and a left paddig. The effect I try to achieve is easy, take a look at: http://swing-tanzen-verboten.de/test.html My Problem is, the width...
4
by: Alex Meier | last post by:
I have the following problem: I need a simple, tabular layout in a webshop. - left column: navigation column with approx. 170px width - right column: content area the goal: the left column...
4
by: Hiwj | last post by:
I am having a problem with a cell in a table in ASP.NET which used to work OK in classic ASP. I have one cell in a row where the width should be 22 pixels and the other cell should take up the...
50
by: Shadow Lynx | last post by:
Consider this simple HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>...
6
by: Hacking Bear | last post by:
Hi, I still don't quite fully understand how to handle mixing border/margin pixel width with percentage width. In the example below, I want to place side-by-side two DIV boxes inside a box....
3
by: McKirahan | last post by:
I have a Web page that uses some JavaScript and CSS. I have specified a three column table with a fixed-width left and right side; the center colum expands to fill the page. Within this...
4
by: lilOlMe | last post by:
Hi there! I'm developing a "scrollable table". At first I started using CSS. It worked pretty well until I found a bug that happens when placing this table into a tabbing control... So I...
1
pradeepjain
by: pradeepjain | last post by:
I have a 3 column layout left<->content<->right<->.I made a css and html in such a manner that when there is no left sidebar the content region starts from left side and takes whole width of left on...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.