WordPress.org

1. markovacs
   Member
   Posted 2 years ago #

   Hi,

   I have come across another formattin issue between different browsers.

   In Firefox or Chrome it works fine but IE (again) just wont work.

   I have a sign up form for my newsletter, and if someone want to move to the next box with the TAB and not by clicking with the mouse button,the text slides to the left and some part of it will not be visible.
   Please check: http://fittmamablog.hu/index.php/hirlevel/kismama-vagyok/

   I tried to look for some closings since last time this was the solution for some kind of IE problem, but I cannot see anything now.

   Could someone please look at the site and give me some hints.

   Thank you,

2. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   Start by trying to remove all blank lines in your form's markup. Closing </p> tags are being added all over the place

3. markovacs
   Member
   Posted 2 years ago #

   Esmi,

   Unfortunately it did not help yet.

   Any other suggestions?
   It must be something like this right?

   Since in Firefox and Chrome its all good.

4. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   The unwanted </p> tags are still there.

   Validation errors

   How are you adding this form? Via the HTML tab?

5. markovacs
   Member
   Posted 2 years ago #

   it a program called mailchimp they generated it I just copied it.
   I really cant see any unclosed p tags in my wordpress.
   I deleted everything between the </label> tag and the next line

   Please check this is what i can see:
   

   <div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" style="font: normal 100% Comic Sans MS;font-size: 13px;" action="http://fittmamablog.us1.list-manage.com/subscribe/post?u=d3306cc10317755a2f89c90f8&id=75df8096fa" method="post"> <fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #000000;padding-top: 1.5em;margin: .5em 0;background-color: #ffffff;color: #333333;">
   <legend style="text-transform: capitalize;color: #ffffff;background: #97B7C8;padding: .2em 1em;border: 1px solid #000000;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;">Feliratkozom</legend><div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"><label style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;" for="mce-MMERGE1">Hányadik hónapban vagy? </label><select id="mce-MMERGE1" class="required" style="padding: 0.2em 0.3em; margin-right: 1.5em; width: 95%; float: left; z-index: 999;" name="MMERGE1"> <option value="1. hónap (0-4. hét)">1. hónap (0-4. hét)</option> <option value="2. hónap (5-8. hét)">2. hónap (5-8. hét)</option> <option value="3. hónap (9-12. hét)">3. hónap (9-12. hét)</option> <option value="4. hónap (13-16.hét)">4. hónap (13-16.hét)</option> <option value="5. hónap (17-20. hét)">5. hónap (17-20. hét)</option> <option value="6. hónap (21-24. hét)">6. hónap (21-24. hét)</option> <option value="7. hónap (25-28. hét)">7. hónap (25-28. hét)</option> <option value="8. hónap (29-32. hét)">8. hónap (29-32. hét)</option> <option value="9. hónap (33-36. hét)">9. hónap (33-36. hét)</option> <option value="10. hónap (37-40. hét)">10. hónap (37-40. hét)</option> </select></div>
   <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"><label style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;" for="mce-EMAIL">Email címed </label>
   <input id="mce-EMAIL" class="required email" style="padding: 0.2em 0.3em; margin-right: 1.5em; width: 95%; float: left; z-index: 999;" name="EMAIL" type="text" /></div>
   <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"><label style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;" for="mce-LNAME">Vezetékneved </label><input id="mce-LNAME" class="required" style="padding: 0.2em 0.3em; margin-right: 1.5em; width: 95%; float: left; z-index: 999;" name="LNAME" type="text" /></div>
   <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"><label style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;" for="mce-MMERGE4">Keresztneved </label><input id="mce-MMERGE4" class="required" style="padding: 0.2em 0.3em; margin-right: 1.5em; width: 95%; float: left; z-index: 999;" name="MMERGE4" type="text" /></div>
   <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;"><label style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;" for="mce-MMERGE5">Címed (csak ha magánszemélyként iratkozol fel) </label><input id="mce-MMERGE5" style="padding: 0.2em 0.3em; margin-right: 1.5em; width: 95%; float: left; z-index: 999;" name="MMERGE5" type="text" /></div>
   <div><input id="mc-embedded-subscribe" class="btn" style="margin: 1em 0pt 1em 5%; clear: both; width: auto; display: block;" name="subscribe" type="submit" value="Feliratkozom" /></div>
   </fieldset>(Ha magánszemélyként iratkozol fel, a Gazdasági Reklámtevékenység Alapvető Feltételeiről és Korlátairól szóló 2008. évi XLVIII. Törvény, valamint az Elektronikus Kereskedelmi szolgáltatások egyes kérdéseivel foglalkozó 2001. évi CVIII. Törvény rendelkezései alapján a nevén és az e-mail címén kívül a lakcímedet is el kell kérnem. Ha mégsem magánszemélyként iratkozol fel, nem kell megadnod a lakcímedet.)
   
   Az általunk bekért és a látogatók által önkéntesen megadott személyes adatokat a 1992. évi LXIII. törvény a személyes adatok védelméről és a közérdekű adatok nyilvánosságáról szóló Adatvédelmi Törvénynek megfelelő módon őrizzük, védjük, és gondoskodunk arról, hogy harmadik fél kezére soha ne jusson.
   
   A hírlevélről a bármelyik hírlevél alján megtalálható "Leiratkozni itt lehet" linkre kattintva egyetlen klikkel leiratkozhatsz.
   <a id="mc_embed_close" class="mc_embed_close" style="display: none;" href="#">Close</a>
   </form></div>
   <!--End mc_embed_signup-->

   Thanks,

