21 replies [Last post]
thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Great site and I just found it. I'm sorry my first post has to be a plea for help.

I have been coding now in complete CSS for about a year. I have been redoing some of my old sites in CSS and they work fine.

But I have a problem child.

http://www.missouricarry.com

It looks good in IE but in FireFox, the CSS is not being rendered?

Anybody know why. It does have a validation error but it doesn't make sense to me.

All of my other CSS site show up fine in FireFox, Safari and IE, but for cryin out loud, I can't figure this one out.

Suggestions Please.

-zac
www.wetinkpro.com

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Check this site PLZ - UPDATE -

The validation error shows you exactly what's (probably) wrong: you are using an XHTML-style self-closing tag in an HTML document. Try this: <link href="mocarry.css" rel="stylesheet" type="text/css">

Life's a b*tch and then you die!

larmyia
Offline
Elder
London
Last seen: 13 years 12 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Check this site PLZ - UPDATE -

interesting. do you realise the css works when you edit the css directly in ff? I wonder why that is......

I dont' know if it'll make any difference, but I wonder if you html error arises because you haven't closed your meta tags.

larmyia

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Check this site PLZ - UPDATE -

larmyia wrote:
interesting. do you realise the css works when you edit the css directly in ff? I wonder why that is.

Probably because FF caches a separate, local copy of the stylesheet that you can edit, and then links the page to it (overruling the incorrect XHTML-style link).

Life's a b*tch and then you die!

thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Check this site PLZ - UPDATE -

hmm. fixed the "/" and still doesn't show up in FF. Still looks ok in IE.

It also now fully validates in CSS and HTML.

Any other suggestions?

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Check this site PLZ - UPDATE -

Hmmmm. Well, a complete CSS failure like this would normally point to either a broken file link (hence why I jumped at the syntax error before), or a CSS parsing error. But this ought to be picked up by the validator so I'm a little lost at first glance. Have you double-checked all of your CSS syntax?

I've got to get my kids' tea now but I'll take a closer look later if I can; if no-one else solves the problem in the meantime.

PS: you really ought to learn to lay out your pages with floats as absolutely positioned elements will forever cause you problems (not that I think that is relevant to this particular problem).

Life's a b*tch and then you die!

DeprecatedDiva
DeprecatedDiva's picture
Offline
Enthusiast
NW Louisiana
Last seen: 14 years 51 weeks ago
NW Louisiana
Timezone: GMT-6
Joined: 2005-06-12
Posts: 135
Points: 0

Check this site PLZ - UPDATE -

Would the fact that all the img files appear to have the self close tag also have something to do with it?

edited to add: the last self close slash on "zacdot" is also missing the space before the slash.

DeprecatedDiva

Ciryaquen
Ciryaquen's picture
Offline
Enthusiast
Last seen: 5 years 1 week ago
Timezone: GMT-8
Joined: 2005-03-15
Posts: 74
Points: 0

Check this site PLZ - UPDATE -

I checked your site on a Mac in Safari, Firefox, and IE.

In Safari and IE the member forum and quote of the week stick out of the sidebar. (will attach screenshot). Firefox presents 1 column of default formatted text, no images, no layout, no background stuff. On your non-home pages, the "home" button links to http://www.missouricarry.com/index1.htm and gives a 404 page not found error. Also, the "some_text >>> " headers and buttons look like they should be links but don't work as links.

Hope that helps.

Total newbie and purely amateur webmaster...

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Check this site PLZ - UPDATE -

Right then, this is how to sort it out. Replace your entire stylesheet with a single, simple background colour to the body element, and nothing else. If the colour does not show in FF then the problem is in the HTML document. Look at the stylesheet link and everything around it.

If the colour does show then the problem is in your original stylesheet, which you should now restore. Remove half the styles and see if anything shows in the browser. If it does then the problem is within the code that you removed. If not then it's within the code remaining. Keep doing this, half at a time until you're left with one line of code and that will be your problem. This is called the half-split method and it's how I was trained to fault find electronics snags on fast-jets. We may be talking about code in this instance, but the methodology is still valid.

Obviously, if the problem is in the HTML file then you can use the half-split method to trace the problem there too. If you can narrow down the snag a bit further, I don't mind trying to help again; it's just that there's an awful lot of code to trawl through at the moment!

Life's a b*tch and then you die!

xaphalanx
xaphalanx's picture
Offline
Enthusiast
Last seen: 16 years 26 weeks ago
Joined: 2005-06-06
Posts: 64
Points: 0

Check this site PLZ - UPDATE -

Still not displaying in Firefox.

Anonymous
Anonymous's picture
Guru

Check this site PLZ - UPDATE -

Off topic: Does every element on the page use position: absolute???

Looks like you may need a rewrite. I hope you do because this is a topic dear to my heart.

See below to see why position: absolute is such a bad idea in this case:

Are those Oleg Volk photos? I always liked his pics. Smile

Was he pretty free about giving permission to use his pics on your site?

thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Check this site PLZ - UPDATE -

yeah, he is pretty cool about letting other sites like mine use his work.

He is a genius at getting a message across with a camera.

Thanks Guys!!!

I'm going to do a re write.

Triumph, what browser are you viewing to get those results. The font size and position should be constrained in the CSS sheet.

How would I do it differently? Any input would be greatly appreciated as I look to redo this in the very near future.

Anonymous
Anonymous's picture
Guru

Check this site PLZ - UPDATE -

thebirdbath wrote:
yeah, he is pretty cool about letting other sites like mine use his work.
He is a genius at getting a message across with a camera.
Yeah, I figured he would do anything to help the cause. Smile

