Question

I’ve got some HTML with inline styling, which I’m using for a page header in the Blackboard content management system.

It’s supposed to look like this:
http://media.norquest.ca/ace/math/screenie-00.png
…and it does, in Chrome and in IE8.

But in Firefox, it looks like this:
http://media.norquest.ca/ace/math/screenie-01.png

The code looks like this:

<center>
<div style="width:806px">

<span style="float:left; margin: auto;">
<img src="Images/course-banner-left-chem30prep.png" />
</span>

<span style="float:right">
<img src="Images/course-banner-right.png" />
</span>

<div style="width:742px; margin-left:0px; text-align:justify; border-top:1px solid black; border-bottom:1px solid black; overflow:hidden">

<p style="float:left; margin-top:0px; margin-bottom:1px; padding-left:0px; font-size:11px">
Instructor: Jason Fahy
</p>

<p style="float:left; margin-top:0px; margin-bottom:1px; padding-left:30px; font-size:11px">
Phone: [phone]
</p>

<p style="float:right; margin-top:0px; margin-bottom:1px; padding-left:30px; font-size:11px">
Office: A324 Edmonton
</p>

<p style="float:right; margin-top:0px; margin-bottom:1px; padding-left:30px; font-size:11px">
[e-mail]
</p>

</div>

</div>

Any idea what the trouble is?

I’ve heard that Blackboard’s styles can interact weirdly with the user’s CSS and inline styling, but I don’t want to assume that when it could very well be a problem with my code.

Cheers,
JF

Answer 1

<div style="width:806px">
    <div style="width:742px; height:HEIGHT-OF-IMAGES;">
        <div style="float:left; display:inline;">
            <img src="Images/course-banner-left-chem30prep.png" />
        </div>
        <div style="float:right; display:inline;">
            <img src="Images/course-banner-right.png" />
        </span>
    </div>
    <div style="width:742px; margin-left:0px; text-align:justify; border-top:1px solid black; border-bottom:1px solid black; overflow:hidden">
        <p style="float:left; margin-top:0px; margin-bottom:1px; padding-left:0px; font-size:11px">
            Instructor: Jason Fahy
        </p>

        <p style="float:left; margin-top:0px; margin-bottom:1px; padding-left:30px; font-size:11px">
            Phone: [phone]
        </p>

        <p style="float:right; margin-top:0px; margin-bottom:1px; padding-left:30px; font-size:11px">
            Office: A324 Edmonton
        </p>

        <p style="float:right; margin-top:0px; margin-bottom:1px; padding-left:30px; font-size:11px">
            [e-mail]
        </p>
    </div>
</div>

Maybe something like that? Also you’re missing a ; at the end of float right in your example.