vertically aligning sidebars glitch in firefox

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 https://browsershots.org/ to see what it looks like in different browsers.

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

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.

https://validator.w3.org/

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…

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. ??

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;
}

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;
}

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….

gotta get rid of the inline declaration in your #page

float: left in #secondary

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?

#footer — background: transparent;

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!

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?

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.

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