6 replies [Last post]
marcosmyara
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Joined: 2007-12-19
Posts: 66
Points: 0

ive got a pretty straight forward css and html for this site i just started, and i already noticed i have a problem with ie's broken float model but i cant get rid of it.. theres an extra 3 pixel space between two floats(vertically), you can only see on ie 6 and most likely older versions..

its between the blue curve and the menu bar

the css:

@charset "UTF-8";
/* CSS Document */

html {height:100%;}

p,div,img, select {
margin: 0;
padding: 0;
border: 0;
}

body {
margin:0;
border:0;
padding:0;
font:75%/1.2 verdana,Helvetica,sans-serif;
background-color:#eeeeee;
background-repeat:repeat;
background:url(images/backgroundbg.png) 105px 105px repeat-x ;
text-align:center;
height:100%;
}

p {margin:0 auto; padding:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-indent:2em;
text-align:left;
width:600px;
}

/* ////////////// layout ///////////////// */

#container {
width: 100%;
min-width:700px;
margin:0 auto;
padding:0;
border:0;
height:100%;
background:url(images/barright_bg.png) top center no-repeat;
}

#header {
margin:0 auto;
padding:0;
background:url(images/headerbg.png) repeat-x;
width:100%;
min-width:800px;
height:139px;}

#headermid {
height:139px;
text-align:left;
margin:0 auto;
padding:0;
width:800px;
background: #fff url(images/header_bg.jpg) repeat-x;
}

#headerback {
margin:0;
padding:0;
height:124px;
float:left;}

#logo {float:left;}

#frase {float:left; margin:0 0 0 0px; padding:0 0 0 60px;}

#curveleft {margin:0;padding:0; float:left;border:0; height:102px;}

#main {
margin:0 auto;
margin-top:10px;
padding:0;
width:800px;
}

.title {margin:0 auto; margin-bottom:15px; padding:0;
height:62px;
width:380px;
background:url(images/title_bg.jpg) left no-repeat;
}
.title h3 {
letter-spacing:0.2em;
color:#4479bc;
font-size:1.9em;
font-weight:normal;
padding:10px 0 0 28px;
text-align:center;
}

/****************/
/* MENU *********/
/****************/

ul#menu {
list-style:none;
height:27px;
width:612px;
background:url(images/header_menubg.jpg) no-repeat;
margin:0px 10px 0 0px;
padding:0px 0 0px 90px;
font-family:Verdana, Arial, Helvetica, sans-serif; color:#fff;
font-size:0.95em;
line-height:27px;
float:left;
border:0;

}

ul#menu li {
display:inline;
padding:0;
margin:0 0 0 0;}

#menu a {
color:#FFF; /* need because it will use default link color */
float:left;
padding:0 3px 0 3px; /* left 3 px because of left.png image */
text-decoration:none;
}

#menu a span {
display:block;
float:none;
padding:0px 10px 2px 7px;
}

#menu a span img {
border:none;
margin:8px 4px 0 0;
}

/* show picture when mouse over link */
#menu a:hover{
background: url(images/left.png) no-repeat left center;
background-repeat:no-repeat;
background-position:left center;
}

#menu a:hover span {
background:url(images/right.png);
background-repeat:no-repeat;
background-position:right center;
}

#menu a:active{
background: url(images/left.png) no-repeat left center;
background-repeat:no-repeat;
background-position:left center;
}

#menu a:active span {
background: url(images/right.png);
background-repeat:no-repeat;
background-position:right center;
}

#menu a.right {
float:right; /* for help button - just add class "right" ->

the html:


DataClan





Bem Vindo à DataClan




Somos uma empresa especializada no desenvolvimento de sistemas informatizados para a automação do seu negócio.
Nossa equipe está pronta para auxilia-los na elaboração de portais e sistemas com tecnologia voltada para internet, intranets, desktop ou tecnologias móveis, ou ainda na implantação e treinamento de softwares livres na sua empresa.




Independente do tamanho e complexidade da sua necessidade, temos excelência para solucioná-lo da melhor maneira possível.



they both validate, its only a simple layout by now..

the site is up and running on www.myaraimoveis.com.br/dataclan/index.html

thanks!

Marcos.

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

marcosmyara wrote:theres an

marcosmyara wrote:
theres an extra 3 pixel space between two floats

3 pixel gap

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

marcosmyara
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Joined: 2007-12-19
Posts: 66
Points: 0

thanks tyssen.. i read

thanks tyssen.. i read through that but thats way too complicated... especially because they're talking about a p element relating to a float.. in my case, ive go two floats with space between them.. thats it.. ive got width and height on everything and i tried to put height:1% with the tan hack and didnt succeed..

maybe.. would it be smart to make that whole header one big image? ive seen it being done on other websites, but maybe coming from tables, i dont see that as a good idea.. maybe it is just more practical, i dont know about loading times tho.. can anyone give me any ideas? or maybe does anyone know exactly what to do to solve my case?

thanks

Marcos.

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

Sorry, make header_logo.jpg

Sorry, make header_logo.jpg display: block.

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

marcosmyara
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Joined: 2007-12-19
Posts: 66
Points: 0

did you mean to give the

did you mean to give the image "header_curve.jpg" a display:block ?

if yes, yeah that did solve the problem... any chance i may get some insight on why that did it?? Smile this way ill try not to come up with more simple questions like that..

thanks a lot

Marcos.

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

Because images are inline

Because images are inline replaced elements, browsers leave a space below the line box for the descenders of text characters, e.g. g, j, y etc. By making the image display: block you're telling the browser that it's not text anymore and so no need to leave room for the descenders.

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

marcosmyara
Offline
Enthusiast
Last seen: 11 years 46 weeks ago
Joined: 2007-12-19
Posts: 66
Points: 0

thanks a lot man!

thanks a lot man!