keeping it in the border

[maxelcat]

Dear All

If you kindly view the link

http://www.maxelcat.co.uk/maxel/index.html

in firefox then the phone numbers etc at the bottom sit nicely on the violet border - whcih is where I wnat them and where I think the code that i have written puts them.

However, same link in IE6 and 7 puts the text over the line.

Can anybody tell me what I am doing wrong and what I need to do to get the positioning right.

The css for the above page is below

Many thanks
Edward

/* CSS Document */

/*Level the playing field...*/
html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6 forms, fieldset	{
margin:0px;
padding:0px;
border:0px;
}


/*Define fonts for the whole site. Yext align:center is a IE5 bug fix - doesn't use margin:auto*/
body	{
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

/*center the whole page, give it a width of 740px
test-align:left undoes the IE5 bug fix in body, and puts all text back to the left. Good old microsoft*/
#wrapper	{
width:740px;
margin:0px auto;
border:0px solid black;
text-align:left;
}


#banner	{
margin-top:10px;
padding:0px;

}

/*navigation based on ul/li with altered properties*/

#nav	{
width:500px;
border: 0px solid orange;
}


/*line height is adjusted by eye until the links line up with the bottom of the maxelcat*/
#nav ul	{
padding:0px;
margin:0px;
background-color:#ffffff;
font-size:14px;
font-weight:bold;
line-height:120px;
}
#nav ul li	{
display:inline;
padding:0px;
margin:0px;
}

#nav ul li a{
color:#000000;
background-color:#ffffff;
padding:0px 15px 0px 15px;
border-right:1px solid #8fd6ab;
text-align:center;
text-decoration:none;
}

#nav ul li a:hover, #nav ul li a:focus {
color:#ffffff;
background-color:#8fd6ab;
text-decoration:none;
}

/*center block container this block is fixed.*/
#mainblock_container	{
margin-top:10px;
padding:0px;
border:0px solid black;
}

.tabletext	{
background-color:#8fd6ab;
}

.tablewhite	{
background-color:#FFFF00;
}


.imageright	{
float:right;
}

#thumbnails	{
margin:10px 0 0 0;
border:0px solid purple;
padding:0px;
}

#footerlist	{
padding::0px;
margin: 10px 0 0 0;
border:1px solid violet;
text-align:center;
}

#footerlist ul	{
padding:0px;
margin:0px;
background-color:#ffffff;
font-size:12px;
font-weight:bold;
line-height:120px;
}

#footerlist ul li	{
display:inline;
padding:0px 10px;
margin:0px;
}

#footerlist p	{
font-size:12px;
text-align:left;
}

.floatleft	{
float:left;
}

.floatright	{
float:right;
}

 

[traingamer]

What are you expecting

<br clear="all" />

to do?

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[maxelcat]

I have

<div id="footerlist">
blah blah
<p class="floatright">
blah blah
</p>
<p class="floatleft">
blah blah
</p>

<br clear="all" />

</div>

Footer list is defined as having a border. I want it to go round the two floating classes as well. It doesn't.

If I leave out the <br clear="all" /> then the border doesn't not go round the floated elements. If I have it in then in firefox I get a border round everything, and in IE it kind of cuts the text in the floating sections in half.

Any ideas please???

Edward

 

[traingamer]

Floated items float independently of their containing object.
Floated items float independently of their containing object.
Floated items float independently of their containing object.

In laymen's terms, they soemtimes stick out of the containers. That's what float is supposed to do.
I suggest you look at Eric Meyer's article on Containing Floats.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[Vragabond]

[tt]clear="all"[/tt] is not really correct attribute and value for html. Cosider doing that in CSS. Other than that, you should consider another element to do the clearing, because IE has some problems with accepting <br /> as a clearing element. You could go with a hidden horizontal rule.

 

[maxelcat]

Thanks all

very helpful article!

Put height:0;line-height:0;clear:both; as a class and bob's your uncle

 

[traingamer]

Excellent.