#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    2
    Rep Power
    0

    Firefox Absolute Positioning of Div 3 Pixels Higher Than Other Browsers


    Has anyone heard of Firefox 4 or Firefox 3.5 positioning a Div 3 pixels higher on a web page than all other A-Grade browsers?

    If you want to see what I mean, go to baampblue . asystechonline . com / ReconstructIndex.php. Sorry I could not insert a link. I'm a new member. I password protected this to keep bots from scanning it. The username is the word demo. The password is also the word demo. Look for "Carl Gohm" on the right side of the page, under "BAAMP Honors Lifetime Members". Click on the Carl Gohm link. A new rounded corner box will open up in the "Featured Projects" display with a picture and information about Carl. If you look at the new box in IE 8, Opera 11, Chrome 11, or Safari 5.0.5 the new box fits perfectly inside of the Featured Projects display. If you look at the new box in Firefox 4 or 3.5, you should notice that the new box is shifted up 3 pixels too high.

    The HTML and CSS validate with no errors on the W3C validators.

    I'm using jQuery to generate the new box for Carl Gohm. I have ruled out the jQuery as the cause of the problem by creating a minimal test case that doesn't involve jQuery.

    I tried using a clean version of Firefox from Spoon.net, because I thought maybe one of the Add-Ons in Firefox was causing the problem. That didn't make any difference.

    I tried viewing this on another computer that is running Firefox 4 on Windows XP, but the problem was still there.

    I used Firebug to disable and then re-enable each line of CSS one at a time to see if there was a CSS problem. I didn't notice an improvement.

    I just need to know if I am wasting my time trying to troubleshoot something that is not correctable.

    Thank you in advance for your time.
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, smthjazzman.

    As you found out new users are restricted from posting URLs until they have made 5 posts. You may need to get around this by leaving out the "http://" and putting a space before each ".". Yes this rule is annoying, but the administrators say it's necessary for limiting spam.

    I just need to know if I am wasting my time trying to troubleshoot something that is not correctable.
    It's correctable. However, I would recommend using two corrections for it. The first is to add this to your stylesheet (explanation here):
    Code:
    object, embed {
      vertical-align: bottom;
    }
    The second is to move those 4 <div>s from the start of the page down to just after the "featured projects" <table>. Then wrap the <table> and those 4 <div>s in another <div> and give it "position:relative" (which creates a new positioning context) and "width:100%" (which fixes a bug in some versions of IE). Finally, you change the value of the "top" property for those 4 <div>s to 0. Doing that isolates them from any changes in height of the content above them.

    The HTML and CSS validate with no errors on the W3C validators.
    Your CSS is valid, but your HTML is not. I see 69 HTML errors when I check that page. Many of them are because XHTML short-tags are mixed in with the HTML.

    Also you have 18 <table>s in your page. Why should you avoid using tables for layout?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2011
    Posts
    2
    Rep Power
    0

    Smile Thank you for advice - Problem Resolved


    Thank you for the advice Kravvitz. The Honorees are showing up where they are supposed to in all the A-grade browsers now. The problem got resolved before I finished implementing everything that you suggested. All I did was add
    Code:
    object, embed {
      vertical-align: bottom;
    }
    to the CSS stylesheet and clean up the majority of the HTML validation problems that showed up with the W3C Validator. For the benefit of someone else reading this, I had several <br /> tags that should have been <br> tags. I also had backslashes in several image tags that needed to be eliminated. I am using a DOCTYPE of:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    I appreciate your time in looking into my problem. You helped a lot.

    When I originally posted the problem, I was going on memory about the validation results. You were correct, I had forgotten that I had several HTML errors for the DOCTYPE I was using. Thank you for the reminder.

    I agree with you on not using tables for layout. I inherited this site from another developer who did use tables. If I can develop enough justification for recommending the client have me develop a new website for them, I will try to avoid using tables for layout.

    Thank you again!

IMN logo majestic logo threadwatch logo seochat tools logo