ASP.NET

ASP.NET RSS

Style properties are ignored by Mozilla browser...

Please support our ASP.NET advertiser: Intel Parallel Studio Home

•

Join Date: Feb 2005

Posts: 175

Reputation: Letscode is an unknown quantity at this point

Solved Threads: 6

Letscode

Offline

Junior Poster

Style properties are ignored by Mozilla browser...

Jun 28th, 2005

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

Save White Tiger

•

Join Date: Jun 2005

Posts: 54

Reputation: senexom is an unknown quantity at this point

Solved Threads: 0

senexom

Offline

Junior Poster in Training

Re: Style properties are ignored by Mozilla browser...

Jun 28th, 2005

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.

•

Join Date: Feb 2005

Posts: 175

Reputation: Letscode is an unknown quantity at this point

Solved Threads: 6

Letscode

Offline

Junior Poster

Re: Style properties are ignored by Mozilla browser...

Jun 28th, 2005

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

 Help with Code Tags 
 ASP.NET Syntax (Toggle Plain Text) 
            '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")
            '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..

 Help with Code Tags 
 ASP.NET Syntax (Toggle Plain Text) 
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 48px" runat="server"
				Text="Button" BackColor="#C0C0FF"></asp:Button>
<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..

Save White Tiger

•

Join Date: Jun 2005

Posts: 54

Reputation: senexom is an unknown quantity at this point

Solved Threads: 0

senexom

Offline

Junior Poster in Training

Re: Style properties are ignored by Mozilla browser...

Jun 28th, 2005

•

Originally Posted by Letscode

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

ASP.NET Syntax (Toggle Plain Text)
            '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")
'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)

•

Originally Posted by Letscode

Help with Code Tags

ASP.NET Syntax (Toggle Plain Text)
<asp:Button id="Button1" style="Z-INDEX: 103; LEFT: 8px; POSITION: absolute; TOP: 48px" runat="server"
				Text="Button" BackColor="#C0C0FF"></asp:Button>
<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" />

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Style properties are ignored by Mozilla browser...

Jun 28th, 2005

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:

 Help with Code Tags 
 ASP.NET Syntax (Toggle Plain Text) 
myControl.Attributes.Add("class","myCssClass");
myControl.Attributes.Add("class","myCssClass");

•

Join Date: Feb 2005

Posts: 175

Reputation: Letscode is an unknown quantity at this point

Solved Threads: 6

Letscode

Offline

Junior Poster

Re: Style properties are ignored by Mozilla browser...

Jun 29th, 2005

•

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...

Save White Tiger

•

Join Date: Dec 2004

Posts: 1,655

Reputation: tgreer is an unknown quantity at this point

Solved Threads: 35

tgreer

Offline

Made Her Cry

Re: Style properties are ignored by Mozilla browser...

Jun 29th, 2005

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.

•

Join Date: Nov 2003

Posts: 781

Reputation: Zachery has a spectacular aura about

Solved Threads: 21

Zachery

Offline

The Geek Father

Re: Style properties are ignored by Mozilla browser...

Jun 29th, 2005

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...

Firefox: no, its not the end all solution, it has its own issues and in time it will be just as insecure as IE, when its hit Firefox 6, if it makes it that far. Oh, and AOL pays for it, incase you didn't know.

Microsoft & Windows: If you hate it so much, move to linux, or bsd, or anything else, stop complaning and move on.
Good starting places: Gentoo Novell SUSE Fedora Core Apple

•

Join Date: Feb 2005

Posts: 175

Reputation: Letscode is an unknown quantity at this point

Solved Threads: 6

Letscode

Offline

Junior Poster

Re: Style properties are ignored by Mozilla browser...

Jun 29th, 2005

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..

Save White Tiger

•

Join Date: Feb 2005

Posts: 175

Reputation: Letscode is an unknown quantity at this point

Solved Threads: 6

Letscode

Offline

Junior Poster

Re: Style properties are ignored by Mozilla browser...

#10

Jul 1st, 2005

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.

 Help with Code Tags 
 ASP.NET Syntax (Toggle Plain Text) 
<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>
<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>