Css Style Sheet Not Working

[webgyrl]

Just wondering if you guys could check out this new layout I am working on.

 

I used TopStyle Pro to create a simple style sheet and applied it using Dreamweaver 4 to the new layout I am working on. For some reason it's not working and it throws the whole design off.

 

Also... a strange issue I am having with IE6. Some of my images are not showing up. I've checked on other systems and the images show up fine. But when I use IE6 on my machine some graphics and PHP code don't show up at all. I checked with Mozilla and Navigator and they work fine.

 

Should I uninstall IE6 and try re-installing it? Strange problem.

 

The link to the layout I am working on is:

http://www.indiemanagers.com/new_site/layout.htm

 

The CSS is not working in any browser.

 

Not sure why that is.

 

Thanks,

 

Nat

[kaseytraeger]

Hi Nat,

 

Good to hear from you again!

 

OK, I'm looking at your site in Firefox (mozilla-based), and it looks good to me. I'm attaching a screenshot so you can see it as I see it. Is this not how it's showing up for you?

 

Also, I looked at it in IE6, but the only difference I see is that IE is not displaying the header image. I'll attach a screenshot of that one under a separate post.

 

Please let me know if my screenshots accurately reflect what you're seeing. If that's so, then I'm not sure what needs to be fixed with the FireFox rendition. It's clear that IE needs to grab the image, but that may be a minor issue.

[kaseytraeger]

Here's how it looks to me in IE6...

[kaseytraeger]

Nat,

 

Here's something I see that may be causing problems in IE...

 

><table width="800" border="0" cellspacing="0" cellpadding="0" bordercolor="#cc9999" align="center" height="631">
 <tr bgcolor="#663333" valign="bottom" align="center" background="../images/background/ima_top.jpg"> 
   <td height="160" colspan="3">

 

I notice that you've got your header image (ima_top.jpg) set as the background for a table row. I've had several occasions in the past where styling the background for a row didn't work for me. You can try moving it down to the column and it should display properly in IE.

 

><table width="800" border="0" cellspacing="0" cellpadding="0" bordercolor="#cc9999" align="center" height="631">
 <tr bgcolor="#663333" valign="bottom" align="center"> 
   <td height="160" colspan="3" background="../images/background/ima_top.jpg">

 

I just tried it and got the results seen in the attached screenshot.

[webgyrl]

Kasey,

 

Good to see ya!

 

Ok... moving that background code down to the column section worked, but now the scanlines aren't meeting up (when I view in IE6). I may have to recut the layout. I'm not sure what the best way is for all the lines to meet up.

http://www.indiemanagers.com/new_site/layout.htm

 

The strange thing is that this image problem has been happening to me a lot lately on various websites. I know the images are there in the code, they are just not displaying in the browser window.

For example:

http://www.natalie-brown.com/community.htm

There are two single covers (images) there that do not show up. If you scroll to where it says "Click Image To Download The MP3".. there are 250X250 images there that aren't showing up for me. Can you see them?

 

Also on:

http://www.natalie-brown.com/links.htm

There are supposed to be a bunch of banners there and the only one that shows up is the Psychadelic Sheep one. They are there in the code, but not showing in the browser.

 

Also:

http://music.download.com/nataliebrown/360...-100046807.html

My image doesn't show up. Actually, on that site, none of the larger artist images show for me. This one doesn't work in any browser I've tried. I sent Download.com a trouble ticket, but so far no answer. Can you see the image?

 

What do you think the problem could be on my end? These images DO show when I check them on my roomates IE6 Windows XP machine. I have tried checking them on my machine using Mozilla 1.4, Mozilla Firefox, Opera 7, Netscape Navigator 7.1 and IE 6 and they do not show. All the other images show for me tho. I have no idea why this is happening.

 

I can't for the life of me figure out why this just started happening. It sometimes goes away, but generally happens for weeks at a time. I first noticed it about 3 months ago. I'm using Windows 98 SE with IE 6 as the default browser. I always delete cache, temp files, browser history, cookies etc. Nothing works.

 

Now for the other problem. I designed a CSS Style sheet in Top Style Pro 3 and tried to attach it to the layout using Dreamweaver 4. It doesn't show up in the CSS inspector as 'attached', but when I view the code, it is there.

 

<link rel="stylesheet" href="styles/imacss.css" type="text/css">

I made the stylesheet relative to the document. Should I have made it relative to the root?

 

It's not working on any of the browsers.

 

I'm confused!

 

Thanks,

Nat

[kaseytraeger]

As for the missing images ... every page I looked at in both IE6 and Firefox0.8 showed all the images. None were missing. I would tend to say that it sounds like you've got images suppressed, but since you are seeing the same problem in every browser, that's really quite odd. Perhaps you have some cPanel protection mechanisms on the images in your web space? Are all these images in the same folder? If so, there may be a folder setting. However, now that I think about it, that's probably not the problem either since I can see all the images just as clear as day. It definitely sounds like something in your computer. I wish I could say exactly what.

 