thebirdbath wrote:
Triumph, what browser are you viewing to get those results. The font size and position should be constrained in the CSS sheet.
That is Safari. Remember that some people need to increase text size just to be able to read the screen. Don't try to constrain text size (you really can't anyway) because it will alienate those people.

thebirdbath wrote:
How would I do it differently? Any input would be greatly appreciated as I look to redo this in the very near future.
First, I'd dump Dreamweaver. Wink

Then start with a basic layout ( http://www.csscreator.com/version2/pagelayout.php ) and tweak it from there until you are happy with it.

Let me know if I can be of assistance.

(PS "arguement" should be spelled "argument")

Smile

thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Check this site PLZ - UPDATE -

WHOO HOO!!!

I found out why FF wasn't reading the CSS.

A couple of solutions but I have a couple more questions.

First off why wasn't my CSS being rendered in FF?
ANSWER: The servers MIME settings were set up for text/plain and not text/css.

I had to make a quick call to the support team for the server and all became good and well again.

This might be a good thing to ask others who come to the forum with similiar issues....ei, my HTML-CSS code validates but still doesn't render in any particular browser...mainly firefox or safari.

FURTHER QUESTIONS

A.
It was mentioned that I should change my div positions to float instead of absolute.

1. What does this do?
2. Do I type it as: position: float; as I've never done this before so I dont' know.

B.
Why is the text contrained in IE no matter what size text you adjust under "view" but not when in FF. If a visitor comes to the site with his text all big and is surfing FF, the site will look jumbled.

Thanks again for all your advice. I'm learning a ton that I didn't know before.

Smile

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 15 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Check this site PLZ - UPDATE -

A simple google for float tutorials will tell you all you need to know.

Verschwindende wrote:
  • CSS doesn't make pies

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Check this site PLZ - UPDATE -

I'm pleased that you sorted out your stylesheet problem - that is something I never would have guessed at. What led you to look at the server's MIME settings? I shall have to read up on this issue. As for people with similar problems, I've never know of this problem before but will keep it in mind for the future.

This will get you started on floats > http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm and this will get you started with font sizing > http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html#screens (the answer to your question is that you are defining your text size in pixels) but as TPH suggests, everything you need to know is just a few google searches away.

As Triumph suggested earlier, the best thing you can do for yourself is to stop letting DW lay out your pages, start to read a few CSS tutorials, and try your own simple hand-coded layouts. It's a steep learning curve but well worth the effort. We've all been there and come through the pain barrier all the better for it Smile

Life's a b*tch and then you die!

thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Check this site PLZ - UPDATE -

Thanks Roy for the links and advice.

I'm not sure what you mean by letting DW make my page layouts. I do use dreamweaver but not to layout my pages.

I first design my sites in Photoshop and then render out the images in Image Ready. Then I handcode the divs in an HTML sheet and then CSS sheet. Pretty much use Image Ready to puzzle piece them together.

The only thing I use dreamweaver for is help on the JAVASCRIPT. Notice the MM in the scripts.

Other than that I could use FrontPage, CuteHTML....any HTML editor to puzzle the photoshop images together.

So I'm not sure what you mean by letting Dreamweaver layout my pages because I don't...I do that in photoshop.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 15 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Check this site PLZ - UPDATE -

thebirdbath wrote:

Other than that I could use FrontPage, CuteHTML....any HTML editor to puzzle the photoshop images together.

I wouldn't really class FP as a HTML editor . . .

Verschwindende wrote:
  • CSS doesn't make pies

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 8 years 19 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Check this site PLZ - UPDATE -

thebirdbath wrote:
I'm not sure what you mean by letting Dreamweaver layout my pages because I don't...I do that in photoshop.

I saw the 'MM' javascript scripts and all the absolutely positioned elements and, like Triumph, concluded that you were using DW as this is the way DW seems to do things. But disregarding the DW bit, my advice still stands: learn to float things together. I too start off with Photoshop when designing my sites, but then I save down the key visual elements and background tiles/slices, and (generally but not always) use floats to fit everything together such that the design can still flex to suit the content.

Life's a b*tch and then you die!

thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Check this site PLZ - UPDATE -

thanks roy, I'm going to get started on those tuts.

Laughing out loud

thebirdbath
thebirdbath's picture
Offline
Regular
St. Louis
Last seen: 11 years 44 weeks ago
St. Louis
Timezone: GMT-6
Joined: 2005-07-07
Posts: 19
Points: 4

Check this site PLZ - UPDATE -

Those tuts at: http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm are pretty advanced.

1. what does em stand for?
2. I have no idea what this line of code does: margin: 2.5em 3%;
3. Nor this: p.top

I need to learn how to do wraps but it there a tut out there that is not so complicated to understand. I'm sick of using all absolute positioning.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 5 days 15 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

Check this site PLZ - UPDATE -

thebirdbath wrote:
Those tuts at: http://www.bigbaer.com/css_tutorials/css.float.html.tutorial.htm are pretty advanced.

1. what does em stand for?
2. I have no idea what this line of code does: margin: 2.5em 3%;
3. Nor this: p.top

I need to learn how to do wraps but it there a tut out there that is not so complicated to understand. I'm sick of using all absolute positioning.

You've got to start using search features, you know :roll:

1) EM is a measurement, the square of a font-size.

http://www.bigbaer.com/css_tutorials/css_font_size.htm

2) It's shorthand, specifying top and bottom margins of 2.5ems, and left and right of 3% (oo-er, not sure either!)

3) It's a specific style to target this code:

<p class="top"> blah </p>

And don't use AP, it;s a bad thing.

Verschwindende wrote:
  • CSS doesn't make pies