<li> e float... problemi?

M

mgaggia

Scusate ma non riesco proprio a venirci a capo.
Se inserisco un float (come nell'esempio sotto) margin e padding non
funzionano bene.
Mi spiego facendo riferimento all'esempio sotto

Così com'è il margin-top impostato in
indirizzo-basso
e il padding-bottom impostato in
lista-testo-sezione

funzionano in ie6 ma non in firefox 1.5.0.4 che non spazia di nulla i
due elementi

Se tolgo float da
testo-sezione
tutto ok sia in ie che firefox, però la lista compare in verticale.
Qual'è il problema? Un aiutino?

1000 Grazie


<!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="it-IT"
lang="it-IT">

<head>
<meta name="GENERATOR" content="xxxx" />
<meta http-equiv="Content-Language" content="it-IT" />
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"
/>
<meta name="description" content="xxxxxx" />

<style type="text/css" media="all">
#pagina{
background-color:#FFFFFF;
color:#000000;
width: 777px;
margin: 0 auto;
}
#piepagina{
clear: both;

padding: 0px;

margin: 0px;
margin-top: 5em;
}
#area-testo-sezione{
margin: 0em;
padding: 0em;
}

..lista-testo-sezione{
display: list-item;
list-style-type: none;

padding: 0em;
margin: 0em;
margin-bottom: 1em;

}

#indirizzo-basso{
clear: both;

font-family:Verdana,Arial,Tahoma,sans-serif;
font-size:0.65em;
color:#C6CDDA;
background-color:#1c396a;

padding-top: 0.6em;
padding-bottom: 0.6em;
padding-left: 10.3em;
padding-right: 0.3em;

margin: 0em;
margin-top: 10em;
}
..riferimenti{
FONT-STYLE: normal;
FONT-FAMILY: Verdana,Arial,Tahoma,Helvetica,sans-serif;
color: #C6CDDA;
text-decoration: none;
}
#area-testo-sezione{
margin: 0em;
padding: 0em;
}

..link-testo-sezione{
color:#1C396A;

margin: 0em;
padding: 0em;
}

..testo-sezione{
color:#000000;
FONT-FAMILY: Verdana,Arial,Tahoma,sans-serif;
font-size:0.75em;

margin: 0em;

padding: 0em;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: 0.4em;
padding-right: 0.4em;

float: left;

}

</style>

<title>Test padding</title>
</head>

<body id="pagina">
<div id="piepagina">
<div id="area-testo-sezione">
<ul class="lista-testo-sezione">
<li class="testo-sezione">[ <a class="link-testo-sezione"
href="#">home</a> ]</li>
<li class="testo-sezione">[ <a class="link-testo-sezione"
href="#">pippo</a> ]</li>
<li class="testo-sezione">[ <a class="link-testo-sezione"
href="#">pluto</a> ]</li>
<li class="testo-sezione">[ <a class="link-testo-sezione"
href="#">paperino</a> ]</li>
</ul>
</div>
<div id="indirizzo-basso">
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla</a>
</div>
</div>
</body>
</html>
 
D

dorayme

mgaggia said:
Scusate ma non riesco proprio a venirci a capo.
Se inserisco un float (come nell'esempio sotto) margin e padding non
funzionano bene.
Mi spiego facendo riferimento all'esempio sotto

Così com'è il margin-top impostato in
indirizzo-basso
e il padding-bottom impostato in
lista-testo-sezione

funzionano in ie6 ma non in firefox 1.5.0.4 che non spazia di nulla i
due elementi

Se tolgo float da
testo-sezione
tutto ok sia in ie che firefox, però la lista compare in verticale.
Qual'è il problema? Un aiutino?

1000 Grazie
Click to expand...

Over to you Luigi on this one... lets see how you go...
 
J

jojo

mgaggia said:
Scusate ma non riesco proprio a venirci a capo.
Se inserisco un float (come nell'esempio sotto) margin e padding non
funzionano bene.
Mi spiego facendo riferimento all'esempio sotto

Così com'è il margin-top impostato in
indirizzo-basso
e il padding-bottom impostato in
lista-testo-sezione

funzionano in ie6 ma non in firefox 1.5.0.4 che non spazia di nulla i
due elementi

Se tolgo float da
testo-sezione
tutto ok sia in ie che firefox, però la lista compare in verticale.
Qual'è il problema? Un aiutino?

1000 Grazie
Click to expand...

May I remind you that you have posted in an international NG? So do you
mind using English, so not only Italians can read your post? Would be
nice of you...
 
M

mgaggia

May I remind you that you have posted in an international NG? So do you
mind using English, so not only Italians can read your post? Would be
nice of you...
Click to expand...
I'm sorry but when I writed this post I'm not realize that this is an
international NG. I find this NG because I read one post in italian
language.

This is the problem

When I use the float/clear in the same class with margin and padding,
the browser (ie and firefox) doesn't not work in the same way. In my
example if I cut the float from class test-sezione ie and firefox work
in the same way otherwise not.
It is possible to solve this problem?
Thanks
 
M

Martin Jay

In message <[email protected]>,
mgaggia said:
When I use the float/clear in the same class with margin and padding,
the browser (ie and firefox) doesn't not work in the same way. In my
example if I cut the float from class test-sezione ie and firefox work
in the same way otherwise not.
It is possible to solve this problem?
Click to expand...

I've commented out the two lines causing your problem:

..lista-testo-sezione{
/* margin-bottom: 1em; */
}

#indirizzo-basso{
/* margin-top: 10em; */
}
 
M

mgaggia

I've commented out the two lines causing your problem:
Many thanks, but I don't undestand what is the problem. How can I set
the margin without this line?
Mauro
 
M

Martin Jay

Many thanks, but I don't undestand what is the problem. How can I set
the margin without this line?
Click to expand...

To be honest I found it a bit difficult to follow what you had done.
There seemed to be lots of unnecessary things in both the HTML and CSS.

I think one of the main causes of your problem was that you floated <li>
elements which took them out of the flow of the document.

Anyway, I put together a cut-down, lite version:
<http://www.spam-free.org.uk/pages/layout_page.html>

It can be downloaded from:
<http://www.spam-free.org.uk/pages/layout_page.zip>
 
M

mgaggia

I think one of the main causes of your problem was that you floated said:
elements which took them out of the flow of the document.
Click to expand...
You suggestion (display: inline;) solved my problem.
Many thanks.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Fading effect between play and play-over and pause and pause-over 0
Align img inside nav tabs section 5
Justify-content not working 1
Working on mobile css menu with plenty of frustration! 2
Not sure why drop-down is not working. 2
How to keep an a:hover effect with css like "onMouseOut()"? 2
Radio player with now playing 1
menu bar and banner responsive issues....any guidance is appreciated! 0

Members online

No members online now.
Total: 387 (members: 0, guests: 387)
Robots: 409

Forum statistics

Threads
474,431
Messages
2,571,677
Members
48,796
Latest member
Greg L.

Latest Threads

Top