6 replies [Last post]
Seby
Offline
newbie
Wellington, New Zealand
Last seen: 16 years 42 weeks ago
Wellington, New Zealand
Joined: 2004-02-07
Posts: 3
Points: 0

Hey folks,

I have tried everything..... hopefully someone can help me here.

The page is
http://www.mcs.vuw.ac.nz/~kruegeseba/courses.shtml

And the problem is down the bottom. The course grade is aligned BELOW the box and not WITHIN the box like it is in IE. Does anybody know why? Can anyone help?

I want the course title on the left side in the box and the course grade on the right side of the box. When I put <script="float: left"> infront of the courses title it alignes everything correctly in IE, but it distorts it evenmore in Mozilla.

Thanks in advance, Seby.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

[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...

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Seby
Offline
newbie
Wellington, New Zealand
Last seen: 16 years 42 weeks ago
Wellington, New Zealand
Joined: 2004-02-07
Posts: 3
Points: 0

[PLEASE HELP] Border problem in Mozilla

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

Thanks, Seby.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

[PLEASE HELP] Border problem in Mozilla

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.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

Seby
Offline
newbie
Wellington, New Zealand
Last seen: 16 years 42 weeks ago
Wellington, New Zealand
Joined: 2004-02-07
Posts: 3
Points: 0

[PLEASE HELP] Border problem in Mozilla

<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.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

[PLEASE HELP] Border problem in Mozilla

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!

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.

dJomp
dJomp's picture
Offline
Enthusiast
Last seen: 4 years 43 weeks ago
Joined: 2003-03-23
Posts: 422
Points: 0

[PLEASE HELP] Border problem in Mozilla

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.

You know you're a geek when you try to shoo a fly away from the monitor with your cursor.