21 replies [Last post]
Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Hello, I'm new to these forums. I've got a problem that I cannot solve no matter what I do.

It's about positioning.

These are basic styles:

html {
	margin:0px;
}
body {
	background-color:#FFCC00;
	margin: 0px;
}

Next I've got the typical container box:

#container{
	margin: 0px 10%;  /* 10% margin both sides */
	padding: 0px;
	background-color:#000066;
	width: 800px;
	height:auto;
}

This box container contains, among other boxes, one box called centralContainer wich comprises three column boxes in one line that must be in a row:

#centralContainer{
	width: 100%;
	background-color:#CCCCCC;
	position: relative;
}

Boxes contained in centralContainer:

#leftBar{
	font-family: Georgia, Verdana, Times, serif;
	background-color: #AAC6FF;
	color: #333333;
	float: left;
	width: 160px;
	height: 100%;
	margin: 10px 0px 10px 10px;
	padding: 5px;
	font-size: 10px;
	border: 1px solid #666666;
}
#main{
	background-color: #C8C8FF;
	color: #333333;
	height: 100%;
	margin: 10px;
	padding: 5px;
	border: 1px solid #666666;
	float: left;
	text-align: justify;
	width: 404px;
}
#rightBar{
	font-family: Georgia, Verdana, Times, serif;
	background-color: #AAC6FF;
	color: #333333;
	float: right;
	width: 160px;
	height: 100%;
	margin: 10px 10px 10px 0px;
	padding: 5px;
	font-size: 10px;
	border: 1px solid #666666;
	clear: right;
}

So, having a specific width of the side columns #leftBar and #rightBar (160px each), counting the side margins, paddings, borders and contents of all the three columns, and substracting it to 800px of the body, it makes 404px for the width of #main.

It is properly reflected in Firefox, but not in Internet Explorer, which creates an extra gap between two columns as if the total amount of widths were shorter.

Doing some tests, I've noticed, or I think so, that in Internet Explorer, the real content of a box is: the specified width(160px) minus something else.

It's similar on the opposite way: if I get my three columns aligned and distributed perfectly for IE, the third one doesn't have enough room on this line, so it appears below on the next line.

Could anybody help me please? It would be really appreciated.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem with Explorer but solved in Firefox

IE likes to have an extra 3px. Try googling on "IE 3px jog". PositionIsEverything probably has the definitive explanation.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

can you try adding display:inline to both the left and right floated columns and neutralize the IE double margin bug, and let us know how things stack up then.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

Thanks for the replies. Hugo, your solution makes the gap in Internet Explorer even longer, whereas it doesn't affect Firefox.

Chris, I've googled it and found the webside www.positioneverything.com, although I still cannot get rid of this gap.

Is there any other method to avoid this?

And another question: does the content width assigned to the box include the padding while excludes the margin? (In Firefox)

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

Quote:
Hugo, your solution makes the gap in Internet Explorer even longer

What Shock it shouldn't do.

Can we have a link to the page please to see things in action.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem with Explorer but solved in Firefox

Jazztronik wrote:
I've googled it and found the webside www.positioneverything.com, although I still cannot get rid of this gap.

Is there any other method to avoid this?

No it is a "feature". You can hide it by specifying a -3px margin on the appropriate side of the offending element.

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

so the rule: -3px margin

where should it go? within rightBar? main? the parent centralContainer?...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

No link then ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

Sad I don't have this page available on the web by now. If it's necessary I'll do it.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

For interests sake post all your html/css.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

ok, I'll try to get it working on the web tomorrow. Now it's late here!

Thanks! Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 46 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Problem with Explorer but solved in Firefox

the rule is

margin-right: -3px;

