Topic: Definitely a WTF situation...

I am trying to update the main component of the website I designed for my current employer. My supervisor has requested I create pages that are cross-browser compatable (some people have had trouble loading the pages or seeing images) and better for printing. I believe I can accomplish both by adjusting the CSS files.

However, when trying to test the CSS files I've encountered this problem.

The page I work on through the local fileserver (hosted on the floor above me in our office) looks radically different from the one hosted on the domain, and quite frankly, it looks a mess.

The live site looks like this:


And the local copy appears thusly:


I should note that I ensured that both CSS files (live and local) are now identical, yet the two still appear so differently. Any suggestions as to the cause?

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

whenever i run into a problem like that, i try taking the contents of the stylesheet, and directly embed them into the page. if it works, then i know its a problem with how the page is grabbing the external stylesheet, if its not the external stylesheet, then i usually smash the keyboard.

thats what looks to be your problem since there appears to be no style on the problem page

What is your local installation? It looks like the local version of the CSS is not being read properly for some reason, which could be either of the following, as far as I know - although you have probably thought of them, this is just a reminder

1) The path to your CSS file is incorrect in your local installation
2) CSS is disabled on your local machine
3) You have an invalid DOCTYPE

Hope this helps...

in which Browser ? is it different in other browsers ?

The CSS doesn't seem to be loaded at all in the 'local' version. Are you sure you didn't mess up with the path when you made the local copy.

quote:

---

Ensellitis said:

whenever i run into a problem like that, i try taking the contents of the stylesheet, and directly embed them into the page. if it works, then i know its a problem with how the page is grabbing the external stylesheet, if its not the external stylesheet, then i usually smash the keyboard.

---

Thanks, Ensellitis. No keyboard smashing here... I plunked the styles directly into the page and it appears okay (though IE does give me an ActiveX info bar initially when I load it locally). I then replaced the link to the stylesheet, and it appears fine.

I'm not going to complain, but I'm still scratching my head...

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

Me again...

quote:

---

poi said:

in which Browser ? is it different in other browsers ?

---

For some reason, I can't download Firefox directly to my machine here (corp. firewall? ISP snag? Microsoft conspiracy?), so at this point I have only tested the page on IE7 and Opera 9.02. The content on both browsers appears fine. But, I am having a slight problem with the menus.

In IE7 they appear just fine, like this:


And in Opera, the same page looks like this:


The rest of the content appears fine. The (X)HTML and CSS is identical, natch.

Also, I have two CSS's on this page: one for on-screen display, one for printing which eliminates the banner & menus as well as backgrounds & other printer-intensive elements and puts the text in a serif font for easy reading. This works fine in IE7. In Opera, the font changes but other elements remain.

Of course, I'm indebted in advance for your help, gentles. And while you're pondering this problem, I'll seek out a hammer for which to pound my keyboard...

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

might need to take a peek at the CSS itself, but I am betting that this is a case of the box model issue. Check the height of that background and see if you can set the height of the orange part and see if that makes a difference.

Later,

C:\

quote:

---

CPrompt said:

might need to take a peek at the CSS itself, but I am betting that this is a case of the box model issue. Check the height of that background and see if you can set the height of the orange part and see if that makes a difference.

---

C:\,

Thanks for the tip. Adjusting the height and colour in the CSS really helped.

One more issue before I put this to bed... the header of the page I show below shows fine in IE & Opera but seems to shift down & hide behind the images in Firefox. Identical XHTML (transitional 1.0) and CSS, of course.

IE:


Firefox:


~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

quote:

---

CPrompt said

might need to take a peek at the CSS itself, but I am betting that this is a case of the box model issue.

---

You realize it would really help us help you if you provided a link to a test page.

form the screenshots I'd it's a margin issue. But without the xhtml and the css that's impossible to tell.



(Edited by poi on 11-02-2006 19:42)

poi... good point. Sorry about that.

Ask and ye shall receive!

http://users.zoominternet.net/~gilrandur/test/index.html

Also, the troubles referred to above can (in part) be seen here:

http://users.zoominternet.net/~gilrandur/test2/index.html

Looks like Opera and Firefox still won't show the menus properly... is it a JavaScript issue, perhaps?

EDIT: Added the second site and removed the previous images.

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein


(Edited by Gothmatum on 11-02-2006 21:20)

(Edited by Gothmatum on 11-02-2006 21:41)

Okay... it's been a week...

*listening to crickets*

Anybody got any additional thoughts on the issues with these pages?

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein