Styles are not applying to elements of ASP Classic site

Question

I'm working on ASP Classic site redesign. The whole site has one major CSS file called Main that contains all styles. There aren't a lot of styles in this file, since current design is almost default. Some of the pages' elements have their styles written inline.

The task seemed for me pretty straightforward. I just changed all basic elements' styles to new design in Main.css, but my problem is that elements of some pages are not changing their style, even if I write it inline. Sometimes elements change some of theirs style properties, but overall they dont. And sometimes new styles just screw pages layout beyond my understanding.

Main.css included in those problematic pages. All of those pages have a lot of ASP code inside them, containing business logic. I'm not ASP Classic pro, so I wonder what can cause those elements do not conform to basic HTML and CSS styling?

For example (I'm from Russia, but the sample should be clear):

This is the code of one of ASP pages: enter image description here

Here is the result: enter image description here

Here is what I got from styles watcher (IE9):

Inline-styled input button: enter image description here

Main.css styled input button: enter image description here

As you can see, if I use inline styling, only the part of it applies, which is very strange. And if I apply the style with Main.css file, it only inherit from BODY tag, and doesnt react on input[type="button"] selector. On other pages this selector works just fine.

UPD1. It looks like I got rid of </link/> and </input/> strange tags in resulting page by changing <link ...></link> to <link .../> and the same for input. But it didn't resolve my problem. The page still recognize Main.css file existance and assigning the part of it (BODY tag style, for example) to my buttons, however it doesn't recognize style associated with buttons themselves.

UPD2. I found very strange thing. The Main.css file, which problematic pages recieve is not the same as original! Elements in this file lack some original attributes, for example:

Original Main.css:

INPUT.button {
    min-width: 143px;
    font-face: Arial;
    height: 34px;
    border: 1px solid grey;
    background: #FCFCFC;
    border-radius: 7px;
    box-shadow: 0 0 2px grey;
    padding-left: 10px;
    padding-right: 10px;    
}

Recieved Main.css:

INPUT.button {
    min-width: 143px;
    font-face: Arial;
    height: 34px;
    border: 1px solid grey;
    background: #FCFCFC;
    padding-left: 10px;
    padding-right: 10px;    
}

It looks like it just skips some of attributes, how is that possible??

Might be a caching issue? Try a deep reload inside the browser and make sure no proxies are inbetween server and client. — arkascha, Nov 13 '12 at 12:39
@arkascha I'm clearing cache every time I run new version of the page. — GuardianX, Nov 13 '12 at 12:41
You have two style sheets linked to the page : `/ui/styles/main.css` and `/ui/Main.css` . Do you need both in the same page ? — Flakes, Nov 14 '12 at 06:00
@Flakes yes. /ui/Main.css - this is main file containing basic styles for elements (it is the only styling file from default configuration) and /ui/styles/main.css is mine containing styles for newly created design elements (for example left menu, upper menu with logo and so on - old site didn't have those). — GuardianX, Nov 14 '12 at 08:13
check this thread too : http://stackoverflow.com/questions/8226863/ie9-standard-view-no-load-css — Flakes, Nov 14 '12 at 09:09
@Flakes thanks for response, but I see that browser successfuly get Main.css as text/css MIME type. And IIS server MIME types assigned properly. But I found very strange thing: the css file which page requests from server is not the same as original! It has the same path and name, and almost indentical content but part of that content is just skipped from original! In example border-radius is not showing in css, recieved by the page, but it exists in original one! — GuardianX, Nov 15 '12 at 12:57
[this thread](http://stackoverflow.com/questions/5381446/ie9-border-radius) says to add `` to your HTML page. Maybe that will fix it, as you are only targeting IE — Flakes, Nov 16 '12 at 06:00

score 0 · Answer 1 · answered Nov 13 '12 at 12:40

Asp will have nothing to do with the style. You'll need to look at the applied styles after it's rendered. I would recommend Chrome. If you right-click an element you can choose "Inspect element", and there is a box on the right where you can see exactly what styles are applied to an element. At that point it's just a matter of finding out where the offending style is coming from.

Most likely you have an inline style that is being rendered in an included asp page somewhere that is conflicting with your new styles. Once you use Chrome to find out which style is being injected you can go about finding where that style is defined.

Yeah I thought like this awell, but my problem is that I can't see where offending style comes from. I mean, when I open styles debugger (I use IE9, because final product will be used only by IE browser) it's like the style I'm trying to assign is not even applied to element at all. I tried using global styles, classes, id's of the element and inline, but still it behaves in debugger like I didn't assign any of my styles to it. — GuardianX, Nov 13 '12 at 12:46

score 0 · Accepted Answer · answered Nov 17 '12 at 07:07

So the problem was that some pages missed <!DOCTYPE html> tag. Also those problematic pages had the part of ASP code before <html> tag, which in turn made the whole page render wrong. To repair it, I just moved all ASP code inside <head> tag and everything works fine now.

Styles are not applying to elements of ASP Classic site

2 Answers2