if goes on the element(Drunk with float:left;

conversely, margin-left: -3px goes on elements with float:right. In both cases the rule needs to be targetted at IE.

The best solution is not to require absolute pixel accuracy and to let 3px dissolve into your design. You'll be surprised how easy that is to accomplish. Designing around browser inconsistencies is much better than adding hacks to overcome them.

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

I put this web on my personal website. Now you can check it out. Note the contents are in Spanish, but I'm sure this will not be inconvenient:

http://www.luismartinsev.com/valencia_nightlife/index.php

you will see the gap IE adds and FF doesn't when putting the three ccentral columns.

Also, I'd like to know why in FF the container of the three columns doesn't expand to fit their height. You'll see this because the background color of their container is gray. This doesn't ocur in IE instead.

And one last thing. Although some bugs I had locally, seem to be solved on the Internet (for instance, the problem I had with the overflow of content in the central column works with IE too), there are some new bug that did not happen offline: the left margin I gave to the container layer is not applied online, whereas it works offline (locally). I gave a right and left 10% margin to the container. Do I have to use absolute units instead?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

This is exactly why I had asked that you post up your code as I now see that your snippet does not in actual fact represent your online example and as it was always going to be the case the real version contains content that can colour results, and was important that we had sight of this so as not to waste our time with bad advice.

Your page head is a mess and you are rendering in quirks mode, sort out your DTD placement get rid of that script at the top of the page, this effects results.

You're now left floating the right column where in your test case you had it right floated.

I still wonder why on earth focus was given to the 3px jog
look at this example based on your original snippet of code all I have done is placed display:inline on the two outer floats to clear the double margin bug; as things stood before your online page this evens the margins in IE:

  
<!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" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title></title>  
<style type="text/css">  
 /*<![CDATA[*/  
html {  
   margin:0px;  
}  
body {  
   background-color:#FFCC00;  
   margin: 0px;  
}  
#container{  
   margin: 0px 10%;  /* 10% margin both sides */  
   padding: 0px;  
   background-color:#000066;  
   width: 800px;  
   height:auto;  
}  
#centralContainer{  
   width: 100%;  
   background-color:#CCCCCC;  
   position: relative;  
}  
 #leftBar{  
   display:inline;  
   font-family: Georgia, Verdana, Times, serif;  
   background-color: #AAC6FF;  
   color: #333333;  
   float: left;  
   width: 160px;  
   height: 100%;  
   margin: 10px 0px 10px 10px;  
   padding: 5px;  
   font-size: 10px;  
   border: 1px solid #666666;  
}  
#main{  
   background-color: #C8C8FF;  
   color: #333333;  
   height: 100%;  
   margin: 10px;  
   padding: 5px;  
   border: 1px solid #666666;  
   float: left;  
   text-align: justify;  
   width: 404px;  
}  
#rightBar{  
   display:inline;  
   font-family: Georgia, Verdana, Times, serif;  
   background-color: #AAC6FF;  
   color: #333333;  
   float: right;  
   width: 160px;  
   height: 100%;  
   margin: 10px 10px 10px 0px;  
   padding: 5px;  
   font-size: 10px;  
   border: 1px solid #666666;  
   clear: right;  
}   
 /*]]>*/  
</style>  
  
</head>  
<body>  
  
<div id="container">  
 <div id="centralContainer">  
  <div id="leftBar">  
  </div>  
  <div id="main">  
    This is annonymous inline text without structure filled   
    out so that it may actually run on bellow the bottom of   
    the adjacent left float box so that we can see if the text looses it's 3px jog  
    and close up to the internal edge of it's container; it doesn't!  
    <p style="background:#fff;">Text in a paragraph to mirror line box above</p>  
  </div>  
  <div id="rightBar">  
  </div>  
 </div>  
</div>  
  
</body>  
</html>  


I'm not sure why you found the problems that you mentioned in applying this fix but you were applying it in a rather different scenario, which I have not really got time to study and now that I see the right column floated left changes things somewhat.

With floats if you want there parents to contain them you must clear the floats do a search on 'clearing float containers' there is a lot of info on this forum on this matter also look for the link on the index page to the page on the clearfix technique.

