954,598 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

CSS Help for Mac browsers

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!

Attachments bikers_screenshot.jpg 178.19KB
fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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.

doriangray
Newbie Poster
1 post since May 2011
Reputation Points: 10
Solved Threads: 1
 

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

Arkinder
Posting Pro in Training
454 posts since Nov 2010
Reputation Points: 113
Solved Threads: 59
 

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!

fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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

Arkinder
Posting Pro in Training
454 posts since Nov 2010
Reputation Points: 113
Solved Threads: 59
 

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

fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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.

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 
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.

:-(

fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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

Zero13
Practically a Master Poster
624 posts since Jan 2009
Reputation Points: 120
Solved Threads: 139
 
Mark-up are also messed. Fail DTD http://validator.w3.org . '' tag is outside of the '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.

:-(

fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 
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!

fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 

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.

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 

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!

fcvolunteer
Newbie Poster
22 posts since Mar 2011
Reputation Points: 12
Solved Threads: 1
 

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

twiss
Veteran Poster
1,005 posts since Apr 2010
Reputation Points: 177
Solved Threads: 101
 

This question has already been solved

Post: Markdown Syntax: Formatting Help
You
View similar articles that have also been tagged: