Firefox vs IE6 1

[audiopro]

I am still learning CSS and have hit a problem.
The following code renders ok in IE6 but in Firefox, the border does not surround the printed text and the container div is not coloured.
Could anyone suggest a cure/cause?
This is part of a larger problem where IE6 and Firefox render the page differently but this is the section which is causing the problem.

Stylesheet
.testcon{
width:240px;
background-color:#abcdef;
border-width: 2px;
border-style: solid;
border-color: #666666;
}

.testdiv{
width:100px;
margin:5px;
float:left;
background-color:#345678;
}

HTML creation
Fills div-testcon with 2 vertical rows of 10 div-testdiv 
print "<div class='testcon'>";

for($x=0; $x<20; ++$x){
   print "<div class='testdiv'>This is the content</div>";
}

print "</div>";

Keith

http://www.studiosoft.co.uk

 

[BabyJeffy]

You need to give the divs with a class of testdiv a height (as well as a width) since you are floating them. Try using height: 1.8em since that will adjust the height based on the text size (and handle resizing).

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

What is Javascript? FAQ216-6094

 

[audiopro]

In Firefox, Even with a height set, the border does not surround all the child divs it appears as a 2px. line above the first pair of child divs.
IE6 displays correctly whether a height is set or not.

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

Actually, I suggest you read up on [google]clearing floats[/google]. There are many methods and techniques, some better than others and different methods work best in different circumstances.

 

[audiopro]

Thanks for that, the explanation is a bit heavy going but I get the jist of it. There must be an easier way than all this tweaking and twiddling.
I need to get this working asap so I am going to do this bit with a table. I will have a look into making it CSS at a future date.

Keith

http://www.studiosoft.co.uk

 

[Vragabond]

The simple way to do it is just adding an element at the bottom that clears it all. Something like:

<hr style="clear: both;" />

You can even set the visibility of the element to hidden to make it not show on the page. This of course is additional non-semantic markup, which is why there were different solutions provided. In addition to this method, the method of

.testcon {
  width: 240px;
  background-color: #abcdef;
  border-width: 2px;
  border-style: solid;
  border-color: #666666;
  [!]overflow: auto;[/!]
}

could produce good results in modern browsers, but it also messes up the layout sometimes.

 

[audiopro]

Thanks for the advice.
I am finding CSS is good to work with except for the positioning side of things. I have created the product section using tables and it is all up and running.
I need to get my head round positioning, can you suggest any good tutorials on the subject.

Keith

http://www.studiosoft.co.uk

 

[traingamer]

Tutorials? There are many. (Some have been mentioned in this forum, but the search function is not working at the moment.)
Try html goodies tutorials or sitepoint or just Google css layout tutorials


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