10 replies [Last post]
JessicaM
Offline
Regular
Last seen: 16 years 32 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

I am editing the CSS stylesheet of my moveable type blog here:

http://www.jessicamartin.org/blog

The strangest thing just happened. I was editing my left nav tags (the calendar items specifically) and now when I resize my browser, the calendar month completely disappears. I kid you not. I know it has to do with my css code because that is the only thing I was adjusting when this began happening. I tried reverting back what it was before (by memory) but apparently I'm not getting it right, as my calendar is still dissapearing.

Would any CSS experts out there mind having a look at my page (and code) to help me determine what I've done here?

Here is the css page associated with my blog:

http://www.jessicamartin.org:16080/blog/styles-site.css

Thanks in advance!

-Jessica

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

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?

JessicaM
Offline
Regular
Last seen: 16 years 32 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Strange Stylesheet Behavior

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

briski
briski's picture
Offline
Elder
London
Last seen: 8 years 25 weeks ago
London
Timezone: GMT+1
Joined: 2004-02-16
Posts: 1066
Points: 0

Strange Stylesheet Behavior

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

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 Tongue )

JessicaM
Offline
Regular
Last seen: 16 years 32 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Strange Stylesheet Behavior

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?

~

JessicaM
Offline
Regular
Last seen: 16 years 32 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Strange Stylesheet Behavior

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

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Strange Stylesheet Behavior

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.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

JessicaM
Offline
Regular
Last seen: 16 years 32 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Strange Stylesheet Behavior

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

~

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Strange Stylesheet Behavior

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 Wink

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

JessicaM
Offline
Regular
Last seen: 16 years 32 weeks ago
Joined: 2004-04-21
Posts: 21
Points: 0

Strange Stylesheet Behavior

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.

~

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 16 years 46 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Strange Stylesheet Behavior

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

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk