SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Oddity in firefox where hidden elements till take up space

    If you'll take a look here: http://dmsuperman.homeip.net/portfolio2/ in both IE and Firefox, you'll see some differences.

    Firstly, open it up in IE. Look at the arrow buttons for the images. The numbers are all as they should be (25 x 25) but for some reason, the images inside the links for the arrows cause a random extra 4 pixel border to appear below the image but inside the link. If I change the arrow image to some other element (ie a span tag or just plain text) then it works just fine, but for some reason the images inside the link cause the link to have an extra 4 pixels of bottom padding. I tried adding a border to the image to test it out, and the 4 pixels are not inside the image element, they are below it, so it's either 4 pixels of margin on the image or 4 of padding on the link.

    My main problem is when you open it up in firefox. There is a div with 5 tables (used as rows, it's just easier like this). In IE, it looks fine, but in firefox for some reason they are hidden but still take up space. The even weirder thing is that if you click an image and bring up the popup, it fixes itself. This doesn't happen in IE, only in firefox. I think it's a JavaScript issue, so that's why I'm posting it here. I could be wrong though...
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) You should use a complete doctype (one that includes a URL) to get browsers to render as close to the same as possible. I recommend HTML 4.01 Strict. A doctype is not a magic fix. It is the first step in the process of fixing your page. The doctype tells the browser how to render the page.
    Activating the Right Layout Mode Using the Doctype Declaration
    Fix Your Site With the Right DOCTYPE!
    Choosing a DOCTYPE
    Doctype switching
    Rendering Mode and Doctype Switching
    http://www.w3.org/QA/2002/04/Web-Quality
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

    2) These explain how to remove the gap:
    That mysterious gap under images and embedded objects
    Images, Tables, and Mysterious Gaps

    3) Please fix your (X)HTML and (non-pseudo-class related and non-opacity related) CSS errors.

    4) I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when it comes to X/HTML.

    5) If you still have issues in Firefox, try setting an ancestor to style.display='none' and then style.display=''
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've fixed all the HTML errors except the tag one since it's used for the JavaScript gallery (no other real way around this except storing the value in another attribute and that wouldn't be right) and the center ones since margin: auto doesn't do anything, even when setting the elements to display: block;
    The CSS ones except for the psuedo-class and opacity ones have been fixed.
    I've applied a DOCTYPE.
    I applied the above method to fix the gap (at least the 4 pixel one below the image).

    So far, the changes seem to be that the scroll buttons are now completely destroyed in IE, and the main problem that I had in Firefox hasn't changed at all. Also, now the page doesn't fit the the browser's height (whereas before the bottom bar would always be at the bottom of the page, even when the content didn't stretch it down there). This occurs in both IE and Firefox.
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT

  4. #4
    SitePoint Evangelist dmsuperman's Avatar
    Join Date
    Feb 2005
    Location
    A box
    Posts
    516
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, absolutely frustrated beyond measure. For NO REASON whatsoever, and entirely random (which is RETARDED since nothing in this page is random at all) SOMETIMES if you scroll down to the third page and then back up there appears some odd gap of about the same height as a TR, but the entirely MORONIC part is that it's not a TR, however it is part of the table, meaning that it's a phantom element that doesn't exactly exist. Just like with the extra elements that magically appear below the table (that aren't even elements since there is nothing there). I've nearly just destroyed my keyboard in this absolutely retarded random nonsensicallity and as such have decided that the whole thing just is not worth it in the least, so thanks for the help but I'm just going to do a normal PHP pagination.

    This can be locked or closed or whatever.
    <(^.^<) \(^.^\) (^.^) (/^.^)/ (>^.^)>
    Core 2 Duo E8400 clocked @ 3.375GHz, 2x2GB 800MHz DDR2 RAM
    5x SATA drives totalling 2.5TB, 7900GS KO, 6600GT


Bookmarks

Posting Permissions

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