Click to See Complete Forum and Search --> : div behaving not the same way in ie and firefox


amrigo
06-01-2007, 04:28 PM
Hi

This link :

http://www.sandrorigo.pro.br/angelorigo/eglobalservice/portal/index.php?action=imigracao

does not work on ie and firefox exactly the same way. In Firefox the text drop out of the divīs borders..

How can have a tableless design browser compliant?

here is my css code:
#container {
width: 90%;
margin: 2px auto;
background-color: #fff;/**/
color: #333;
border: 1px solid gray;
line-height: 130%;
/*height: 350;*/
}

#top {
padding: .5em;
background-color: #333399;/*ddd*/
border-bottom: 1px solid gray;
}

#top h1 {
padding: 0;
margin: 0;
}

#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 0.1em;
text-align: left;
}

#rightnav {
float: right;
width: 160px;
margin: 0px;
padding: 0.2em;
text-align: left;
}

#content {
margin-left: 100px;
border-left: 1px solid gray;
margin-right: 100px;
border-right: 1px solid gray;
padding: 0.4em;
max-width: 36em;
height: 250;
text-align: left;
}

#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}

#leftnav p, #rightnav p { margin: 0 0 0.2em 0; }
#content h2 { margin: 0 0.1em 0; }

#navcontainer{
margin-bottom: 1em;
overflow: hidden;
width: 100%;
height:26px;

}
#navlist{
list-style-type: none;
margin: 0;
padding: 0;
height:26px;
color: #FFFFFF;
border-left: 1px solid white;


}
#navlist li{
float: left;
/*line-height: 1.1em;*/
margin: 0 .3em 0 -.3em;
padding: 0 .3em 0 .3em;
background-image: url(imagens/men1d.gif);
background-repeat: repeat-x;
height:26px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
border-right: 1px solid white;
border-left: 1px solid white;
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color:#0033FF;

}


.barranav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.barranav a:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.barranav a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
background-color:#003399;
}
.barranav a:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}
.barranav a:active{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
}

.footer{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}

.texto{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: left;
padding-left: 6px;
}
.textop{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
.titulo{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.linguagem{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #FFFFFF;
}

.linguagem a:active{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #FFFFFF;
}

.linguagem a:link{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #FFFFFF;
}

.linguagem a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #FFFFFF;
}

.linguagem a:visited{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
font-weight: normal;
color: #FFFFFF;
}

ray326
06-01-2007, 09:24 PM
For starters you've got a lot of HTML mark up problems so you need to start by validating your HTML then your CSS.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.sandrorigo.pro.br%2Fangelorigo%2Feglobalservice%2Fportal%2Findex.php%3Faction%3 Dimigracao

drhowarddrfine
06-01-2007, 09:37 PM
In Firefox the text drop out of the divīs borders..
Divs are NOT to expand to contain floated content. This is a bug in IE. Firefox is performing correctly as usual.