Same CSS applies differently to two pages

They have: 4 posts

Joined: Jan 2009

Hello TWF.

I hate joining a forum and blurting out with my first question within 5 min. but this is driving me nuts.

The issue we have is with a VERY simple site, that's IT use only, within the corporate intranet. Since it's only for IT we aren't letting our web developers code due to sensitive data. Which means I also can't link to the pages, sorry.

There are two pages (default.htm and subversion.htm) that both pull the same syle sheet (main.css) as an external <link rel="stylesheet" type="text/css" href="styles/main.css"/> They are both supposed to center in the browser window using a <div id=#wrap>.

The subversion.htm displays fine in IE 6.0 / IE 7.0 and Firefox but my default.htm only works correctly in Firefox.

Now the kicker, default.htm is the older of the two pages and has been through numerous revisions (and css revisions) in the last couple of weeks, using M$ VSWeb. The subversion.htm is an identical copy/paste of the default.htm page with different text in the <body></body> only.

One last thing, this all runs on an M$IIS 6.0 with .net 3.5 on Win2K3.

skrehlik
"never, ever, EVER question the Net Admin"
unless I'm writing a web page...

greg's picture

He has: 1,581 posts

Joined: Nov 2005

Welcome to TWF Smiling

skrehlik wrote:
I hate joining a forum and blurting out with my first question within 5 min.
No one here minds, even if you get help with this and don't become a regular, keep us bookmarked as you never know Wink

I'm going to point out some stuff that is plainly obvious, but without links/code etc it's hard to narrow it down (as you will obviously understand)

It looks likely to be default.htm, but of course don't just presume that!

Check through all the code carefully in default.htm for the CSS classes, ID's, any other layouts that could be misspelled, incorrectly coded, missing or part missing tags or end tags < or > or " etc.

A good editor will list layout colours (notepad++ for one), and when something is not right (a missing end tag etc) the colours are not as they should be, which makes it easy to spot these issues (you may already use one)

Checking with the W3C validator can often point to the cause of these sorts of issues, although you wont be able to link directly to it, does the file itself actually contain sensitive data? If it only links to it and contains none, then host the file away from your intranet so no links will reveal data and check it with W3C (I can imagine this may not be viable though)

CSS is case sensitive id="something" is different to id="SomETHing"
Often a capitalised letter in the CSS stylesheet or the HTM file happens accidentally.

Check both files are correctly pointing to the same CSS file, both files not just default.htm, as daft as it sounds, perhaps the file that IS working is actually at "fault" and is linking to an old/backup etc CSS file that did centre correctly.
(these things do happen)

Perhaps the subversion.htm has "broken" code in it - missing tag, incorrect CSS id or class etc - that allows it to center.
Sounds daft, but maybe the CSS needs correcting, has something that stops the page centering correctly (you know, those pesky margins, floats etc) and where default.htm code is fine, it includes the CSS issue because of that.
Whereas the issue in subversion.htm, this no longer impedes the center problem, such as a class or id not being called correctly, and therefore allows it to center.
(unlikely I know)

Other than all that, carefully checking every CSS style in the htm file, checking the link to the CSS stylesheet in both files, there is nothing else I can think of

They have: 39 posts

Joined: Jan 2009

Excellent advice from Greg. I also would say to make sure you haven't accidentially added some additional classes to either page - in Expression (which is what we use) it's easy enough to do as every time you make a WYSIWYG change a new class appears in the code at the top of the page. You then have two competing CSS styles.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

What kind of problems is the default.htm having in the other browsers? Is it just not centered like it's supposed to be?

I would run the validator first and fix any errors. While you're at it, double check to make sure the doctypes match on the two pages. Also check to see if VSWeb (not sure what that is??) has inserted any other tags around the doctype that are different from the subversion page.

You could also use the IE developer tool to see what the CSS values are for the #wrap div and see if there are any differences. Make sure haslayout is checked (I think it shows up as -1 in the developer toolbar).

They have: 4 posts

Joined: Jan 2009

Thank you everyone.

Upon side by side comparison I realized my DOCTYPE was just off by a hair on the default.htm. Since VS Web creates that with every page I must have completely skipped it in the copy/paste to subversion.htm thus explaining why it worked and the default no longer did. IE was just picking up on it and Firefox was being a bit more "forgiving".

Thanks again

skrehlik
"never, ever, EVER question the Net Admin"
unless I'm writing a web page...

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.