Different browsers render the same code differently

Question

In this application I am displaying a message in order to tell the user to use Google Chrome browser. I have tried this with multiple browsers but the result is different. I am using the below code segment to check the browser. Its in VB.NET. How can I place the lblBrowser in a fixed place.

If Not Request.Browser.Browser.Equals("Chrome") Then
        lblBrowser.Visible = True
End If

<td class="browserAlert"> <asp:Label ID="lblBrowser" Visible="false" Font-
Bold="true" text="For best results, we recommend using Chrome to visit this
site." font-size="12px" runat="server" ForeColor="Black"></asp:Label></td>
</tr>

<style>
    .browserAlert {
        padding-left: 25% !important;
        margin-top: 1%;
        display: inline-block;
    }
</style>

Opera

Internet Explorer

Mozilla Firefox

Firefox is the only browser which positions this correctly. Message neesd to be placed below the gray colored line.

Another problem is Microsoft Edge and Safari identifies itself as Google Chrome when it comes to debugging the VB.NET Code.

Answer 1

In this case you have write different css for different browser. You can find something called CSS IE hack example *html or { _property: }

CSS IE hack