Content div in IE [solved]

[mel]

Hi,
I need help to fix my design problem in IE. I took a template and rearrange a little bit to add some boxes. In Firefox, it's ok, but in IE, it's didn't work.
I know it's because the left box, but I dont know what I should do.

Some parts of my CSS and HTML code.

Code: Select all

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

/* Elements */

body {
	margin: 0;
	padding: 0;
	background: #FFFFFF url(uploads/images/design/img01.gif) repeat-x;
	font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #666666;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}

p, blockquote, ul, ol {
	margin-top: 0;
	padding-top: 0;
}


/* Container*/
#container {
width: 760px;
margin: 0 auto;
border-left: 3px solid #B6B6B6;
border-right: 3px solid #B6B6B6;
}


/* Header */

#header {
	width: 760px;
	height: 50px;
	margin: 0 auto;

}


/* Logo */

#sitename {
	float: left;
	
}

#sitename h1 {
	float: left;
	padding: 0em .25em 0.25em 0.25em;
	font-size: 1em;
}

#sitename a {
	text-decoration: none;
	color: #000000;
}



/* Splash */

#splash {
width: 760px;
	height: 140px;
	margin: 0 auto;

}


img.logo_top {
position: relative;
margin-bottom: 90px; 
margin-left: 30px;
}

img.logo_bot {
position: relative;
margin-bottom: 90px; 
margin-left: 20px;
}


/* Content */

#content {
	width: 750px;
	margin: 0 auto;
padding: 5px;
}

#content h2 {
	height: 25px;
	padding: 3px 0 0 25px;
	text-transform: uppercase;
	font-size: 1em;
	color: #000000;
	background: url(uploads/images/design/img05.gif) repeat-x;
}

#content h3 {
	font-size: 1em;
}


#texte {
	padding: 10px 31px 20px 31px;
}

#texte h3, h4 {
padding: 10px 0 10px 0;
font-size: 1em;
text-transform: uppercase;
color: #000000;
}


#annonce {
	float: left;
	width: 20%;
margin: 1em;
padding: 1em;
background-color: white;
		overflow: auto;
border-top: 8px solid #890F13;
        border-left: 2px solid #9B0101;
        border-bottom: 2px solid #890F13;
        border-right: 2px solid #9B0101;
}


#droite
{
background-color: #B6B6B6;
float: right;
overflow: auto;
width: 30%;
margin: -4em 1em 2em 1em;
padding: 0;
border-top: 8px solid #890F13;
        border-left: 2px solid #890F13;
        border-bottom: 2px solid #890F13;
        border-right: 2px solid #890F13;
}

#recherche
{
background-color: white;
margin: 1em 1em 0.5em 1em;
border: 2px solid #890F13;
padding: 0.5em;
}

Code: Select all

</__body>   
<div id="container">
<div id="header"><div id="sitename"><h1><a href="#">{sitename}</a></h1></div>
<div id="lang">	<p>{lang}</p></div>
          

      {* Start Navigation *}
      <div id="menu">
          {menu template='minimal' number_of_levels="1" includeprefix="he,lexique,quiz,liens,contact"}
      </div>
      {* End Navigation *}
	
</div>
   {* End Header *}


<div id="splash"><a href="#"><img src="uploads/images/design/banniere_p.jpg" alt="" width="493" height="140" /></a><a href="http://www.umontreal.ca"><img src="uploads/images/logo/UdeM_Blanc_petit.gif" alt="" width="103" height="40" class="logo_top" /></a><a href="http://www.chum.qc.ca"><img src="uploads/images/logo/chum_c_petit.gif" alt="" width="47" height="40" class="logo_bot" /></a></div>


	<div id="droite">
		<div id="menu2">
{menu template='cssmenu' collapse='1' start_level="2"}</div>
		<div id="recherche">{search submit="Rechercher"}</div></div>

  <div id="content"><h2>{title}</h2><div id="texte">{content}</div>	
    </div>


{* Start Footer. Edit the footer in the Global Content Block called "footer" *}
   <div id="footer"> 
{global_content name='pied'}

</div>
</div>{* end pagewrapper *}
<__body>
</__html>

And here my adress
http://www.labneuro.hostwq.net/

Thanks to everyone and especially to one who can solve my problem!!
Mel

[Dr.CSS]

You left out the part in your template where you told IE to do exactly what it's doing...

That is to be flexible, this is only if you need a fluid design, one that will move in width as the browser window changes size...


=b){nw=b+"px";}if(w



#container {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}



In your CSS you are telling it to be one width, fixed width, and Firefox is using that and your template header script is telling IE to be fluid, remove the above script/code from the head and it should be good...

[mel]

Hi,
Thanks for this. I just copy-paste without really knowing what it means...
It solve a part of problem in IE6 (I dont have IE7 in this computer). But unfortunately I didn't do any changes for my content, that is still under the right box...
Thanks!
Mel

[Dr.CSS]

Try taking the width out of content, and you may have to take out the next div for the 'texte' and use padding for your p to move the text where you want it...

[mel]

Thanks!!
I remove widht in content and it works!