WordPress.org

Ready to get started?Download WordPress

Forums

very strange image breaks with IE 7 (screenshots) (22 posts)

  1. iceq
    Member
    Posted 5 years ago #

    Hey to you all. First, thank you for having the will to read my topic. In fact I tried very hard to solve the problem myself but couldnt. No body of those I asked for help could solve it either. You are my last hope! I'll try to make it as short and clear aspossible.

    To begin, ill tell U what am talking about:

    Website: http://www.3areda.com - WordPress 2.7.1 powered
    Language:Arabic (right to left)
    theme:Pride by WPDesigner (http://www.wpdesigner.com/2007/06/07/pride-wordpress-theme)

    The problem is not with firefox, nor with IE 8. I see it with IE7 and Maxthon browser (which seems to be IE7 based)

    It is that there are kind of "breaks" in the theme's images or style. Please see the following screenshots to understand what I am saying (in case you dont have IE7 and FF, because its better if you view the website directly from your browser) :

    http://img7.imageshack.us/img7/8199/ffie.jpg

    http://img7.imageshack.us/img7/7919/ffie2.jpg

    Also, I have this related problem with google ads, explained in this screenshot :

    http://img7.imageshack.us/img7/2673/float.jpg

    Now, the theme is originally in English and was localized from English into Arabic (right to left) by some guy, including localizing the CSS. Usually, directions of the theme are switched (left to right), paddings (to match the directions), and alignments as well.

    I made some changes to the original theme apart from localization, like font types, sizes, colors, etc. But the problem is in the CSS Not in the other files of the theme. I made sure of that by applying the original English CSS of the theme to my website, and the problem disappeared. But I need the localized CSS, and so I need to solve this problem.

    I compared the two CSSs using Beyond Compare Pro (which is great for comparison) and I found nothing that I recognized as faulty, but still the problem is caused by the CSS.

    Some guy suggested adding the following to the CSS, but it didnt help:
    * html iframe#google_ads_frame2 { left: 565px !important; }

    For your use, here are the CSSs

    Current localized CSS:
    http://paste-it.net/public/nbd1823

    Original English CSS:
    http://paste-it.net/public/f7b7dc0/

    You might also need the Firebug extension for Firefox for live css inspecting and editing, and Internet explorer Developer Toolbar for IE

    I wish somebody can help in this, and thanx in advance.

  2. stvwlf
    Member
    Posted 5 years ago #

    Hi

    I do see the error you are reporting. When looking into it with IE DebugBar there is something wrong with your layout code.

    Run your page through the Page Validator
    http://validator.w3.org/check?uri=http://www.3areda.com/
    I see 90 errors. Some are structural - tags closed in the wrong order. This type of error can cause what you are seeing to occur. Firefox does a better job of ignoring that stuff than IE does.

    Do the best you can in cleaning up the errors. If the problem is still there after you clean them up, write your post again and someone will help you.

  3. iceq
    Member
    Posted 5 years ago #

    Thanx so much for showing interest.

    In fact I have cheked the site with w3 validator and went through the reported errors in detail, but none of them seemed related to the problem at hand. In anycase, I didnt know how to fix those problems. I understood that there are problems, but the validator never mentions how to fix them, and am no html/css expert. Besides, some of the problems the validator reports are actually in the original design (css), and I have learnt that not everything that the validator reports is indeed a problem (for instance if I validate the css, it reports two erros about unrecognized color names, although all browsers recognized them and showed them properly)

    So what should I do ?

  4. stvwlf
    Member
    Posted 5 years ago #

    Hi

    A number of the errors are about structural errors. The very first error is a <ul> tag with a <div> inside it with another <ul> after that.

    This is invalid HTML can can throw a browser (IE) for a loop. You have a number of errors of that sort on your page. Yes many of the errors the validator doesn't like are minor and not very significant, but structural errors ARE significant

    Another error early in the list shows an <li> tag inside another <li> tag. That is invalid. and that is the sort of error that may well be causing your IE problem. Because your problem relates to an <li> tag

    If you want to get your page working correctly you will need to find someone who CAN clean up the structural errors. More than likely when they do, the page will work correctly.

    I'm sorry that it is this way, but this is the way it is. Most of the errors have to be cleaned up.

  5. iceq
    Member
    Posted 5 years ago #

    Hey and thank you (really) again

    I tried to fix as much errors as I could. I reduced them from 92 to 75. However, among these 75 there are errors related to

  6. or

      Many of the errors are very vague, its not mentioned where they occur, and I had difficulty to determine their location.

      You are right. There are

      or
    • followed by the same tag before it is closed (I understood that each tag should be closed before beginning another one). But the problem here is that I had to do this for the green widget boxes to look okay. If I didnt make each php function (like categories, archive, etc) within
        and
      • tags, the bottom of the widget wouldnt be displayed and the look will be ruined. There is a problem in the theme that text widgets appear with their bottom chopped, so I had to manually add them to the sidebar template file and add to them the
      • and
          tags.

          I know you might reach here reading while understanding absolutely nothing, but I couldnt explain it more than this.

          Thanx again if you could me help.

  • iceq
    Member
    Posted 5 years ago #

    I sorry the post turned to be broken like that .. I forget to wrap the <li> and <lu> tags inside CODE tags, thats why it appears broken with lists inside it (so everytime you see a break, there supposed to be <ul> and <li>

  • stvwlf
    Member
    Posted 5 years ago #

    Hi

    I looked at this some more. The problem is involved - its deep down in the CSS applied to the Google code. You probably already know that. These problems are hard to debug in IE and I just haven't had the time to get into it. It works fine in Firefox so Firebug is not a help here. I have three different IE debugging toolbars and am not finding the problem easily in any of them.

    I don't have the time right now to put into this - it would probably take half an hour of research. If I can I will get back to it.

    For testing, if you temporarily take out the google code and substitute a dummy image of the exact same size, does it then display correctly or does it still look as it does now? I would start there - that isolates whether the problem is with the theme or with the Google code. If its the theme its easier to fix.
    Hope this helps a little.

  • iceq
    Member
    Posted 5 years ago #

    THANX AGAIN !!

    Yes, it works ! I just inserted an image inside that comments template wrap (the white cloud shape) , and it appeared just great, not only the image doesnt float (or fly) to the left as the ad used to do , but the cloud shape is complete not broken like in the case of google's java ad.

    Also, I noticed that when I point the mouse to the rating stars (java), the ad in the sidebar doesnt fly as it used to do when there was an ad in the post top (where I placed an image now).

    Still , the top AND bottom of the cloud shape that contains the post body (which is under the ad cloud) is still broken

    Also, if I remove the sidebar ad , that post cloud bottom is still broken, so it seems not related.

    What next ?

  • iceq
    Member
    Posted 5 years ago #

    UP !

  • iceq
    Member
    Posted 5 years ago #

    Up

  • iceq
    Member
    Posted 5 years ago #

    STVWLF has continued our discussion (actually his help and support , which I appreciate) on the email I sent him . Here is what he said, followed by what I said (in a separate reply on this post)

    `Hi

    I did look further at your pages in IE a few days ago. I really think you need to clean up some of the code errors. My debugging tools were jumping all over the page and I could not find what was wrong.

    I made you two Word files (sent in second email) - one is your code errors, the other is the source code the Validator is using. So now when the validator refers to an error on line 476, you can look in the source code file and see what is on line 476 and the code surrounding it, so you have an idea where to look.

    The errors it is really important to clean up are the ones that say Opening and ending tag mismatch, end tag for "li" omitted, document type does not allow element "a" here; assuming missing "li" start-tag errors of that sort because they can really throw a browser off. I noticed one place in your code that started with an <h4>text here</p> and closed with that </p> And then there was a <div> i believe either inside an <h4> or inside an

  • . Things like that.
    This is illegal XHTML and results are not predictable.

    I'm not saying if you clean all of that up, that will make your format errors go away. I'm saying until you clean them up, no one can tell if your errors are due to that bad code or due to CSS errors. Plus, I can't even debug your page because the invalid code is making the debugging tools not work as they are supposed to.

    Step 1 is clean that code up. `

  • iceq
    Member
    Posted 5 years ago #

    Hey Steve. First, I deeply thank you. It is obvious that you have dedicated some precious time for me, time that you could spend in doing stuff you usually ged paid for. I really appreciate that.

    I have went through the errors again . (sorry I didnt use the doc words U sent me, because that list and the line numbers I could see using the wc3 online validator with the option "show source" checked). Anyway, I fixed some errors (after really great effort), and now errors are now 63 after they been 73.

    Yet, the errors that cause the problem are still there. The major problem as I can see is caused by the li and lu tags. I know that, because I actually modified the theme and forced such tags into it for the theme to look okay in everything that is related to the widgets.

    THE WHOLE STORY !

    This theme is called Pride. it was localized to Arabic by some guy who is believed to be knowing what he is doing.

    The WHole problem started with the widgets, the green boxes that U can see in the sidebar. When I added any code to a new text widget (for instance, post views widget), the green box appeared chopped from the bottom. All text widgets acted the same. So I had to insert the code manually to the sidebar. But this made things worse, as the green box didnt appear at all, or appeared its header or its bottom or its body, not complete. I searched the sidebar's template and found that the author uses li and ul tags before and after the categories widget which is of course added to the template file manually, not using a widget. I tried to add similar li and lu tags before and after the code of the post views, and voila, it worked and the widget appeard perfect.

    I did similarly for all text widgets. I didnt know about validation or errors . and I didnt test the website with IE then.

    After I finished I discovered that there are problems with widgets and tried to fix them. I fix all of them (seemingly), except one that U can see one under the sidebar adsense widget in IE7.

    Then I discoverd the other problems when I wrapped the inside post adsense item within a white cloud like that of the comments. in FF it appeared great, in IE it didnt, and that is when I reported the problem.

    So the reason why I cant remove the li lu tags is that it will ruin the whole look not fix it. And as I said, I had to use these tags to fix the view of the widgets.

    It is important to mention that the problems (the current breaks seen under IE ) DISAPPEAR under IE when I implement the original non-localized, left to right English CSS. I said and I mean it! All errors of image breaks and flying adsense ads are gone. The only problem that remains is that green bar under the sidebar adsense item.

    So isnt it a problem of the CSS???

  • iceq
    Member
    Posted 5 years ago #

    BUMP

  • iceq
    Member
    Posted 5 years ago #

    Bump againnn

  • esmi
    Forum Moderator
    Posted 5 years ago #

    Having just viewed your site, I'd say, no. It's not just CSS. There may be problems with the CSS but until the outstanding validation errors are corrected, tackling the CSS would be pointless. CSS only works well - especially cross-browser - if the accompanying page markup is valid.

    Your solution of adding <li> tags to fix one problem has merely created more problems. You need to remove your hard-coded changes, get rid of the Google code temporarily and start again from scratch.

  • iceq
    Member
    Posted 5 years ago #

    I did start again from scratch. I am suffering with these sidebar widget boxes because they are the reason of all problems. I want to insert custom codes (adsense and other stuff) in the sidebar, but there is a bug in the theme itself which cause custom widgets to appear cut from the bottom. I never recieved a response from the theme's author, and his website has "changed ownership" !

    I cant use the theme without the custom widgets, yet the hardcoding (adding ie and ul tags) which solved the cut bottom, caused other problems.

    What else could I try ?

  • esmi
    Forum Moderator
    Posted 5 years ago #

    It's not a bug. It's simply that the sidebar file needs editing to produce the placement that you want. Get rid of your ul and li fixes first. Then add a single widget of the type that you want to use and post back here. Only then people then help you work through this problem properly.

  • iceq
    Member
    Posted 5 years ago #

    Thank you very much for your interest. I wish you follow up with me till the end .

    Look what I have done, I am sure what I am gonna tell you will be important.

    1- I restored the ORIGINAL non localized version of the sidebar.php.
    2- I added the built in widgets of Tags, Archive, Links, Search, Pages, and Categories.
    3- I saved changes, and the widgets of the Tags and the Archive and the Search appeared chopped from bottom. The others (Pages, Cats, and Links) appeared Ok.

    To make sure the bug is not in the localized CSS, I restored the original CSS of the Original theme, and the chopped widgets still appear as they are. See this image:

    http://img23.imageshack.us/img23/4298/18371147.jpg

    SO it is not in the localized version but rather a major bug in the original theme. I assume it is in the sidebar.php. There should be somewhere where the shape of these faulty widgets is defined, and there is a mistake there that needs to be fixed.

    Thank You again

  • esmi
    Forum Moderator
    Posted 5 years ago #

    I'd need to see this on a live site before I could begin to help.

  • iceq
    Member
    Posted 5 years ago #

    Oh Helloo

    While searching (AGAIN), I found a solution suggesting adding "position:relative" in the outer div containing the elements. I did it, and it worked !! It resolved the issue of the floating adsense ads which was believed to be causing the image breaks. Now I am almost sure its not the google ads that cause the image breaks.

    I am sorry as I cannot leave the website in the original css for you to see it live. I rather can add the buggy widgets to the sidebar, but under the localized CSS if that helps. I have just did that, and added the built in archive widget at the bottom of the right sidebar, under the email subscription. See how it is chopped ?

  • iceq
    Member
    Posted 5 years ago #

    UP

  • iceq
    Member
    Posted 5 years ago #

    UP (desperately)

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags