www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    348

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

    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.
    Attached Images Attached Images
    Last edited by Captainkewl; 03-28-2009 at 02:01 PM.

  2. #2
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    348
    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
    Attached Images Attached Images

  3. #3
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    348
    No worries guys. I redesigned the html and css. Thanks anyways.

  4. #4
    Join Date
    Feb 2009
    Posts
    9
    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:

    HTML Code:
    <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".
    Code:
                } #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
    Attached Files Attached Files

  5. #5
    Join Date
    Nov 2008
    Location
    Niagara Falls, Canada
    Posts
    348
    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.

  6. #6
    Join Date
    Feb 2009
    Posts
    9
    Yes, you had too many floats in your code. That can confuse different browsers. Glad to be of help...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles