Strange Stylesheet Behavior

Hi!

I'm guessing you're using IE as I've had similar problems.

Having a quick tweek with your code I removed the position: relative; from the .calander declaration and it removed the problem.
However this has caused the calander to move on resize so it's possible this is not the effect your after?

Actually, that is EXACTLY the effect I am going for. I removed the position: relative; and all looks great. Thanks so much!

Curious, how do you do to check sites: do you d/l the page in question as well as the stylesheet then check it that way?

Also, I want to improve my knowledge of CSS. Do you have recommendations (online or through books) that are good for beginners?

Thanks again!

-Jessica

Glad that did the trick.

In general I download the page and css, link 'em up and play with it to see what's going on. In this case however I had a fairly good idea that this would be the problem cause I spent an age scrattching my head and starring at my code trying to fix a similar problem a while ago.

There are some usefull things once in a while on www.alistapart.com
Of course here is a great place to pickup tips and ways to do things.
Other that that I just cruze around google when I want to do a specific thing till I find it or give up and go home/bed (depending on who the works for )

Nice. Thanks for the tips.

So on the PC at my work the CSS code works great and just as I would like it to, allowing all of my elements on the page to float and shift as the browser resizes.

Yet when I got home from work and I checked my page on my MAC, the calendar remains static on the page while the rest of the elements shift.

Grrrrr. I loathe cross-browser issues.

Any ideas how I can get it to work on both browsers?

~

I'm sure it is possible to get all components of this table layout floating on both platforms.

I have been pulling my hair out over this. Are there any CSS experts or beloved geeks who could take a look at my code and help me out?

http://www.jessicamartin.org/blog

Thanks for any help you can offer!

-Jessica

If you remove the class from the div holding the calendar then the calendar will center above the ARCHIVES in Firefox. Is this the effect you are looking for?

<div align="center" class="calendar">

becomes

<div align="center">

The calendar will remain correctly styled.

Thanks Stu. I tried that and it works great on my PC. Do you have a MAC you could check it on? If not, I can check it on my MAC when I get home from work today.

*crosses fingers*

I really hope this works cross-browser...

~

Unfortunately I do not have access to a MAC, but I can give you a screen shot

http://capture.danvine.com/results/25183.png

This was produced by ~

http://www.danvine.com/icapture/

It looks promising

Thanks very much for the screenshot, and the advice. It looks and works great on my MAC.

I just discovered the CSS validator

http://validator.w3.org

and it appears I have many invalid tags on my site. Do you use and or recommend a CSS validator? A lot of the messages are confusing and dont make much sense to me

[url]http://validator.w3.org/check?uri=http%3A%2F%2Fwww.jessicamartin.org%2Fblog&charset=%28detect+automatically%29&doctype=%28detect+automatically%29&verbose=1)[/url]

Perhaps its because I am relatively new to CSS, but I want to figure it out so that my site is tight and well designed and well functioning.

~

Glad it's ok now.

As to your validation, most of the errors are due to you using xhtml 1.0 transitional.

This requires all tags to be closed, even tags like <br> should be <br />
All your meta tags should be closed in the same way.
<meta name="keywords" content="weblog, weblogs, Jessica Martin">
should be
<meta name="keywords" content="weblog, weblogs, Jessica Martin" />

The rest of the errors are due to the use of code which should be transferred to css.

For CSS validation I use w3c.org