Support » Themes and Templates » I hate IE….sidebar misaligned…help please!

  • Ok, I’m usually reluctant to post on the forums here, because most newbies get thoroughly shredded…but I have nowhere else to go. <tear>

    Anywho…I’m having trouble with part of my site not looking right in IE. The sidebar looks great in Firefox and on my iphone…but gets all misaligned and jacked in IE. I really don’t even have access to a computer with IE on it most of the time, so I usually hear days later that it still looks messed up.

    I’ve tried adding the “.” before css codes (I read somewhere that this would work) to see if that would help, but to no avail.

    I just don’t understand because it looks great in Firefox and Safari on my Mac, but looks totally jacked on PCs in IE. But I know that there are still a significant number of people using IE, so I need to get it sorted.

    Any help would be greatly appreciated. Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • Oh yeah, I’m using wordpress 2.7 if that matters.

    yeah yeah IE sucks and all that – however the problem relates to your coding not some weird IE bug – its just luck that non IE browsers render it how you wanted.

    1. You have at least 2 instances of the ID “sidebardivs” – you can only have 1 instance of an ID on a page. Change the IDs to a class – “.sidebardivs” in the CSS and change the HTML to class=”sidebardivs”
    2. The 2 DIVs currently with ID of “sidebardivs” are not enclosed within LI tags – they must be if they’re inside a UL


    That sounds good. I did #1 and it still looks good in my browser. For #2 though, I’m not sure I’m seeing what you are seeing. The first sidebar item, (not “sidebardivs”) is a widget that is having issues of its own. The second is a search form, which is not a list at all, nor is it enclosed in a UL. Then the third is enclosed in LI and UL.

    Am I missing something?

    Yeah, and I still can’t check this in IE from my house, so if you don’t mind taking a minute to see if they render the same, that would be oh so bueno.

    Thanks for your help.


    your first twitter sidebar item may indeed be at the heart of the problem

    change this

    ...<div class="twittertext" style="overflow:auto; height:165px; width:250px"><li>
    <ul class="twittercopy" id="twitter_update_list">...


    ...<div class="twittertext" style="overflow:auto; height:165px; width:250px">
    <ul class="twittercopy" id="twitter_update_list"><li>...

    regarding the DIVs:

    The second is a search form, which is not a list at all, nor is it enclosed in a UL. Then the third is enclosed in LI and UL.

    they are inside <ul id=”sidelist”> but they are not inside LI tags – they should be

    Ok….I changed the first part. Hopefully that helps.

    Now on the DIVs…

    Should I place the LI tag before the UL id=”sidelist” tag and after the final UL tag, or somewhere in the specific DIV like this?

    <div class="sidebardivs"><H3>
    <li><img src=""></H3><?php include (TEMPLATEPATH . '/searchform.php'); ?></li>

    Thanks again…

    I hate to bump…but…

    I have made the change as I described above. But I have no way of checking my work over the next few days.

    Does it look pretty much the same from Firefox to IE?

    Thanks again…


    You have an Unordered List. The UL element goes before the individual LIst elements.

    A good tutorial on all things CSS is HERE

    Ok…I think I may have taken care of that though. Zeniph helped me a bit, and I wanted to see if I corrected the problem.

    In the example you showed above, put a

    <li> ....blah blah..

    It is already in the “UL sidelist” from the beginning of the sidebar…. does it need an additional one? I don’t want it to get messed up by there being to many.

    So anyone….does it match now?

    no still no good – please just check you sidebar code thoroughly.

    you have some stray closing </div>s messing things up and you still have <div> tags imeadiately inside your UL. The only things that can go imeadiately after UL is an LI tag. Inside LI you can place (nearly) whatever you want.

    further to what Saurus said, your basic structure should be:

    <div id="sidebar">
      <ul id="sidelist">
      <li> <div class="sidebardivs"><H3>heading</H3>images, forms, more UL, LI whatever </div> </li>
      <li> blah </li>
      <li> blah </li>
Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘I hate IE….sidebar misaligned…help please!’ is closed to new replies.