Ad:

ASP.NET Discussion Thread
Unsolved
Views: 8890

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Jun 28th, 2005

Style properties are ignored by Mozilla browser...

Expand Post »

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

Letscode

Reputation Points: 11

Solved Threads: 6

Junior Poster

Offline

175 posts
since Feb 2005

Permalink

Jun 28th, 2005

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

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' />

Quote ...

Any reason Y THIS IS HAPPENING???

Please post your code when asking this type of question.

senexom

Reputation Points: 11

Solved Threads: 0

Junior Poster in Training

Offline

54 posts
since Jun 2005

Permalink

Jun 28th, 2005

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

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

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

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

Letscode

Reputation Points: 11

Solved Threads: 6

Junior Poster

Offline

175 posts
since Feb 2005

Permalink

Jun 28th, 2005

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

Quote originally posted by Letscode ...

1.But how can you use CSS style sheets to handle dynamic resizing of webcontrols.More like this code..
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)

Quote originally posted by Letscode ...

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" />

senexom

Reputation Points: 11

Solved Threads: 0

Junior Poster in Training

Offline

54 posts
since Jun 2005

Permalink

Jun 28th, 2005

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

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:

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

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Jun 29th, 2005

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

Quote ...

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

Letscode

Reputation Points: 11

Solved Threads: 6

Junior Poster

Offline

175 posts
since Feb 2005

Permalink

Jun 29th, 2005

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

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.

tgreer

Team Colleague

Reputation Points: 227

Solved Threads: 37

Made Her Cry

Offline

1,697 posts
since Dec 2004

Permalink

Jun 29th, 2005

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

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

Zachery

Team Colleague

Reputation Points: 96

Solved Threads: 21

The Geek Father

Offline

781 posts
since Nov 2003

Permalink

Jun 29th, 2005

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

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

Reputation Points: 11

Solved Threads: 6

Junior Poster

Offline

175 posts
since Feb 2005

Permalink

Jul 1st, 2005

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

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.

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>

Letscode

Reputation Points: 11

Solved Threads: 6

Junior Poster

Offline

175 posts
since Feb 2005

Page 1
2
Next

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in ASP.NET Forum Timeline: Import html docs from other server

Next Thread in ASP.NET Forum Timeline: Retaining values across pages in ASP.Net

DaniWeb Message

Cancel Changes

User Name
Password