ASP.NET (markup front end) CSS ISSUE

Question

I was handed this project from someone who can't finish it. It's an age verification landing page that a user hits before entering a site. It has the normal links to CSS files and script files (as per usual). But they put this line of code in that "works", but causes an issue with the spacing on the page near the top. There's an approximate 10px gap, where this first line shows up if you highlight it.

@-moz-document url-prefix()
{
    <link href="_CSS/Firefox.css" rel="stylesheet" type="text/css" />
}

If I take this code out, the page looks horrible in Firefox. I tried this (javascript to determine the browser type and assign a style sheet):

<script type="text/javascript">
    var browser = navigator.userAgent;
    if (browser == "Firefox") {
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"_CSS/Firefox.css\">");
    } else if (browser == "Microsoft Internet Explorer") {
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"_CSS/IE.css\">");
    } else {
        document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"_CSS/AgeVerify.css\">");
    }
</script>

But that doesn't seem to work. my questions are as follows: What is that first bit of code?
Why does it leave an empty space at the top of the page (and show up when you highlight that space)?
Lastly, what can I do to get rid of it and still make firefox display properly?

EDIT : Adding two screen shots:

I suppose the contents of `_CSS/Firefox.css` might be relevant? Can you create a stand-alone [JSFiddle](http://jsfiddle.net/) that demonstrates the issue? — mellamokb, Jan 24 '13 at 14:31
I don't know. Is `imgur` blocked in your network or something? I can see both screenshots just fine in your post. — mellamokb, Jan 24 '13 at 16:11
That is quite possible.... Let me check my other machine: Yep that's the problem. *sigh* — Mark Bogner, Jan 24 '13 at 16:17
What is the `@-moz-document url-prefix()` about anyway? It doesn't look like standard `CSS`, and I can't find any references to it. Was the code previously used in some other IDE environment that would have pre-processed that? **EDIT:** I did find a reference: http://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do — mellamokb, Jan 24 '13 at 16:24
Inside a stylesheet you can be browser specific with that. But, you're right, it's not really standard CSS. No, the guy who had this before me, added it, because he heard about it on the internet somewhere... go figure. Anywho, it's working now, thanks to the answer below. And thank YOU for your help with the images and stuff. You rock. — Mark Bogner, Jan 24 '13 at 17:07

N1tr0 · Accepted Answer · 2013-01-24T16:46:49.390

1

Just use this part: <link href="_CSS/Firefox.css" rel="stylesheet" type="text/css" />. This will still use the needed style sheet.

Is there a reason for the rest of it?

If it has to stay, I suppose you could move/position your entire page up x-pixels via CSS if the user is using Firefox. Not the prettiest solution but might work.

edited Jan 24 '13 at 16:46

answered Jan 24 '13 at 16:27

N1tr0

485
2
6
24

1

Here is some background on the '@-moz-document' and 'url-prefix()' pieces: http://stackoverflow.com/questions/3123063/what-does-moz-document-url-prefix-do; https://developer.mozilla.org/en-US/docs/CSS/@document. – N1tr0 Jan 24 '13 at 16:34
1

Here's another reference: http://www.webdeveloper.com/forum/showthread.php?256857-moz-document-url-prefix(). Unfortunately I haven't found why that code is selectable or how to fix it/work around it. – N1tr0 Jan 24 '13 at 16:42
N1tr0 FTW! That worked! Thanks! I have no idea why the other guy put it in there... normally, I'm usually good with everything css, but I'd bever seen something like that in the head of a page before. So, thank you N1tr0, you win at stylin' teh internetz – Mark Bogner Jan 24 '13 at 16:54
Now, there is a reason they only wanted this stylesheet to load for FF so you'll want to check your site out in the other browsers because they will now load this stylesheet too and might interfere with styles already set. – N1tr0 Jan 24 '13 at 19:30
I checked IE, Chrome and FF. They did what they were supposed to. :-) – Mark Bogner Jan 24 '13 at 22:34

ASP.NET (markup front end) CSS ISSUE

1 Answers1