As for the other problems you need to fix up the markup errors before proceeding any further, it's not great to seek help when a layout is unvalidated in this fashion.

On a minor note the language used is for the intended target audience and matters not, but what I would say is that really class and ID selectors ought to be written in english as it is the international coding language so to speak, you're already having to write the properties in english why then change for the selectors it's just mildly confusing when trying at a glance to understand what a particular selector is for.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

The reason why I had to float the third column to the left like the others instead of floating it to the right like in the previous example was because on the Internet, this third column appeared displaced to the right edge of the browser without observing the container width of 800px.

You said:

Quote:
Your page head is a mess and you are rendering in quirks mode, sort out your DTD placement get rid of that script at the top of the page, this effects results.

What do you mean exactly?
Almost all the information in the head was implemented by Dreamweaver as the default html document.

Anyway, this is my index.php:

<!-- INICIALIZACIÓN Y PRECARGA DE BIBLIOTECAS -->
<?php 
session_start(); 
define('MAX_TAM_IMG', 500*1024); // Tamaño máximo en bytes de los archivos de fotos y logos a cargar en el servidor.
require_once('biblioteca.php');
@$opcion1 = $_GET['opcion1'];
@$opcion2 = $_GET['opcion2'];
?>


<!-- CABECERA DOCUMENTO-->
<?php
	head('Valencia Nightlife');
?>

<body>

<div id="container">
	<!-- CABECERA PÁGINA-->
	<div id="cabecera"> // header
		<div id="menus">
		<?php
			cabecera();
		?>
		</div>
		<?php
			menu_secundario();
		?>
		<div id="nompag">
		<?php
			echo titulo_principal($opcion1, $opcion2);?>
		</div>
	</div>
	
	<!-- PARTE CENTRAL: COLUMNAS Y CUERPO PRINCIPAL -->
	<div id="partecentral"> // Central body
		<!-- PARTE IZQUIERDA -->
		<div id="lateralizq">  // Left Side Bar
		  <?php lateral_izquierdo();?>
		</div>
		
		
		<!-- CUERPO PRINCIPAL -->
		<div id="principal"> // Main Content
			<?php principal($_GET);?>
		</div>
		
		
		<!-- PARTE DERECHA -->
		<div id="lateralder"> // Right Side Bar
		  <div id="login">
			<?php login();?>
		  </div>
		  <div id="anuncios">
			<?php mostrar_anuncios_derecha();?>
		  </div>
	  	</div>
		
		<div id="floated-image">		</div>
	</div>
	
	
	<!-- PIE DE PÁGINA -->
	<div id="pie"> // Footer
		<?php mostrar_pie(); ?>
	</div>
</div>

</body>
</html>

and my header() function called from above:

<?php 

