Style properties are ignored by Mozilla browser...

[Letscode]

PURPOSE
I'm trying to adjust the styles of buttons,textbox ....(More like height,width,text size) so that it looks good for each and every resolution,window size..

ISSUE
Whenever I change the attributes like background and size,While using Internet Explorer its working fine but in Mozilla its not working at all :rolleyes: For some reason all the styles for the webcontrol are ignored by the Mozilla browser.

Any reason Y THIS IS HAPPENING???

Thanks

[senexom]

I suggest NOT using .NET to style your form elements, but rather and external style sheet.

... using ids or classes to style your form elements. Firefox (I asume this is the Mozzila version your developing for) is much more capable when it comes to css if done according to standards.

like so....
-----
/* CSS */
.mybutton { color:red; background-url(/someImage.gif) }
-----

<input type='submit' id='button1' name='button1' class='mybutton' runat='server' />
or
<asp:button id='button1' runat='server' cssclass='mybutton' />

Any reason Y THIS IS HAPPENING???

Please post your code when asking this type of question.

[Letscode]

1.But how can you use CSS style sheets to handle dynamic resizing of webcontrols.More like this code..

'Button Layer Adjustments
            'Position : WIDTH AND HEIGHT

            Dim Slayer1 As Integer = CInt(Session("widthforbuttons")) * 0.23
            Dim Slayer2 As String = Slayer1.ToString
            Dim Slayer3 As String
            Slayer3 = String.Concat(Slayer2, "px")
            BtnBlayer.Style.Add("WIDTH", Slayer3)

            Dim Slayer4 As Integer = CInt(Session("widthforbuttons")) * 0.1
            Dim Slayer5 As String = Slayer4.ToString
            Dim Slayer6 As String
            Slayer6 = String.Concat(Slayer5, "px")
            BtnBlayer.Style.Add("HEIGHT", Slayer6)

            BtnBlayer.Style.Add("TOP", "0px")

2.This is a simple button...and when declared as an INPUT its working in both Mozilla Firefox..But when declared as a server control..its aint working in Mozilla..

<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 48px" runat="server"
				Text="Button" BackColor="#C0C0FF"></asp:Button>

When I view this button in MSIE ..its colored but when I view this button in Mozilla, its not colored rather the button goes back to its default view..

[senexom]

1.But how can you use CSS style sheets to handle dynamic resizing of webcontrols.More like this code..

'Button Layer Adjustments
            'Position : WIDTH AND HEIGHT

            Dim Slayer1 As Integer = CInt(Session("widthforbuttons")) * 0.23
            Dim Slayer2 As String = Slayer1.ToString
            Dim Slayer3 As String
            Slayer3 = String.Concat(Slayer2, "px")
            BtnBlayer.Style.Add("WIDTH", Slayer3)

            Dim Slayer4 As Integer = CInt(Session("widthforbuttons")) * 0.1
            Dim Slayer5 As String = Slayer4.ToString
            Dim Slayer6 As String
            Slayer6 = String.Concat(Slayer5, "px")
            BtnBlayer.Style.Add("HEIGHT", Slayer6)

            BtnBlayer.Style.Add("TOP", "0px")

