WordPress.org

Ready to get started?Download WordPress

Forums

Css problems in Firefox (14 posts)

  1. Root
    Member
    Posted 10 years ago #

    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.

  2. Root
    Member
    Posted 10 years ago #

    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.

  3. mamabean
    Member
    Posted 10 years ago #

    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. :)

  4. Root
    Member
    Posted 10 years ago #

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

  5. mamabean
    Member
    Posted 10 years ago #

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

  6. Anonymous
    Unregistered
    Posted 10 years ago #

    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: http://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. ;)

  7. Root
    Member
    Posted 10 years ago #

    Ah yes. I am just having a look now.

  8. Root
    Member
    Posted 10 years ago #

    @ 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.

  9. mamabean
    Member
    Posted 10 years ago #

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

  10. Root
    Member
    Posted 10 years ago #

    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.

  11. Root
    Member
    Posted 10 years ago #

    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.

  12. wairoanz
    Member
    Posted 10 years ago #

    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 800x600 resize, your template has about 2 pixels width of sideways scroll. In my part of the world so many people sill use 800x600 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.

  13. wairoanz
    Member
    Posted 10 years ago #

    bingo... edited #rap and #content as you mentiond and it's all hunky dory at 800x600 now. Great, and thanks again.

  14. Root
    Member
    Posted 10 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.