Widget Alignment Problem

10 posts from 2 voices

• Started 2 years ago by Digishire
• Latest reply from Dude
• This topic is resolved

Tags:

No tags yet.

1. 

   Digishire
   Member

   My "Categories" and "Archives" widgets display as properly aligned, however my "Links" widget is displaying with all of the text elements shifted down 1px (if properly aligned they should be moved up 1px). If I experiment with adding additional widgets to my sidebar, I get other random "1px off" misalignment issues. How would I go about fixing this issue so that I have a pixel perfect alignment for all of my widgets?

   The issue exists in FireFox 3.6.13 and Internet Explorer 8. The widgets do however appear to be perfectly aligned in Opera 10.63.

   My Habitat themed website is here: http://tinyurl.com/682k3tc

   Posted 2 years ago #
2. 

   Dude
   Dude

   Hey,
   I can't reproduce the error with Firefox 3.6 or Ie but you can try to change the padding. Open up style.css and search for:
   

   .widget_recent_entries a,  .widget_categories a,  
   
   .widget_pages a,  .widget_meta a,  .widget_archive a 
   
   ,  .widget_nav_menu a,  .widget_links a, 
   
   .recentcomments{
   border-bottom-style:solid;
   border-bottom-width:1px;
   display:block;
   line-height:25px;
   padding:3px 17px;
   }

   Change 3px in "padding:3px 17px;" to 2px.

   Posted 2 years ago #
3. 

   Digishire
   Member

   I gave it a try and it doesn't seem to be working. The padding did change obviously, however the alignment is still off by 1px on random widgets.

   Posted 2 years ago #
4. 

   Dude
   Dude

   Hey,
   I've made two screenshots (IE and Firefox) - maybe I missed something but I can't see this 1 pixel flaw...

   Firefox:
   

   IE 8:

   

   Maybe it appears to logged in users only? Maybe a plugin causes it?

   Posted 2 years ago #
5. 

   Digishire
   Member

   Thanks for the screenshots. I took a look at them and the problem does appear to be occurring in both of your browsers as well. If you measure it out using Photoshop you'll see that the alignment is off for the middle widget (the misalignment seems to occur with every other widget, though not always and not exclusively). I generally wouldn't make a fuss about a 1px misalignment issue, but it is very noticeable with my screen setting (1280x1024 resolution).

   I disabled all of my plugins and logged out, yet the problem persists.I also turned off the "post count" feature for the archive and categories widget, but it also did not correct the issue.

   Posted 2 years ago #
6. 

   Dude
   Dude

   The last thing you can try is to change the margin widget dependend. It's a bit of work because you need to check your website's source code and you need to find the right widgets. (If you don't know how to view the source code have a look at this page: http://www.computerhope.com/issues/ch000746.htm ) - Search for "<div class='sidebar'>" - after this div you'll find some other divs with different ids like: search-7, categories-5 or archives-4

   I.e. the link widget has the id: linkcat-2

   So open up style.css and insert following code:
   

   .linkcat-2 a{
   margin-top: -1px;
   }

   Posted 2 years ago #
7. 

   Digishire
   Member

   I gave this a try, but cannot seem to get it to work.

   I checked the site in Google Chrome, and like Opera the widgets line up perfectly. So it's only in FireFox and IE. I temporarily reverted the site over to other themes to see if the same issue arises, but couldn't seem to replicate the problem.

   Is there a way to add a filter function so that I can correct the issue in IE and FireFox without affecting Opera and Chrome?

   I'm stumped as to what could be causing this issue, and how to correct it. Any help would be much appreciated.

   Posted 2 years ago #
8. 

   Dude
   Dude

   You can try to use IE conditional tags ( http://www.quirksmode.org/css/condcom.html ). I must admit I don't know how to use Firefox specific code though (yes you can use php scripts or jquery to check which browser is used but it's a complex solution which requires some coding skills..)

   Posted 2 years ago #
9. 

   Digishire
   Member

   I made a change that fixed the issue. I've got pixel perfect font alignment now across all four browsers.

   In this area of style.css:
   h1, h2, h3, h4, h5, h6, legend, .sliderheading {

   I changed line-height:1.4em; to line-height:1.5em;

   My coding skills are really weak. Does this seem like a logical solution, or did I possibly change something that I shouldn't have? I don't see any problems with the site, so hopefully all is well.

   I appreciate all your help and suggestions on the issue. Many thanks.

   Posted 2 years ago #
10. 

    Dude
    Dude

    The change doesn't affect things dramatically - it just adjust the line height. It's strange though because ALL elements are affected by this change (not only certain widgets). Maybe this 1px error was caused by cufon font replacement and because of the line height change the problem disappeared...

    Glad that you found a solution :)

    Posted 2 years ago #

RSS feed for this topic

Reply

You must log in to post.