WordPress.org

1. bethmaher
   Member
   Posted 3 years ago #

   Hello there, fellow WordPress users.

   I have been using WordPress for 4 years now, and mostly, I love it, but sometimes things get to me - overly complicated and slow to load templates being one of them.

   So last year I made my own.

   Only problem being that I (rather stupidly) used Safari to do it, and now there's a problem I was unaware of that seems to only present itself in Firefox (I have no idea what it looks like in IE as I have no access to any pcs - bad of me, I know, but what can you do - if anyone wants to help me with that too it would be great).

   So I have this one little glitch: my sidebar refuses to align with the top of my content no matter what I do. It works in Safari, but not in Firefox - which is plenty weird, I know. In Firefox it just slides around. Sometimes it finds itself at the top of the page, sometimes at the bottom. It is plenty annoying.

   My blog is to be found here:
   http://www.bethmaher.com/blog/

   What am I doing wrong? I've tried everything, and just can't figure it out. Help would be greatly appreciated.

2. Eric Amundson
   Member
   Posted 3 years ago #

   Hi Beth,

   I just did a quick check in Firefox 3 and it looks okay to me. Maybe I'm missing the issue.

   You might try using a site like http://browsershots.org/ to see what it looks like in different browsers.

   I assume you're using Firefox on a Mac, right? Which version?

3. Eric Amundson
   Member
   Posted 3 years ago #

   Hey Beth,

   Another good idea is to make sure your site validates, or at least comes close.

   You can use the W3C online validator to spot errors in your code. Fixing these will often help ensure that you have better cross-browser and cross-platform rendering.

   http://validator.w3.org/

4. drewactual
   Member
   Posted 3 years ago #

   been playing with your page...

   change:
   #page /* this is where the content of the website is */
   {
   background: #fff;
   width: 740px;
   padding: 0px;
   margin: 0px auto;
   display: table;
   }

   to:
   #page /* this is where the content of the website is */
   {
   background: #fff;
   width: 740px;
   padding: 0px;
   margin: 0px auto;
   }

   I bet that little gadget trips FF out pretty bad, and would account for the 'sometimes' situation... btw, I had to refresh the page several times to get the effect you are talking about...

5. Eric Amundson
   Member
   Posted 3 years ago #

   Ooh, I didn't see that. You can even eliminate the 'px' after any zero values, like:
   

   #page /* this is where the content of the website is */
   {
   background: #fff;
   width: 740px;
   padding: 0;
   margin: 0 auto;
   }

   Doesn't save a lot, but across a stylesheet it can save a few bits and there's no use having schtuff you don't need. :)

6. drewactual
   Member
   Posted 3 years ago #

   here as well:
   #secondary /* this is the sidebar */
   {
   background: #fff;
   font-size: x-small;
   width: 120px;
   padding: 0px;
   padding-right: 30px;
   padding-left: 20px;
   margin: 0px auto;
   border-left: 2px solid #6cc;
   float: right;
   position: relative;
   display:table;
   }

   to:
   #secondary /* this is the sidebar */
   {
   background: #fff;
   font-size: x-small;
   width: 120px;
   padding: 0px;
   padding-right: 30px;
   padding-left: 20px;
   margin: 0px auto;
   border-left: 2px solid #6cc;
   float: right;
   position: relative;
   }

7. drewactual
   Member
   Posted 3 years ago #

   now change #primary to this:

   #primary /* this is where the wordpress loop goes */
   {
   background: #fff;
   width:60%;
   padding: 0px;
   margin: 0px auto;
   margin-top: 10px;
   margin-left: 30px;
   float: left;
   }

8. drewactual
   Member
   Posted 3 years ago #

   whoops:

   #primary /* this is where the wordpress loop goes */
   {
   background-color: #fff;
   width: 70%;
   padding: 10px;
   margin: 0px auto;
   padding-top: 10px;
   padding-left: 30px;
   float: left;
   }

   getting there..anyways....

9. drewactual
   Member
   Posted 3 years ago #

   gotta get rid of the inline declaration in your #page

10. drewactual
    Member
    Posted 3 years ago #

    float: left in #secondary

11. bethmaher
    Member
    Posted 3 years ago #

    Ok! Everything is starting to look good. Man, it just gets to the point where you've added all these things in to counterbalance other things (I remember having some troubles with all the line items and divs in the widgets when they were first introduced) and it all gets jumbled and messed up, you know?

    Thank you so much for replying so quickly and thoroughly though!

    Just one last question though: how do I get the empty bits of my sidebar to continue on down the page? You know, so that the site looks like one big, pretty floating white block?

12. drewactual
    Member
    Posted 3 years ago #

    #footer --- background: transparent;

13. drewactual
    Member
    Posted 3 years ago #

    add to #secondary-- -moz-border-radius: 0 0 15px 0; and padding-bottom: 25px;

    sorry, that is just me getting silly. but it looks good to me anyway!

14. bethmaher
    Member
    Posted 3 years ago #

    Does the footer have to be transparent? cause I kind of liked it not, and I was using it to hide my unsightly site meter (ghetto, I know, but the dang thing seems to capture some links that my internal stats miss). Is that an IE fix?

15. drewactual
    Member
    Posted 3 years ago #

    I just put it there for good measure.. it can certainly stay if you like it.. you can add the -moz radius to it to, to round it off and match up the rest of your look.

16. drewactual
    Member
    Posted 3 years ago #

    if you double that right corner radius to 30px it will almost match the picture in your header

17. bethmaher
    Member
    Posted 3 years ago #

    Oooooooh.

    I didn't know mozilla could render rounded corners all on it's own. Good call. I may actually change the scheme around to take advantage of that.

18. drewactual
    Member
    Posted 3 years ago #

    we better add text-align:left to #secondary as well- ie is falling back on centering..

19. drewactual
    Member
    Posted 3 years ago #

    looks like you are off in the right direction!!!

    let me scoot off and see who else has a page I can screw up....

    :-)

20. bethmaher
    Member
    Posted 3 years ago #

    Thanks so much! You've been the biggest help, pretty much ever!
    Man, I wish I could send cookies (real ones that is, not the code kind) over the internet, cause I totally would.

    You should go treat yourself for the good karma anyhow.

21. drewactual
    Member
    Posted 3 years ago #

    it all comes back in good time... thanks for the snack!

Topic Closed

This topic has been closed to new replies.