// HTML Head, copy-pasted from Dreamweaver default HTML doc.
function head($titulo) {
?>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title><?php echo $titulo ?></title>
	<link href="estilos.css" rel="stylesheet" type="text/css">
	<style type="text/css">
<!--
.Estilo2 {font-weight: bold}
-->
    </style>
	</head>
<?php 
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

Regardless of what you're php script may be generating you have this (copied from your page link above)

 
<!-- INICIALIZACIÓN Y PRECARGA DE BIBLIOTECAS --> 
<script language="JavaScript" type="text/javascript"> 
var pagina="index.php" 
function redireccionar()  
{ 
location.href=pagina 
}  
</script> 
 
 
<!-- CABECERA DOCUMENTO--> 
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
	<html xmlns="http://www.w3.org/1999/xhtml"> 


Not what your script above is showing, although it is error in placing this html comment before the head function call:

?>

<!-- CABECERA DOCUMENTO-->
<?php
head('Valencia Nightlife');
?>


You need to move that comment within the head function at least not before the DTD.

I'm afraid that to say that all the code was implemented by Dreamweaver does not equal a good thing at all. DW is a terrible bit of software that causes more problems than it solves for you, use it as an editor by all means but don't allow it do any more complicated stuff.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Problem with Explorer but solved in Firefox

Quote:

Your page head is a mess and you are rendering in quirks mode, sort out your DTD placement get rid of that script at the top of the page, this effects results.

Quote:
What do you mean exactly?

If the DTD is not exactly right, IE will render in "quirks" mode and the appearance will differ noticably from browser to browser.

The DTD must be at the start of the xhtml document *before* anything else, even the <html> tag.

Quote:
Almost all the information in the head was implemented by Dreamweaver as the default html document.

I use Dreamweaver as an editor myself, but I don't let it create the base html or xhtml documents. In any event, Dreamweaver or not, it's the developer that's responsible for the actual code, don't you think? If the site doesn't work, blaming it on Dreamweaver won't, unfortunately, do much to deflect critisisms of it. Or at least it's never worked for me. Crying

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Jazztronik
Offline
Regular
Last seen: 14 years 21 weeks ago
Timezone: GMT+1
Joined: 2006-02-14
Posts: 16
Points: 0

Problem with Explorer but solved in Firefox

=D> =D> =D> =D> Cool Cool

Oh!! Thank you thank you thank you very much indeed, Hugo and Ed!

Incredible! Apart from the CSS problem you have solved at a stroke many other issues:

- my registration and login systems seem to work again perfectly (this didn't work since I changed the entire structure of my php files so as to delegate the HTML output tasks just to one file).

- Like you said, some elements don't appear different from what I intended, and are now free to be modified again. For instance, I couldn't change the size of the previous menu letters. Now I think I can.

I didn't even thought this detail about the DTD right after some other element might cause me such awful effects. Now I know. Your help is really appreciated. I owe you a lot! Laughing out loud

Please tell me, why is this DTD so important? I know the DTD validates XML, but I'm not as keen on it as I'd like.

Best regards!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 25 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Problem with Explorer but solved in Firefox

Jazztronik wrote:

Please tell me, why is this DTD so important? I know the DTD validates XML, but I'm not as keen on it as I'd like.

DTDs have been *required* for valid code since at least HTML 4.0 and probably before. Sure, most browsers will render your page without one, but they will render in "quirks" mode and there is no guarantee that they will render correctly or the same accross browsers.

xhtml is a dialect of XML and the DTD is *required* or it ain't xhtml, no matter how you do the rest of your coding.

You don't have to like them (who does?) but you can't live without them, not if you want your pages to actually work in compliant or semi-compliant browsers.

As a programmer of sorts, I always find the question "why should I use a DTD" to be like "when I program in "c", why must I declare all my variables explicitly?"

It's just the way things *are*.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

The DTD main function is as a pointer to the rules your code is following and is required in order that the W3C validator knows what set of criteria to compare your page code to.

The DTD has a second function as a 'Switch' this function is not specifically anything to do with the DTD but when it was realized that two modes of rendering were required - those being 'Quirks Mode' designed to accommodate older browsers poor understanding of CSS and 'Standards Mode' where a much stricter following of the CSS specification is implemented - a means of determining which mode a page intended to render in was required. The DTD declaration was a convenient method that was hit upon, if a page had a specific DTD then the browser's parser could use it to decide which mode to switch to.

The importance of these two 'Modes' is not to be overlooked, in quirks mode you will find many CSS properties do not function for example IE will not understand auto margins and FF in quirks follows something like one of the older NN browsers rendering of CSS.

Full standards mode (FF actually has three modes as it has a halfway house known as 'Almost standards mode' Smile is vital if your serious about working with the current CSS specification and if you want to cast out as much unpredictability as possible from your layouts.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Problem with Explorer but solved in Firefox

Hugo wrote:
FF actually has three modes as it has a halfway house known as 'Almost standards mode'

What does that behave like?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Problem with Explorer but solved in Firefox

As far as I have experienced, not a great deal of difference, but I generally avoid it by default with strict DTD's, it only triggers with transitional/framesets.

Personally for me it's all or nothing can't be doing with halfway houses Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me