How to set div's position according to browser?

Question

4.00/5 (1 vote)

See more:

I have main div , in that i have background color .
than i have other div which have image (in png form ), in this div i have multiple divs . so from multiple divs i posted 1 div.

1) when I have used this code for div , its works fine in chrome , safari , ie and not works in firefox.:

ASP.NET

<div style="position: absolute; top:52.5em; left:10.1em;">
                  <asp:Label ID="lbl1" runat="server" CssClass="background fontStyle"></asp:Label>   
              <asp:Label ID="lbl2" runat="server" CssClass="background fontStyle"></asp:Label>
              </div>

2) when i used this code , it works only in firefox , and in other browser lables are got disturbed from their position.

ASP.NET

<div style="position: relative; top:30.8em; left:10em;">
    <asp:Label ID="lbl1" runat="server" CssClass="background fontStyle"></asp:Label>   
<asp:Label ID="lbl2" runat="server" CssClass="background fontStyle"></asp:Label>
</div>

Posted 24-Jun-14 20:13pm

Bhagyashree Chaudhari - Member 10473634

Updated 24-Jun-14 20:15pm

v3

Add a Solution

Comments

SRS(The Coder) 25-Jun-14 3:19am

You can use jQuery .CSS() method to set the position for any div you want by getting the browser details in jQuery like $.browser.

Bhagyashree Chaudhari - Member 10473634 25-Jun-14 3:54am

i have used css file,
and i want to set at same position of div for all browser.

like ,
if in chrome i have set , <div id="divEspana" style="position: absolute; left: 20em; top:64.8em;>
it will work in all browser.
r u getting me mam?if not than let me know.
thank x.

Bhagyashree Chaudhari - Member 10473634 25-Jun-14 3:58am

Or is there any way to know browser like , if i opened page in opera so , there will be different css class (class , not css file) than if i opened chrome/mozilla so different css class , to set div's position , top, left , etc.

Thank x

SRS(The Coder) 25-Jun-14 6:09am

Hi Bhagyashree,

Thanks for your response to my comment.
I think there is a confusion, actually i wanted to tell you regarding the jQuery .css() method not about css file which we use to assign styles to our page elements.

For this you have to include the jQuery file into your project and to add a reference to that file. Then using this method you can assign different classes to your div element by checking the current browser. Please have a look to the example i have posted as answer.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SRS(The Coder) · Answer 1 · 2014-06-25T00:09:00

I have added the entire sample file html code for you which you can test :-

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head  runat="server">
    <style type="text/css">
        .class1 {
            width:200px;
            height:200px;
            background-color:black;
        }
        .class2 {
            width:300px;
            height:300px;
            background-color:red;
        }
    </style>
    <title></title>
    <!-- This jQuery file is at root of my project and referenced here to use the jQuery script. -->
    <script src="jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnTest").toggle(function () {
                $("#divTest").addClass("class1");
                $("#divTest").removeClass("class2");
            }
            , function () {
                $("#divTest").addClass("class2");
                $("#divTest").removeClass("class1");
            });
        });
    </script>
</head>
<body>
    <form id="frmTest"  runat="server">
    <div id="divTest">
        <input type="button" id="btnTest" value="Test" />
    </div>
    </form>
</body>
</html>

Hope this will be of help to you.

SRS(The Coder) · Answer 2 · 2014-06-25T19:36:00

Also the above jQuery code can be done without using the toggle method of jQuery by handling the click event of the button, as mentioned below :-

JavaScript

$(function () {
  $("#btnTest").on("click",
  function () {
     if(!$("#divTest").hasClass("class1")){
          $("#divTest").addClass("class1");                        						  $("#divTest").removeClass("class2");
     }else{
          $("#divTest").addClass("class2");
          $("#divTest").removeClass("class1");
     }
  });
});

Hope this will also be of your help.

How to set div's position according to browser?

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0