[PLEASE HELP] Border problem in Mozilla

You must be using an old IE - IE6 has the same problem.

If you want the two bits of text on one line, with one to the right, and one to the left, you must put the float BEFORE you put the 'real' content. Otherwise the float will appear underneath the P with the course title. God knows quite why it's appearing so far down...

What do you mean with "real"? Can you give me an example?

Thanks, Seby.

Er, non-floated.

If you put a P tag, and then float something, the float appears below the P tag.
If you float and then do the P tag, they appear (vertically) at the same point.

I generally just use a DIV, with something floated and some text, which was where I was getting the 'real' content idea from.

<style type="text/css">
<!--
.indent {   
  margin-left: 15px;
  margin-right: 15px;
}
.solidBorder {   
  border-width: thin;
  border-color: #000000;
  border-style: solid;
  margin-top: 10px;
  margin-right: 30px;
  margin-bottom: 10px;
  margin-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  background: #aabdff;
  /* width: 100%; */
}


<div class=solidBorder>
  <p style="float: left">COMP102 - Introduction to Computer Program Design</p>
  <p style="float: right">Received Grade: A+</p>
</div>
<p class=indent>An introduction to the principles of Computer Science. Programming and the design of programs, algorithms, and data structures are studied. The process of developing quality programs is emphasised, using the programming language Java. Practical work requires students to design and implement a number of programs. </p>

With the above code, how would you change it? What do you mean with putting a <p> before the float? Can you please show me what you mean.

Cheers, Seby.

Ah, I've just done some testing - the problem encountered is the containing DIV, strangely.

<div class=solidBorder>
  <p style="float: left">COMP102 - Introduction to Computer Program Design</p>
  <p style="float: right">Received Grade: A+</p>
  <br style="clear: both;">
</div>

is the most consistent - Opera shows it as you want it; IE shows it without the padding on the DIV.

Below are the three methods I would use to display then on one line (if there weren't strange padding things going on) - try them to see the differences IE shows...

<div class=solidBorder>
  <p style="float: left">COMP102 - Introduction to Computer Program Design</p>
  <p style="text-align: right">Received Grade: A+</p>
</div>

<div class=solidBorder>
  <p style="float: right">Received Grade: A+</p>
  <p>COMP102 - Introduction to Computer Program Design</p>
</div>

<div class=solidBorder>
  <p style="float: left">COMP102 - Introduction to Computer Program Design</p>
  <p style="float: right">Received Grade: A+</p>
  <br style="clear: both;">
</div>

I'll look further into this!

All the DIVs and Ps are confusing matters - mainly given the P tag has 'default' margins. I'd simplify and just use:

  <p style="text-align: right" class=solidBorder>
    <span style=" display : block; float: left">COMP102 - Introduction to Computer Program Design</span>
    Received Grade: A+
  </p>

adding in

P.solidBorder {
  padding-top: 20px;
  padding-bottom: 20px;
}

to give the same sort of look.