2

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: (780)644-5838
</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">
jason.fahy@norquest.ca
</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

HappyHuman
  • 51
  • 5
  • PS: I know there are elegant margin-related ways to do what
    does, but I find
    is easy and effective - so I'm not into changing that unless it's actually the root of the problem.
     – HappyHuman Nov 14 '12 at 16:29
  • Maybe try changing the spans to divs, then using display:inline; Really you need to have a container div for the images, then have a container div (like you have) for the names and info. – Alias Nov 14 '12 at 16:31
  • style="float:right" Also, its not because of ; missing? – Alias Nov 14 '12 at 16:34
  • Thanks, I'll try the div thing. And good catch on the semicolon, I'll check that too. (I may have been thinking it didn't matter in a list with only one element.) – HappyHuman Nov 14 '12 at 16:35

1 Answers1

0
<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: (780)644-5838
        </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">
            jason.fahy@norquest.ca
        </p>
    </div>
</div>

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

Alias
  • 2,983
  • 7
  • 39
  • 62
  • Ahh, I see - I've been trying display:inline but putting it in the wrong place. Will try this instead. – HappyHuman Nov 14 '12 at 16:45
  • Thank you, Alias - that did it. I know I've seen display:inline elsewhere but wasn't sure when to use it - time to look at it again. :) – HappyHuman Nov 14 '12 at 16:51
  • If anybody else uses this code, note that in line 8 the tag should be a . – HappyHuman Nov 14 '12 at 16:52
  • No problem :) Spans are mainly used for text, so if you wanted a different color of text inside a sentence, you'd wrap a span around the word and style it - since it's an inline element (not a block (like a div)). – Alias Nov 14 '12 at 17:24