Firefox div layout and select

ASP Free Forums Sponsor:

October 26th, 2007, 03:38 PM

xtrmclmb

Registered User

Join Date: Oct 2007

Posts: 3

Time spent in forums: 43 m 13 sec
Reputation Power: 0

Firefox div layout and select

Hello:

I am trying to make a page layout in firefox 2.0.0.8, but I'am having a problem with a div that is badly layed out.

The problem appears when y try to use a html SELECT with some OPTIONs inside the html FORM. When I put the OPTIONs, the layout breaks.

This is the simplified code for testing:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <TITLE>Pruebas</TITLE>
   </HEAD>
   <BODY style="padding: 0px;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, Sans-Serif;
	font-size: 0.7em;
	color: black;
	background-color: while;">
		<div style="display:table;">
			<div style="width:168px;height:250px;border:1px solid brown;float:left">
				column 1
			</div>
			
			<div style="width:800px;height:50px;border:1px dashed red;display: table">
				<div style="width:398px;height:50px;border:1px solid green;float:left;margin:0px;padding:0px">
					column 2.1
				</div>
				<div style="width:398px;height:50px;border:1px solid blue;float:right;margin:0px;padding:0px">
					column 2.2
				</div>
			</div>
			
			<div style="border: 1px solid magenta;height: 200px; width:600px;float:left">
				<form name="cambioDeDatosDeBusqueda" method="POST" action="consulta_movimientos_cuenta.html">
					<select name="numeroDeCuenta" size="1" title="msg">
						<option value="2">3456wertgsdfgh</option>
						<option value="3">asdfasdcxvbnrsthfasdfadf</option>
						<option value="4">asdfasddertertefasdfadf</option>
						<option value="5">dsdfg</option>
					</select>
				</form>
				column 3
			</div>
			
			<div style="border: 1px dashed red;height: 200px;width:200px;float:left;">
				column 4
			</div>
		</div>
   </BODY>
</HTML>

When you remove the OPTIONs, the column 4 div appear at the right of column 3; when you put back the OPTIONs, column 4 div appears beneath column 3 div.

This looks OK on IE. I could not find the way to solve this.

Please, help.

Thanks.

Camilo.

October 26th, 2007, 06:56 PM

minus4

short arse brainiac

Join Date: Jun 2005

Location: Leeds UK

Posts: 573

Folding Points: 800 Folding Title: Novice Folder

Time spent in forums: 4 Days 1 h 22 m 36 sec
Reputation Power: 30

your problem is the inside outside thing with borders.
mozilla borders are external ( the correct way )
ie is internal ( the microsoft only way )

you need to account for div width plus boder width per side when
you set your container width

so div 10px wide with 2 px border is not 10px it is actually 14 due to an extra 4px of border so your container is 14px wide not 10

__________________
A girl's best asset is her 'lie'ability.

For Sale: Parachute. Only used once, never opened, small stain.

that fold thing

October 26th, 2007, 07:48 PM

xtrmclmb

Registered User

Join Date: Oct 2007

Posts: 3

Time spent in forums: 43 m 13 sec
Reputation Power: 0

Hello, minus4:

I just tried what you daid, but that is not the problem.

I simplified the case, now it involves only 3 divs, one main div and 2 inner divs, like this:

Code:

+------------------------------------+
| +----------+ +----------+          |
| |  COLUMN  | |  COLUMN  |          |
| |     3    | |     4    |          |
| |          | |          |          |
| |          | |          |          |
| |          | |          |          |
| |          | |          |          |
| +----------+ +----------+          |
+------------------------------------+

1. First. the problem case. Note that there is enough space for both inner divs inside the surrounding div.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <TITLE>Pruebas</TITLE>
   </HEAD>
   <BODY style="padding: 0px;
        margin: 0px;
        font-family: Verdana, Arial, Helvetica, Sans-Serif;
        font-size: 0.7em;
        color: black;
        background-color: while;">
<div style="display:table;border:1px solid green;width:600px">
	<div style="border: 1px solid magenta;height: 200px; width:250px;float:left">
		<form name="cambioDeDatosDeBusqueda" method="POST" action="consulta_movimientos_cuenta.html">
			<select name="numeroDeCuenta" size="1" title="msg">
				<option value="2">3456wertgsdfgh</option>
				<option value="3">asdfasdcxvbnrsthfasdfadf</option>
				<option value="4">asdfasddertertefasdfadf</option>
				<option value="5">dsdfg</option>
			</select>
		</form>
		column 3
	</div>
	
	<div style="border: 1px dashed red;height: 200px;width:250px;float:left;">
		column 4
	</div>
</div>
   </BODY>
</HTML>

This does not work well on firefox. Try it so you can see.

2. Now the working case: the only differences are removed OPTIONs tags:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <TITLE>Pruebas</TITLE>
   </HEAD>
   <BODY style="padding: 0px;
        margin: 0px;
        font-family: Verdana, Arial, Helvetica, Sans-Serif;
        font-size: 0.7em;
        color: black;
        background-color: while;">
<div style="display:table;border:1px solid green;width:600px">
	<div style="border: 1px solid magenta;height: 200px; width:250px;float:left">
		<form name="cambioDeDatosDeBusqueda" method="POST" action="consulta_movimientos_cuenta.html">
			<select name="numeroDeCuenta" size="1" title="msg">
			</select>
		</form>
		column 3
	</div>
	
	<div style="border: 1px dashed red;height: 200px;width:250px;float:left;">
		column 4
	</div>
</div>
   </BODY>
</HTML>

This work well on Firefox.

Why could it happen??

I also tried it on IE and Konqueror, and both shows as expected in both cases.

Please, help.

October 27th, 2007, 06:01 AM

minus4

short arse brainiac

Join Date: Jun 2005

Location: Leeds UK

Posts: 573

Time spent in forums: 4 Days 1 h 22 m 36 sec
Reputation Power: 30

okay fixed in firefox:

first i took off the table value, i then added a zero padding and margin to the form, and most important of all i did a <br style="clear:both;" /> this is to clear your floats, everything now fits inside your green box, and on one line.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
      <TITLE>Pruebas</TITLE>
   </HEAD>
   <BODY style="padding: 0px;
        margin: 0px;
        font-family: Verdana, Arial, Helvetica, Sans-Serif;
        font-size: 0.7em;
        color: black;
        background-color: while;">
<div style="border:1px solid green;width:600px">
	<div style="border: 1px solid magenta;height:200px; width:250px; float:left">
		<form name="cambioDeDatosDeBusqueda" method="POST" action="consulta_movimientos_cuenta.html" style="padding:0px; margin:0px;">
			<select name="numeroDeCuenta" size="1" title="msg">
				<option value="2">3456wertgsdfgh</option>
				<option value="3">asdfasdcxvbnrsthfasdfadf</option>
				<option value="4">asdfasddertertefasdfadf</option>
				<option value="5">dsdfg</option>
			</select>
		</form>
		column 3
	</div>
	
	<div style="border: 1px dashed red;height: 200px;width:250px;float:left;">
		column 4
	</div>
<br style="clear:both;">
</div>

   </BODY>
</HTML>

October 27th, 2007, 09:41 AM

xtrmclmb

Registered User

Join Date: Oct 2007

Posts: 3

Time spent in forums: 43 m 13 sec
Reputation Power: 0

Hello, minus4:

Thank you.

Now I understand.

Best regards.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: