SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    [Resolved] Help Me Fix Firefox Glitch Please!

    Hi,

    I've been working on this CSS layout today for my site but I've encountered a problem with Firefox when too much text is in my content area. You can view the problem at http://www.classpile.com/current/

    Opera 8.5 and IE6 display it correctly, making the white space (content area) larger to hold the text. Firefox does not, instead the text goes out of the boundaries of the white area.

    I believe the fix to this has something to do with setting display correctly in my div's but my guess and check attempts have failed so far. All the CSS is inline currently, so just view the source to see it all.

    There are 2 divs that are involved with the problem. The first div has a classname of "contentStripe". Then there is a div with no class (just a style attribute) inside the contentStripe div, that create some padding for the content. One (or both) of those divs is the cause of the error I'm pretty sure, since that's where the content text is.

    Any help is greatly appreciated, thanks!

    --
    tparkin
    Last edited by tparkin; Jul 16, 2006 at 21:18.

  2. #2
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This:
    position: relative; left: 8px; top: 16px;

    is your most likely culprit, although the code you are using for the overall layout could be contributing to this in any of ten different spots.

    That you aren't declaring a doctype also means that the odds of that displaying the same between any two browsers is next to zero, since you are leaving ALL of them in quirks mode.

    You've got at LEAST six nestings with corresponding CSS (pretty much all your 'stripe' ones) that could better be done as margins and padding - overlay issues, height calculation issues...

    Don't take this the wrong way, but I'd seriously consider junking that and starting over. From what I'm seeing on the render side there is NO need for more than... 12 DIV's and corresponding classes for your whole document - as opposed to the 20 classes, 17 DIV, 8-12 span, etc, etc, etc.

    For example, this nest:
    <div class="contentStripe" style="text-align: left;">
    <div style="position: relative; left: 8px; top: 16px; padding-bottom: 16px; width: 742px; display: block;">

    completely unnecessary - just assign all the styling to the single div, don't break it up like that... not to mention if you need to do THAT MUCH relative positioning, something's REALLY wrong somewhere.

  3. #3
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, did you a huge favor (or not)

    I rewrote it top to bottom with a much reduced CSS and nesting. Lobbed about 2.5K off your filesize (anywhere from half a second to a second on dailup)

    http://battletech.hopto.org/html_tut..._redesign.html

    functionally identical... ok a few elements are off a couple pixels, but close enough for government work... and it validates XHTML 1.0 Strict.

    Your biggest problem was the use of position:relative - which is kind of a 'last resort' tool in CSS... as well as your not consitantly using margins/padding assignments. Most of your formatting could have been done with padding on the parent element, not the mix or parent/content padding/margin you did, which was my biggest 'correction'.

    ... and for consistant behavior on DIV in regards to the height parameter, always assign display:block - it just makes life easier.

    Hope this helps.

  4. #4
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the height here.

    Code:
    			.contentStripe
    			{
    				height: 300px;
    				width: 750px;
    				
    				background: #eeeeee;
    			}

  5. #5
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zachnefein
    Remove the height here.

    That works too. Odd, I looked for that in his code and didn't see one... automatically assumed a float or positioning error.

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2004
    Location
    Michigan
    Posts
    156
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @deathshadow: That was really nice of you to help him that way. Very cool man.

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Zachnefein, Thanks! Such an obvious mistake that I overlooked. I added that in while testing before allowing for larger content.

    @Deathshadow, Wow, great advice and thanks a ton for the rewrite. I appreciate your efforts and will surely have a look and learn from your code. I had struggled with cross-browser issues (mainly IE) and used the nested divs to get around it. I wasn't aware about position: relative being considered a last resort, apparently I still have lots to learn. Thanks!


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
  •