WordPress.org

Ready to get started?Download WordPress

Forums

CSS (FF v IE) Layout problems... (8 posts)

  1. jlink7
    Member
    Posted 8 years ago #

    (Sorry, I originally posted this in the "Your WordPress" forum, and then realized that this would be a better place for it...)

    First off, I'd appreciate if you looked at my site in either FF or Opera and then in IE. maybetwice.com/0709

    I am using a fairly well modified version of the default theme for wordpress. The site looks generally what I want it to look like (text colors all around could probably use some refining) in FF and Opera, with the sidebar looking pretty much right. However, in IE the sidebar gets pushed to the bottom of the page. The column still is horizontally aligned in the correct place, but I cannot figure out a way to get it to display the same way in IE as it does in FF.

    To save you the hassle of having to look (you may have to anyway) here is what I would THINK is the source of the problem in my style.css:

    #sidebar
    {
    padding: 0;
    position:relative;
    top: -150px;
    width: 200px;
    }

    I believe that IE probably doesn't treat position: relative quite the way that I'm expecting it to...

  2. Christopher J. Hradil
    Member
    Posted 8 years ago #

  3. jlink7
    Member
    Posted 8 years ago #

    Wow, what an awesome tool. I appreciate your help. (Also, does anybody else think it's incredible how many "warnings" the default wordpress themes generates?)

  4. Christopher J. Hradil
    Member
    Posted 8 years ago #

    that's not the half of it, I have things like opera and most of the mac stuff turned off in my style checker, as well as the CSS1 definitions. With all of that enabled, it would probably double the amount of errors/warnings.

    Keep in mind, the style check used there is the same as the w3c validator plus has the additional capability of breaking things down by CSS1/CSS2, "safe", and by browser/version/os, etc. So many of the warnings don't really mean much. The errors are the key and are more likely to be the reasons for differences in how a browser will render a particular document. So that's where I'd start.

    As I develop themes for things like WP or xoops, etc. I validate them as I go, and check them with a couple of browsers so I'm sure things look as I intend them to in all/most browsers.

    As long as you stick to the standards, your pages/css should always display almost identically in each major browser anyway.

    In your particular case, the site looks quite nice in FireFox/Netscape, but does have some problems at the moment in IE. Keep in mind that with css, there are always more than one way to accomplish the same thing, so you just need to find the method which will be accepted by at least the two big browsers to achieve the effect you're looking for.

    My personal preferance is always to use "longhand" css, instead of single line declarations, nesting multiple elements, using child elements at all, etc. It's a bit more work, and produces a larger css document, but is worth the effort in the long run because it's easier to make additions/changes, and you need to waste almost no time at all chasing cross browser compatibility issues.

  5. Christopher J. Hradil
    Member
    Posted 8 years ago #

    A postscript --
    I hate to even think about the amount of hours I've spent over the past couple years cleaning up the code from wordpress/xoops/coppermine/phpBB, etc.

    I have always been an advocate of standards, and am sometimes a little obsessive about serving clean code, but I believe that in the long run it's worth it.

    I have a meeting this week with some folks who run an EXTREMELY popular and busy blog site which they built with MoveableType/TypePad, thier technical person spends probably an average of 3-4 hours per day chasing user complaints based on the same kind of errors, who can't see what, etc.

    check this out --
    http://validator.w3.org/check?uri=www.baristanet.com

    that's what TypePad/Moveable Type spews as it's "default" standard code.

  6. jlink7
    Member
    Posted 8 years ago #

    Wow, that actually pretty (un)impressive. It's amazing thought that those pages, with all those errors, actually get rendered 99% accurately in the modern browsers. I guess that is saying something to the developers of the browsers themselves more than anything.

    I've decided to go back and pretty much rewrite my theme from scratch, as my hope that I could just modify wordpresses default theme is proving to be a pain-- mainly because of what you already mentioned. It's just way to time consuming to find all the classes and ids that need modified to correct some of what's wrong, and half of what is in that stylesheet I will never need.

  7. moshu
    Member
    Posted 8 years ago #

    as my hope that I could just modify wordpresses default theme is proving to be a pain

    That's a pain for everybody:)
    Wise users never start to modify the default...

  8. Christopher J. Hradil
    Member
    Posted 8 years ago #

    Part of the point of my last post was to illustrate something reasonably important for everyone to be aware of, even though, the css/xhtml generated by something like the default themes of wordpress/xoops, etc, there is MUCH worse out there. As I mentioned, I've had a number of friends ask me to help them clean up the errors/user problems they're all having with some pretty busy sites, and I've taken the postition, that until they migrate to a platform (wordpress,xoops,etc) that is at least capable of generating clean code, I'm not going to waste any time chasing down TypePad/Moveable Type code problems, the issue is pretty much the same, only much more complicated over there.

    Part of the beauty of wordpress, is that with very few simple edits to something like the default (kubrick based) theme, you can at least start to develop your own theme from a platform which generates valid code.

    In terms of a "tip", what I've done is cleaned out copies of the kubrick based "default" and the wordpress classic themes, I use those clean copies as a starting point for developing new themes, rather than starting the whole process from scratch (which really isn't that difficult, but since some of the "generic" standard portions of the original themes are just fine anyway, there's no sense re-inventing the wheel). I have on a couple of occaisions had to start from scratch because the folks I was working with were using designs/layouts for thier sites that were just easier to build form scratch.

    Another suggestion, I also belong to the community at http://www.oswd.org (open source web design), I have a couple friends/favorite theme authors there whom I've worked with in porting various themes found there over to wordpress/xoops. This also isn't that difficult a process and depending on the functionality and layout needed for your site, might be a better option than starting from scratch.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags