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 that demonstrates the issue? — mellamokb
– mellamokb, Commented Jan 24, 2013 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
– mellamokb, Commented Jan 24, 2013 at 16:11
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: stackoverflow.com/questions/3123063/… — mellamokb
– mellamokb, Commented Jan 24, 2013 at 16:24

N1tr0 · Accepted Answer · 2013-01-24 16:46:49Z

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, 2013 at 16:46

answered Jan 24, 2013 at 16:27

N1tr0

4852 gold badges6 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

N1tr0 Over a year ago

Here is some background on the '@-moz-document' and 'url-prefix()' pieces: stackoverflow.com/questions/3123063/…; developer.mozilla.org/en-US/docs/CSS/@document.

N1tr0 Over a year ago

Here's another reference: webdeveloper.com/forum/…. Unfortunately I haven't found why that code is selectable or how to fix it/work around it.

Mark Bogner Over a year ago

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

N1tr0 Over a year ago

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.

Mark Bogner Over a year ago

I checked IE, Chrome and FF. They did what they were supposed to. :-)

Collectives™ on Stack Overflow

ASP.NET (markup front end) CSS ISSUE

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related