[RESOLVED] right side content of page lower in FF than in IE

[Captainkewl]

Hey guys. I attached screenshots of how the page looks different in Firefox and IE7. The URL is http://kmkwebdevelopment.com/education.html The css is http://kmkwebdevelopment.com/portfolio.css The pages validate. How come the positioning is so off in firefox?? I'm having a brain cramp (I am obviously just missing something simple).

Kris.

[Captainkewl]

I changed the css a bit and now I just need to know how to get the content on the page to look like this (see screenshot) instead of how it looks at this URL http://kmkwebdevelopment.com/education.html css URL is kmkwebdevelopment.com/portfolio.css

[Captainkewl]

No worries guys. I redesigned the html and css. Thanks anyways.

[snagler]

Hi Captainkewl,

I made four small changes to your code and it looks close to what you want.
I attached the working example called new.txt. You can run it in a browser. It looks good in Firefox and IE7.

First, I moved the block of code "edubodytext2" to be at the same level as "edubodytext". It now looks like this:

<div id="navsection">
<div idbodysection">
    <div id="edubodytext">
    <div id="edubodytext2">

Next if changed some CSS to look like this: You were missing the "2" in "edubodytext".

            } #edubodytext2 {
                float: right;
                width: 380px;
            } #edubodytext2 .phead2 {
                margin: 0px;
                width: 380px;
                font-family: Georgia, "Times New Roman", Times, serif;
                font-size: 1.5em;
                color: #fef9e6;
                text-align: center;
                text-decoration: underline;
                font-style: italic;
            } #edubodytext2 .psubhead2 {
                margin: 0px;
                width: 380px;
                text-align: center;
            } #edubodytext2 .psubsubhead2 {
                width: 380px;
                margin: 0px;
                text-align: center;
                font-size: 0.9em;
                color: #CCC;
           }

Good luck...
Snagler

[Captainkewl]

Your right. I was missing the 2 in "edubodytext". That was throwing me off. What I ended up doing is going with the page flow a little differently. I just used left and right floats in turn to produce the same layout. Thanks for the reply though. Gives me a heads up on what I did wrong earlier.

Cheers,
Kris.

[snagler]

Yes, you had too many floats in your code. That can confuse different browsers. Glad to be of help...