Layout mysteriously breaking (Not a CSS problem)

  • Resolved miquel_909

    (@miquel_909)


    15 years, 6 months ago

    Hi, I’m not new in WP and already had troubles with it here and there, but I’ve never seen this before. It is driving me crazy to the point I’m thinking about changing platform if I can’t find a solution. Please help!

    The problem: I’m testing a website that worked fine for weeks but suddenly I started to have problems with the layout. I noticed that there was a gap before the header of every page (in any theme, even in the admin part). It wouldn’t be a major issue (it isn’t in Firefox), but in iE7, when you first load the home page it renders ok (except for the gap), but when you click anywhere (but ‘home/inicio’) the layout breaks. (see here https://www.ciberpalma.com) The odd thing is that refreshing the page puts everything on place (!?)

    Not CSS, not pluguins:

    Yes, I know it sounds like a CSS problem, but as I mentioned the problem extends to all themes I’ve tried, and they are not a few.
    The gap before the header occurs also in the admin part. In iE7, the admin layout doesn’t look ok either. See (https://www.ciberpalma.com/wp-login.php) It also breaks after login.

    I’ve deactivated all pluguins. My only doubt is: should I delete them ?

    Things I’ve tried/noticed:

    Source code of the pages generated doesn’t reveal anything (to me) that could be causing this. I also have harcoded a wp generated page and it renders ok, without the gap (see: https://www.ciberpalma.com/test.html). The problem is definitively caused only when using wp

    For the way the layout breaks in iE, it looks like the <body> css attributes where suddenly missing. For instance, in the theme you can see, the body ‘centers’ everything contained on it and is set to have a grey background, but when the layout breaks, it just don’t center the page and has a white background. This ‘lost’ attributes of the body seem to be what causes the layout break.

    I can’t figure what makes the gap before the header appear. But I’m almost sure that it is connected somehow with the breaking layout in ie, since both things started together

    Well, don’t need to say any help, even a hint, would be greatly appreciated
    Thanks

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

  • Firefox 3.0.10… all looks fine…

    In IE there are extra characters at the top of the source code (view source)…

    Encoding or charset issue i think… as a guess…

    Thread Starter miquel_909

    (@miquel_909)

    t31os_, thanks for your feedback. I can’t see these extra characters. Can you paste them ? And… could you tell when do you see them ? Only when the layout breaks ? Can you see them in Firefox ? This could also explain the gap above the header.
    Thank you

    They only appear when viewed from IE on the login page.

    It’s just a dodgy square character…

    I only see the gap on the main page in FF, not IE…

    What are you using to edit files?

    Thread Starter miquel_909

    (@miquel_909)

    They only appear when viewed from IE on the login page.

    Weird… to be the cause of the problem, shouldn’t them be everywhere ?
    (don’t know if characters can be hidden or ‘not-viewable’, but they are for me)

    I only see the gap on the main page in FF, not IE…

    I see the gap doesn’t matter the browser, it is always there for me (Firefox 3.0.1 and IE7)

    What are you using to edit files?

    I use notepad.

    I think you where right at your guess. You see, when I copy the source code of a page in notepad and try to save it, it tells me that it contains “Unicode characters that will be lost if saving in ANSI”. So it seems that encoding can be the problem, but…. how did this come up ? My first thought was that editing the files of the theme could have caused the problem, but it happens in all themes I’ve tried… any ideas ?

    Thank you, this keeps me alive

    Try another editor, Notepad2, Notepad++, Amaya, all free…

    It is hard to find sources of problems when the site does not validate.
    https://validator.w3.org/check?uri=http%3A%2F%2Fwww.ciberpalma.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    But your error is most likely in the CSS where #header shows a bottom margin of 6px. That should be 0.

    Thread Starter miquel_909

    (@miquel_909)

    I think the problem is caused by a weird character (Unicode) being outputed just before any code in all pages.

    When looking at the source code, I can’t see it, but if I paste the source code in notepad and save it, notepad says that the file contains “Unicode characters that will be lost if saving in ANSI”, as I mentioned before. What I discovered is that if I save the file and then open it again, a question mark (?) is placed before any code in the page.

    ?<!DOCTYPE html…

    t31os_ , you can see a “dodgy square character” in IE, but that Unicode character is in every page, in every theme, and also in the admin pages.

    And kmessinger, thanks for pointing to validation. It confirmed what I think as you can see:

    Line 1, Column 1: character “?” not allowed in prolog
    …<!DOCTYPE html PUBLIC “-//W3C

    But, again, it has nothing to do with CSS. It happens with all the themes I’ve tried and also in the admin section. This is caused by the wp output… The header having a margin bottom is not the problem definitively.

    I’ve found similar problem in these posts, but the solutions didn’t work for me

    https://www.ads-software.com/support/topic/235690?replies=2

    https://www.ads-software.com/support/topic/243517?replies=17

    Thanks

    Thread Starter miquel_909

    (@miquel_909)

    I’ve found the solution here:

    https://www.ads-software.com/support/topic/181719?replies=3

    Thanks you for your help

    Thread Starter miquel_909

    (@miquel_909)

    I mark this as solved, but I still wonder what makes notepad behaving this way…I’ve been using it for years and never had such a problem

    This is a great solution – this problem happened to me this week – and ive spent hours trying to find out where the problem is.

    It seems this is a recent problem with notepad…. perhaps as a result of the new Vista SP2 update???

    Anyway its fixed now – babelpad is now my new editor!

    Mike

    I’d suggest Notepad++ or Notepad 2 as alternative… ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Layout mysteriously breaking (Not a CSS problem)’ is closed to new replies.