My content Slides further leftward with IE when I scroll down my site

  • Resolved hops

    (@hops)


    19 years, 7 months ago

    I’m working with / tweaking equix 1.1 , which has a hack to accomodate IE with a different css file. I’ve barely edited anything.

    Here’s the rub. FF (of course) looks just fine. With IE, at the top of the page the post content is alligned correctly and looks right. But as I scroll down, the further i go, the more the post content slides leftward and get’s cropped by margins. The further I scroll to the bottome, the more the content gets cropped with each post. Cropping includes everything –from title down to time & date, etc.

    Any thoughts? I am working on removing the java hack to fix this alltogether. But can’t remove it for good yet since removing the java code and switching CSS seems to disable IE from seeing the site all together, even though viewing IE source shows that its there. (weird) That said, I need to resolve that and in the meantime cannot have the site be down to IE users.

    HELP! –thx

Viewing 15 replies - 1 through 15 (of 24 total)

  • You have some tags that aren’t closed I found during a validaton of your site so you will need to clean those up and then we can get into what else might be wrong, but they could be the problem.

    One of the things that I adore about using CSS is that it takes just one little closing tag missing, one little error, and you usually see it immediately because everything borks from that point forward. It’s then a challenge to play sherlock holmes CSS detective to figure out what is wrong to cause the problem, but if it is wrong, it usually shows up! You got one of those usuallies!

    Thread Starter hops

    (@hops)

    Holdy Smokes! What on earth is going on here?? That code works just fine in FF — why is it getting all chewed up by the validator? It seems to be nitpicking on my formatting??

    Really — is it a crime to be setting a bullet list in front of a linked reference?? Its referencing those and block quotes? What gives?

    There is a serious problem in the markup. Specifically the lists are not wrapped in ul. I would hazard a guess IE is indenting them incrementally.

    Actually in IE a lot of themes behave like described in the original post.
    I remember even the itkitchen.info was like that – with lots of posts on the front page. Never figured out why…

    Thread Starter hops

    (@hops)

    root — the code getting flagged is what’s in my post. Why would that be happening if its working in FF??

    Code works differently in different browsers. The browser engine renders code depending on its own inherent programming. In general you should code html/css for standards-compliant browsers like FF first, THEN tweak so IE renders something similar.

    You don’t need js to “fix” IE, either – use the @import facility instead. Take a look at this code:

    <style type="text/css" media="screen">
    @import "standard.css";</style>

    <!--[if ie]>
    <style type="text/css" media="screen">
    @import "ietweaks.css";
    </style>
    <![endif]-->

    This entry between the <head> tags of the page displays the site as designed in both browsers. What I did to implement this was to layout the site and get it the way I wanted it in FF, then make the necessary tweaks to a dupe stylesheet for IE. There are some antique browsers which bork on the @import rule, but for 99.9% of sites I design, those browsers are less than .1% of the accesses, so I simply don’t worry about them (NS4, IE<5 are the general culprits – I have no way of checking for mac or linux as yet).

    But before you start tweaking stylesheets and using the @import setup, you ABSOLUTELY need to validate your pages and fix the things the validator tells you are wrong. Then once your code is clean, you can start making IE “behave”.

    Thread Starter hops

    (@hops)

    vkaryl —

    I have a 2nd IE.css up and going right now with just such java switch — but it came prepackaged as equix v1.1, and the IE css is bare.

    Part of what is confusing me is how my code got so messy to begin with. Its all post related and I’m simply using WP as my editor — nothing fancy.

    Any thoughts? And thanks so far.

    Honestly, Hops, it isn’t so much about how it got messed up. That’s the easy part. A slip of the finger, a deleting or moving something and not getting the “whole” thing – when you aren’t used to the code, these things happen. I’ve been doing this for 10 years and I still make little boo boos. We all do. Concentrate on fixing things.

    And don’t fall into the trap that so many people do by blaming IE or hiding stylesheets and using messy techniques. There are all kinds of little fixes you can do, or do it “right” to begin with and you don’t have to dink around with all the fixes, though you may encounter one or two….still, go for as pure a CSS as possible.

    The biggest victim as people play with themes is almost always the nested lists in the sidebar. One little li or ul forgotten or left out and everything is screwy. Sure, it will look okay in some or even all browsers, but it won’t validate cuz it ain’t right. That’s just the way of it. Fix it.

    Styling Lists with CSS and WordPress will also help with the list issues.

    Thread Starter hops

    (@hops)

    I don’t mean to be whiney. My problem is that I’m not very good with code… yet. Based on what folks are advising on this thread, I’ve cleaned up the posts so that teh site is clean with the validator.

    The kick was that i didn’t know that i couldn’t bullet list the html links without it throwing off the validator. That, and I was missing a few clicks on “enter” after code. But mostly my confusion was rooted in the fact those linked bullet lists worked just fine in IE and FF.

    At any event, thanks for your patiences… Do you have any thoughts on straightening the text in IE??

    The validator is your friend, Hops. Really. If you fix the problematic entries the validator flags, you will find that your html/css is clean (note please that many times if you fix the first couple of problems flagged, MANY of the rest will disappear). You may still have to use an alternate stylesheet for IE (there are cases where you simply have no choice in order to make a page appear similar in both IE and FF) – but at the very least your css and html will be as clean as they can be before you begin.

    Themes and their implementations are not a cut and dried proposition. No matter what anyone says, you generally can’t take 40 different themes, plug them into wp, and have each of them validate, display properly in both IE and FF, much less Opera and Safari/Konqueror for Mac.

    I’ve tried over 100 themes since I first started messing with wp (not that long ago – mid-February, I believe). Of those, 12 are what I am using: the 12 I didn’t have problems with – from basic validation to minor tweaks to satisfy my admittedly persnickity nature. The one you’re using isn’t one of those 12.

    IE IS considerably to blame, though, Lorelle: if IE was standards-compliant (it’s not), that would be a major step cut out of the “make-it-right” process. However, validation does not care whether you are using IE or FF, true. Valid code is valid code. But then again, valid code doesn’t mean the code you produce displays the same in both browsers. Which is why, when presented with the immovable object, I use the irresistible force: the IE-specific stylesheet and the @import rule.

    Okay, everything validates, and your problem could be in the ie style sheet you are using, but since that is embedded, it doesn’t get validated, so I’m not sure about the answer there.

    And congrats for getting rid of the nested list problems. That ain’t easy, even for folks who know code. I always have problems with them so I keep a little reminder chart to keep me on track – I hate them but they are a fact of WordPress life now.

    Here are the things I would try if I were in charge of your life:

    1. Comment out or remove the import of the ie style sheet and leave the regular one in there. Anything you do to make MSIE show up will also work in FF. If things are screwed up in FF, they are much easier to work with and fix and the fix usually applies across the board.

    2. With one style sheet, run a validation on your stylesheet again and see if that holds water. If it does, then move on to the next step.

    3. With one style sheet, does the same problem happen in Firefox or still only IE?

    4. The problem begins here:

    <div class="entry">
    <p>Here is our Friday list of articles you might want to read over the weekend to get a feel for how things shaped-up the week of April 10, 2005.</p>
    <blockquote><p>
    <a href="https://www.bloomberg.com/apps/news?pid=10000103&sid=aCvVeUXZIzy0&refer=us">U.S. Stock Benchmark Indexes Hit 2005 Lows: Dow At 10279</a></p>

    and continues forward from there. Somewhere between here and the start of the next “entry” class (next post), the problem resides. Begin your hunt here. I’m hunting but I haven’t found it yet, unless it relates to all the extra spaces showing up between the <p> and the actual link in the lower part of that first list in the blockquote.

    5. Since the problem is there, try “changing” the problem (thinking outside of the box) and change those paragraph tags into <br /> tags with a paragraph tag at the beginning and the end and see if that fixes things below it. If not, put them back and move onto another section to figure out if that is the problem.

    I recommend you take a few minutes to learn how to play Sherlock Holmes CSS Detective.

    I’ll keep poking for another couple of minutes but I got to get to bed. But get started on this part.

    Thread Starter hops

    (@hops)

    Really, sorry for making such a deal out of it. I was making presumptions that if the code in the posts worked just fine, as did my bullted linked lists, it was otherwise fine… it sort of threw me. Obviously, its not. Lesson learned.

    Otherwise… I still have this cranky text that wants to drift off the IE page leftward… with some weaving and bobbing along thw way. Any suggestions re your irresistible force: the IE-specific stylesheet and the @import rule?

    Like i said, I am currently running an ie.css Thoughts?

    And remember, there are times when a hammer is the right tool for the job, and other times when the precision instrument needs only a delicate push. There is a tool for every job but not every tool can work on every job.

    To fix this particular problem, two style sheets aren’t solving the problem.

    The problem is with the CSS. Work from only one CSS and narrow down the problem there. If the answer to the problem is solved by having a second style sheet imported in order to “hide” the problem from the other browser, then take that step. But fix what is broken first.

    Thread Starter hops

    (@hops)

    thanks lorelle — a large part of my problem is i don’t have full control over one stylesheet (e.g. the skills required) to begin with. The 2nd simply came with the theme…

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘My content Slides further leftward with IE when I scroll down my site’ is closed to new replies.