Are you running a Windows machine? If so, you might try clearing your cache the way I do ... using File Explorer. I've noticed that I can clear cache using the Tools >> Internet Options in IE but still have files showing up in my Temporary Internet Files directory when I use File Explorer.

 

Another thing to do is check your system for viruses. You may have one that's caused your computer to bork on images. Again, that comes with a caveat. If you're only having difficulting loading images on your web site, then you probably don't have a virus.

 

As to scan lines not lining up ... did you modify your source code since the last time I posted? When I look at the current site in IE or Firefox and compare it to my screenshots, the scanlines look different. They line up just fine, but the lines themselves seem smaller, and they don't alternate in the IMA header like they used to.

[kaseytraeger]

Oops, I forgot to add about the stylesheet. If I've got a problem with stylesheets loading, I typically reference an absolute URL to help me debug. I would definitely try it if I were you. Sometimes when I do this I discover that I'm trying to reference the wrong directory. This allows me to catch my error.

[webgyrl]

As for the missing images ... every page I looked at in both IE6 and Firefox0.8 showed all the images. None were missing. I would tend to say that it sounds like you've got images suppressed, but since you are seeing the same problem in every browser, that's really quite odd. Perhaps you have some cPanel protection mechanisms on the images in your web space? Are all these images in the same folder? If so, there may be a folder setting. However, now that I think about it, that's probably not the problem either since I can see all the images just as clear as day. It definitely sounds like something in your computer. I wish I could say exactly what.

I've got nothing protecting images at all in cPanel.

 

Are you running a Windows machine? If so, you might try clearing your cache the way I do ... using File Explorer. I've noticed that I can clear cache using the Tools >> Internet Options in IE but still have files showing up in my Temporary Internet Files directory when I use File Explorer.

Yup.. Win 98SE... What directory should I go to in File Explorer to delete the Temp Internet files. I also use McAfee Clean Sweep to delete Temp files. It is so strange.

 

Another thing to do is check your system for viruses. You may have one that's caused your computer to bork on images. Again, that comes with a caveat. If you're only having difficulting loading images on your web site, then you probably don't have a virus.

Just ran both an AVG and Norton Anti-Virus Sweep the other day and all was clean.

 

Could it be my video card is dying? I just have no clue. It only happens to certian images. Oh well, as long as I know they're there. This system I am using is getting really bad. Can't wait to get a new computer!

 

As to scan lines not lining up ... did you modify your source code since the last time I posted? When I look at the current site in IE or Firefox and compare it to my screenshots, the scanlines look different. They line up just fine, but the lines themselves seem smaller, and they don't alternate in the IMA header like they used to.

I have been adjusting the layout. The canlines are the same. No change there. I do notice that they look different at different image resolutions tho. The lines are 1px alternating lines.

 

I will try what you suggested with the style sheet.

 

Thanks a million Kasey!

 

Nat

[webgyrl]

Hmmmm... the CSS is still not working.

 

I even tried selecting the text I want the CSS applied to and then in the CSS Properties Box selectiong the arrow "Apply Style Sheet". Doesn't work.

http://www.indiemanagers.com/new_site/layout.htm

 

The CSS code looks like this in Top Style Pro 3:

h1, h2, h3, h4, h5, h6 {

color: #cc9999;

}

BODY {

color: White;

font-family: Arial, Sans, Times, serif;

font-size: x-small;

text-align: left;

}

 

A {

color: Black;

}

 

A:HOVER {

color: #969696;

text-decoration: none;

}

 

Ha Ha.... I think I've bitten off more than I can chew with this re-design. woooot

 

Nat

[webgyrl]

Oh and when I delete temp files... I also do FIND FILES > *.tmp > and then I manually delete all that I find.

 

Is there a better way?

 

Can I safeley delete all the contents of C:\WINDOWS\TEMP ?

 

Thanks,

Nat

[webgyrl]

k- so I tried deleting the Top Style Sheet I designed and I defined one from within Dreamweavers CSS properties box. That seems to work in Netscape, but IE is still not working.

 

Geez.... this is some strange stuff!

 

EDIT:

OK so it seems now that the style sheet I created in DW is working. Tho, it's not exactly what I wanted. Any ideas why the Top Style Pro 3 one wouldn't work?

[webgyrl]

One thing I've noticed in IE and Navigator is that if you set the Text Size to Larger or Largest (or zoom as in Netscape's case), it throws the whole design off. See IE 6 > VIEW > Text Size. If the text size is on Medium or the smaller ones, it's fine.

 

I'm wondering if this sliced layout type approach is just not cross-browser friendly? Perhaps I should just use a stroked table and not mess with anything fancy. This design needs to be as friendly as possible, and so far it's not proving to be that way.

 

The reason I went with this sliced JPG as background method is because I wanted the RIGHT and LEFT Border frames to extend as text was added. If I had just done a regular export from Fireworks to DW, then the two side borders would stay at a static height, and I need there to be a lot of space for text on some pages, and little space for others.

 

