CSS Help for Mac browsers

[fcvolunteer]

I'm nearly finished my website but I'm noticing that the paragraphs on one of the pages http://www.friendshipcircle.com/bikers.asp aren't showing up correctly in any browser on a Mac. I've attached a screenshot of how it should look. I know there must be an issue in the css but I don't know what it is and I'm curious why it's only happening in Mac browsers.

Thanks!

[doriangray]

two things i see: biker_bio2 has no float right instead of biker_bio
biker_icon1: padding-right completely crushes the layout in firefow under mac.

[Arkinder]

The heights of the text in biker_bio and biker_bio2 are exceeding the height their containers. Try changing the font-size in each CSS rule to 13px.

Regards
Arkinder

[fcvolunteer]

The heights of the text in biker_bio and biker_bio2 are exceeding the height their containers. Try changing the font-size in each CSS rule to 13px.

Regards
Arkinder

Thanks so much that seems to have fixed it! I'm now trying to figure out what's wrong with the css of the footer since it seems that only Firefox is able to understand it and produce the desired outcome, both on a PC and Mac.

Any ideas?

Thanks so much!

[Arkinder]

I'm actually on a trip in Europe right now, so there I don't have time to take a look at it. But if no one replies in the next 4 days just send me a message, and I should be able to help you. :)

Regards
Arkinder

[fcvolunteer]

I'm actually on a trip in Europe right now, so there I don't have time to take a look at it. But if no one replies in the next 4 days just send me a message, and I should be able to help you. :)

Regards
Arkinder

Thanks so much! Enjoy your trip. :-)

[twiss]

I think there's something strange with your server - the css file comes with a Not Modified header, while you certainly have modified it. If you clear your browser's cache and reload the page, it should work.

[fcvolunteer]

I think there's something strange with your server - the css file comes with a Not Modified header, while you certainly have modified it. If you clear your browser's cache and reload the page, it should work.

I cleared the cache in Firefox and Chrome and nothing changed. Still looks ok in Firefox (on my PC) but not recognizing the CSS in Chrome, IE, and I presume Safari as well :-(
Really frustrating since I don't know what to change in the css or whether that will even help.

Maybe I misunderstood what your were saying. Oddest part about this is that it was working fine and then out of the blue without me touching the code for the site, the footer appears broken in IE, Chrome, and Safari.

:-(

[ko ko]

Mark-up are also messed. Fail DTD http://validator.w3.org.
'<li>' tag is outside of the '<ul>' at line 99. But, I don't think so that probably make the layout flew.
Validate your CSS here.

[fcvolunteer]

Mark-up are also messed. Fail DTD http://validator.w3.org.
'<li>' tag is outside of the '<ul>' at line 99. But, I don't think so that probably make the layout flew.
Validate your CSS here.

Thanks, I validated the html and I "passed" :-) the css validator seems to be having issues with all of the CSS3 styles like @font-face and the text shadow. None of my changes seem to have helped my layout issue.

:-(

[twiss]

Okay, I found the error. It's on line 625.

[fcvolunteer]

Okay, I found the error. It's on line 625.

WOW!!!

Thanks soooo much! I can't even begin to tell you how helpful that was.

One small question though:

Why did that break css that wasn't even using that class? That class was only being used on one page. And what do I do if I need to use that code?

(I guess that was two questions ;-) )

Again, thanks so much!

[twiss]

Haha, you don't have to disable the thing entirely. It's just that this:

rect(rect(0px, 182px, 188px, 35px)

needs to be (duh):

rect(0px, 182px, 188px, 35px)

[twiss]

To answer the other question, read this. Behavior in such cases is not defined, and browsers do not need to handle such errors in a specific way.

[fcvolunteer]

Haha, you don't have to disable the thing entirely. It's just that this:

rect(rect(0px, 182px, 188px, 35px)

needs to be (duh):

rect(0px, 182px, 188px, 35px)

Lol, ok I feel like an idiot. :-)

I was so eager to fix the darn thing which has wasted so much of my time that I only too gladly commented that section out and didn't even bother to look at it again, figuring that it was just too much for my lil' brain to understand. I must have started putting in the CSS by hand and then pasted in a piece from firebug hence the duplicate.

Thanks for your patience and for your solution!

[twiss]

Okay, no problem, nice that it works now :)