When I say that I suggest not using CSS in .NET, it means that use only when you have to, like dynamically resizing panels, etc. Does the above code not produce proper results in Firefox? Not to put you down, plus I don't know how your layout is done, but it's best practice to make your layout independent of your code, leaving it unaffected to code changes. CSS is extremely capable of stretching and wrapping and on a page in those dynamic conditions. (I'm no CSS guru, but have done some very dynamic layouts with it)

<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 48px" runat="server"
				Text="Button" BackColor="#C0C0FF"></asp:Button>

Again avoid using style in .NET your code would look much cleaner and easier to maintain, your button will look nice if you use proper css. In your example get rid of BackColor property and define it in style tag...

<asp:button id="Button1" style="background:#C0C0FF; Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 48px" runat="server" text="Button" />

[tgreer]

You can use CSS with .NET. However, .NET will PRODUCE CSS for IE, not cross-browser CSS.

That's why it's best to code your OWN CSS, and then add class defiinitions via the Add() method of the Attributes collection of the particular server control.

In others words, "styles" are yet one more area where ASP.NET has screwed things up royally.

Always use "flow layout", always create your own internal or external stylesheet, and assign classes to server controls:

myControl.Attributes.Add("class","myCssClass");

[Letscode]

Does the above code not produce proper results in Firefox?

Yes..The VB code is working in Firefox.I just displayed the code just to know whether anything similar can be achieved using CSS style sheets..

1.For some reason when you change the Background or Height or Width of a webcontrol in the designer,Its not affecting in Mozilla Browser BUT when the same change is done on the styles in HTML view ,IT WORKS FINE IN BOTH MOZILLA FIREFOX AND INTERNET EXPLORER.

2.Similarly ...In the code behind,
Button1.Attributes.Add("Backcolor", "#00C0C0") is not working
BUT
Button1.Style.Add("Background", "#00C0C0") is working fine in both the browsers..

Thanks for you help..

QUESTIONS

1.I'm now learning how to create CSS stylesheets and I'm planning to load a style sheet for each screen resolution.If you know any other way of doing it ,tell me.My application demands me to resize the controls for each resolution.

2.I know this is a long shot but its worth asking..Can you assign variables inside CSS stylesheets?

3.Whats the difference between using Flow layout and Grid layout.I read many articles that tells the reader to use Flow layout...

[tgreer]

If you're going to add styles "piecemeal", then yes, you have to use the Styles.Add method. My suggestion was to make complete CSS class definitions, then assign an entire "class" to your control.

No, you cannot have variables in CSS.

"Grid Layout" simply means "CSS absolute positioning". It's another case of Microsoft giving their own term for something that already existed, to presumably obscure the fact that they didn't invent it.

If you absolutely position everything, then when the user resizes their browser, nothing "moves". Most users expects things to "fit" their browser. Flow layout (CSS relative positioning", allows for elements to flow, within constraints, to fit the size of the browser.

[Zachery]

I would think the best way to get the job done would be to do a browser check and feed the correct snipet of CSS :) but thats me...

[Letscode]

Yes..I'm planning to do something like that..
Create a complete CSS stylesheet definitions for each screen resolution and when the page loads i'm planning to check for the screen resolution and feed a particular CSS style sheet for that resolution..

[Letscode]

I just found out Y the properties are not working in Mozilla.
ASP.NET 1.1 doesn't recognize FireFox, the built-in WebControls will render down-level html.The <div/> tag will be replaced by a single-cell table, and a host of other changes which will distort the layout of the page..

SOLVING THE ISSUE
ASP.NET 1.1 can easily be told of the capabilities of other browsers through the web.config file. You can customize the regular expression used to evaluate the User Agent string.

If you want ASP.NET to support Firefox just paste this code within the <system.web/> node in the Webconfig file.

<browserCaps>
            <case match="^Mozilla/5\.0 \([^)]*\) (Gecko/[-\d]+)(?'VendorProductToken' (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)))?">
                browser=Gecko
                <filter>
                    <case match="(Gecko/[-\d]+)(?'VendorProductToken' (?'type'[^/\d]*)([\d]*)/(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*)))">
                        type=${type}
                    </case>
                    <case> <!-- plain Mozilla if no VendorProductToken found -->
                        type=Mozilla
                    </case>
                </filter>
                frames=true
                tables=true
                cookies=true
                javascript=true
                javaapplets=true
                ecmascriptversion=1.5
                w3cdomversion=1.0
                css1=true
                css2=true
                xml=true
                tagwriter=System.Web.UI.HtmlTextWriter
                <case match="rv:(?'version'(?'major'\d+)(?'minor'\.\d+)(?'letters'\w*))">
                    version=${version}
                    majorversion=0${major}
                    minorversion=0${minor}
                    <case match="^b" with="${letters}">
                        beta=true
                    </case>
                </case>
            </case>
        </browserCaps>

[tgreer]

Yes, ASP.NET is a dual-edged sword when it comes to browser capabilities. Your solution is the right one. However...

<rant>
A professional web developer knows about cross-browser issues, and doesn't need a runtime dll on the web server to try to FIX THINGS FOR HIM (or HER)!

I prefer to write strict XHTML. I prefer to have external style sheets. If I want a DIV, I'll use a DIV. If I want a TABLE, I'll write a TABLE. What I don't need is a mysterious "panel" control that will render a div or a table based on it's own misunderstandings of what browsers are capable of what.

That being said, when I do ASP.NET development, I use the bare minimum of ASP.NET Web Server controls. If I want a DIV, I use a pure HTML DIV.
</rant>