Css problems in Firefox

  • I am working on redesigning a little and adding in a sidebar. I want the whole thing centered under a header div. It works in IE but not in Firefox and I can’t figure out why! I have the header div, content div and menu div inside a rap div. Problem is, the rap is only containing the header in Firefox. The content and menu divs are outside the rap. I have quadruple checked the placement of the divs in the index file and they are right. I don’t get it! Here is the css code I’m trying to work with…
    #header {
    background: url(https://www.ten-seventeen.net/test/title.jpg) no-repeat;
    width: 750px;
    height: 150px;
    align: center;
    }
    #rap {
    margin: 0 auto 10px auto;
    text-align: left;
    padding: 0px;
    width: 750px;
    background: #fff;
    border: 1px solid #ccc;
    }
    #content {
    float: left;
    width: 500px;
    overflow: hidden;
    padding: 15px 15px 5px 15px;
    background-color: #fff;
    color: #666;
    font-size: 11px;
    text-align: left;
    }
    .post {
    color: #666;
    font-size: 11px;
    text-align: justify;
    padding:15px;
    margin: 0px;}
    #menu {
    float: left;
    background: #eee;
    margin: 10px;
    padding: 5px;
    width: 170px;
    overflow: hidden;
    }
    Does anyone see why it isn’t working in Firefox?? Here is the url of the test page… https://ten-seventeen.net/test/index.php
    Thanks!!

Viewing 14 replies - 1 through 14 (of 14 total)

  • I can see this just by reading the CSS. Although it seems funky in Firefox, Firefox is doing the right thing. This is very misleading unless you are fairly experienced in CSS positioning because you then look for the error in the wrong place. In summary it goes like this. A floated div must have its width defined. Which yours does. In accordance with the recommendation for browser vendors of the W3C contained in CSS 2.1 Firefox, all its relatives and nearly every other browser will then ADD the padding, borders and margins. As they should. On that basis your width math will not add up.
    IE in the meantime will DEDUCT the same. Useful huh?
    That has an advantage superficially that a layout is more likely to run in IE because it takes up less space but it is wrong. Period. What I do on float positioning is that when I define a width and float then THAT IS IT there. For #content I add .post to the CSS and style that. For menu I style #menu ul and downwards.

    Plus there is a #header in the CSS and none in the xhtml markup. Plus I am not sure overflow hidden can be used with float for the menu. Might be wrong about all of this.

    Thread Starter mamabean

    (@mamabean)

    Thanks Root. I just plain stink at positioning unless it is fixed. The float property has always given me grief for some reason. I know the look I want can be achieved as I have seen other layouts that work in Firefox but for some reason, something in my coding somewhere isn’t allowing it to happen. Just can’t figure out what that is. LOL
    Thanks for the info. I will keep playing and see what I can figure out. ??

    Have you tried the Gemini template. ? No CSS positioning needed.

    Thread Starter mamabean

    (@mamabean)

    Nope, haven’t tried that. Well check it out, thanks!

    Hi Root… I uploaded your Gemini Template, but I gave a problem on the extended pages i.e. after clicking through the (more…) link. In IE the category, links menu etc appears at the bottom of the right side column. I am presuming that is not supposed to look like that. If you are online now, please take a look at: https://www.wairoa.com/2004/07/14/surfing-at-a-wairoa-rivermouth-surf-spot/#more-103
    It looks fine in FireFox, but I understand that IE is still being used by a few people out there (believe it or not!), so I think it important to get it right in IE too. ??

    Ah yes. I am just having a look now.

    @ wairoan. That CSS positioning glitch in IE in Gemini is now fixed and committed. Thank you for your time and patience in pointing it out. I hope you havent been inconvenienced. Without the testing by WP users we can never be certain it works as advertised. It should be fine for download now. I will email the fix to all known users.

    Thread Starter mamabean

    (@mamabean)

    Very nice template, Root! Will be working on it when I have more time to play. Thanks bunches!!

    Well it seems fine on mine (IE 6). Have you tried a hard cache refresh in IE?
    It is only the CSS that changed. This is what you need in the CSS (anywhere you like)

    #commentform #comment{
    width:450px;
    margin:0;
    }
    Please let me know how you get on.

    On the width issue. The last 2 px uplift was needed as a patch for an earlier glitch. But there may be a case for saying the whole thing needs to be a shade narrower. Or that users should have a choice. If you are feeling up to it you could edit the css yourself. Could be a good first exercise. If you reduce the #rap and #content by the same amount you should be fine.

    Yep, added that #commentform #comment bit and it fixed it. ?? Maybe too fast to grab the code, eh! Thanks for the speedy response.
    I was busy editing my post above, but you posted before I got my edit up, so I’ll repeat it here:

    One more small item… it seems a pity that you previously modified width in #rap to 772px (plus 2 px)…. only because when I use FireFox to view a 800×600 resize, your template has about 2 pixels width of sideways scroll. In my part of the world so many people sill use 800×600 that I want to try and accommodate them.

    No panic though… the template if have been using up till now didn’t fit in at 800 width either.

    bingo… edited #rap and #content as you mentiond and it’s all hunky dory at 800×600 now. Great, and thanks again.

    Oh Wow. You are home free now. You can fine tune the artistic details to your hearts content. Now a real Welcome to WordPress and thanks.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Css problems in Firefox’ is closed to new replies.