Is there a better way to tackle this design idea?

 

Any suggestions?

 

Thanks,

Nat

[kaseytraeger]

Sorry 'bout the delay, Nat. I got terribly busy at work yesterday and was pulled off my computer for the rest of the day. By the time I got home, I had to fix dinner and was so pooped I fell asleep almost immediately.

 

Anyway, let me see if I can address some of your questions:

 

(1) Clearing cache: I wouldn't delete *everything* from your temp folder. I usually do delete most all .tmp files because apps I run on my computer will recreate the files as needed. For other files and folders, I really try to look at what's in each folder and the contents of each file before I decide to delete it. Once I've done this for a few days, I have an idea of which files are regenerated and which stay put.

 

I run WinXP on both my work and home computers. It's been about 5 years since I've run Win98, but if memory serves, you're looking for the "Local Settings" file. It's probably somewhere under

c:/WINDOWS32/,

c:/WINDOWS32/system/ or somewhere in the near vicinity.

 

On my Windows XP machine, my files are located in

c:/Documents and Settings/kasey/Cookies/

c:/Documents and Settings/kasey/Local Settings/Temporary Internet Files/

c:/Documents and Settings/kasey/Local Settings/History/

c:/Documents and Settings/kasey/Local Settings/Temp/

 

(2) Concerning the differences between Top Style 3 and DW style sheets: I'm not familiar with the Top Style 3 program, so I can't tell you what's going on there. Can you tell me a bit about how you use the program? Also, have you checked both of the style sheets to make sure they are EXACTLY identical? Sometimes there can be a small error in the stylesheet that IE will process correctly but NS or Mozilla won't because IE doesn't adhere to the stricter standards that NS and Mozilla do. That could explain why the style sheet works in IE but not NS.

 

(3) Re Resizing Text: I just tried it in firefox, and the big problem I see is the bottom of your "visual frame" (the pink one that contains your content) starts screwing up.

 

 

 

It looks like I spoke too soon. I thought I would have time today to look at your source and give you some more insight, but one of my pesky co-workers (who always pulls me away to do some stupid task for him) is frantically waiting for me to finish this message so we can go track down some 30 year old cables. I wish I had more time. If I'm able to pull away at some time today, I'll try diving into your source and see if I can't fix your problem. "Slicing" your design using CSS divs (if that's what you were referring to when you said "slice") is, IMO, a much better approach than tables, but I really need to take a look at your source before seeing where the problem lies.

 

Sorry to type and run...

[webgyrl]

Kasey,

 

No worries at all. I am just thankful for your help!

 

Ok... so I did a bunch of tweaking today and decided to slice the layout differently. The very top of the logo still doesn't meet up ecactly with the layout background scan lines, but to me it's passable.

http://www.indiemanagers.com/new_site/layout.htm

 

How does it look to you?

 

So far, the only real buggy thing starts to happen when you zoom the text to 200+ Percent, but that is only affecting the bottom slice. I decided to slice the sides very wide... in fact I did the slice all the way accross the design and then added in another table for the text and that seems to work very well.

 

I changed the CSS Text declaration to 10 pixels instead of "x-small" as I read somewhere that it's better to do that.

 

As far as Top Style goes, it basically leads you through a wizard for a basic sheet and then you can go thru a list and add other declarations in and specify sizes, colors etc. It helps you do the code, then you save the style sheet and you are supposed to just be able to save it to your styles directory and then attach it to whatever page you want it on etc. It's a great program, not quite sure why it's not working for me. I just got it, so I am still learning.

 

I thought to make a style sheet global you just had to add to the HEAD the link to the style sheet?

<link rel="stylesheet" href="styles/ima.css" type="text/css">

For some reason this isn't working like I thought it would, esp. in IE6.

That font just doesn't look right to me. It's supposed to be 10 pixels and Arial, Helvetica, sans-serif. It's the right font, but not the right size- to me anyway. Not sure if it has something to do with my browser settings.

 

Thanks for the pointers on the TEMP folder. I will go thru it. I was under the impression that Clean Sweep was supposed to clean all this junk out... guess not! LOL

 

Hope you're recovering from your work stuff. I really appreciate your help on this. I have so much to learn and TCH and the people here have helped me so much in my learning process.

 

Thanks,

Nat

[Boojum]

Whether to use absolute font-size declarations (10 px) or relative ones (x-small) is a vexed question.

 

There are those who argue that absolute declarations, by depriving the visitor of control of his/her display, make your site less accessible and can drive away people whom the declarations do not suit.

 

On the other hand, my feeling is: Why bother using a style sheet if you're not going to take real control of attributes? After all, that kind of fine-tuning seems to me to be the raison d'etre for CSS.

 

I think you are right to have chosen the absolute option if you want real control over the look of your pages. Set it relative, and you have no idea how it will look to someone with exotic browser settings.

 

That said, one caveat: I know next to nothing about CSS, so I could well be misguided.