6. markovacs
   Member
   Posted 2 years ago #

   Sorry I might not answered your Q.
   Yes I added it trough the HTML tab.

   But I still cant see any P tags after where else should I see them

   Thanks

7. markovacs
   Member
   Posted 2 years ago #

   I solved the problem.

   I just noticed that the boxes where people were able to enter their name, adress etc. was too long and that is why it was jumping from the front to the end. Causing the text to be outside of the visible area.

   I just reduced the width of the boxes and now it is working ok.

   But still have problem,
   In IE the first box in not aligned with the other boxes below.
   I have tried many things to work it out but still no luck.
   I tried to change paddings, margins and all but then it makes in Firefox to look bad too.

   So it is IE again that is missing/noticing somethin I/FF/Chrome cannot see.

   Any ideas?

8. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   You might want to have a look at conditional comment CSS.

9. markovacs
   Member
   Posted 2 years ago #

   Esmi,

   I hoped that this will be easier, but ok I am willing to learn how to use this:

   I tried this but it just wont work for me:

   <!--[if IE]>margin-left: 2.2em<![endif]-->

   I tried like this:

   <select id="mce-MMERGE1" class="required" style="padding: 0.2em 0.3em;margin-right: 1.5em; width: 30%; float: left; z-index: 999;" name="MMERGE1"><!--[if IE]>margin-left: 2.2em<![endif]--> <option value="1. hónap (0-4. hét)">1. hónap (0-4. hét)</option> <option value="2. hónap (5-8. hét)">2. hónap (5-8. hét)</option> <option value="3. hónap (9-12. hét)">3. hónap (9-12. hét)</option> <option value="4. hónap (13-16.hét)">4. hónap (13-16.hét)</option> <option value="5. hónap (17-20. hét)">5. hónap (17-20. hét)</option> <option value="6. hónap (21-24. hét)">6. hónap (21-24. hét)</option> <option value="7. hónap (25-28. hét)">7. hónap (25-28. hét)</option> <option value="8. hónap (29-32. hét)">8. hónap (29-32. hét)</option> <option value="9. hónap (33-36. hét)">9. hónap (33-36. hét)</option> <option value="10. hónap (37-40. hét)">10. hónap (37-40. hét)</option></select></div>

   Could you please help where I should put this.
   As you can tell I am not an expert in HTML.

   Thank you for your time and help, appreciated.

10. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    When using conditional comment css, you still have to provide properly formed CSS. Personally, I prefer to call an extras CSS sheet but you could use something like:

    <!--[if IE]>
    <style type = "text/css">
    .class_namee {margin-left: 2.2em}
    </style>
    <![endif]-->

    and replace class_name with the element and/or class that you're trying to target in IE.

11. markovacs
    Member
    Posted 2 years ago #

    Ok,

    I am sorry, but does this mean that this code goes into my style.css?
    Anywhere or is there a special space?

    I know I am a pain but I really haven't done this before.

    Thanks,

12. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    The code I gave above can go into your theme's header.php file within the <head></head> section.

13. markovacs
    Member
    Posted 2 years ago #

    Esmi,

    I am really sorry, but I cant figure it out.
    No matter what I write in it just wont make any difference to that box.

    YOu can see above the code for the box, what should I write instead of class_name?

    I have tried with many different options but no change.

    Please if you can give me the exact code, I would be really happy.

    Thank you anyway for your help.

Topic Closed

This topic has been closed to new replies.