Using CSS styling to dictate how browsers display web content, specifically through setting font size measurements in EM

On different mobile devices and various browsers such as Internet Explorer and Mozilla, the font size in some divs does not appear consistent. Specifically, on a Samsung Galaxy S6.

I am using EM units: I know it may not be ideal but I prefer this method and feel comfortable with it.

Is there a CSS workaround or technique (without using javascript) to set different rules based on the browser?

For instance, I intend to individually adjust each div like so:

.divone
{
font-size: 20em;
}
If it's Firefox... .divone { }
If it's Internet Explorer... .divone { }

I also believe that I need to keep the initial declaration of .divone if the browser is neither Firefox nor Internet Explorer.

Does anyone have any suggestions on how to achieve this?

Thank you

csscross-browserfont-size

Answer №1

Prefer something other than javascript? How about php

fetch data with php

if(isset($_SERVER['HTTP_USER_AGENT'])){
    $agent = $_SERVER['HTTP_USER_AGENT'];
}

check & apply css based on browser

 if(strlen(strstr($agent,"Firefox")) > 0 ){      
        $browser = 'firefox';
    }
    if($browser=='firefox'){
        echo '<style type="text/css" href="firefox-font-style.css"/>';
    }

Then create a file named firefox-font-style.css and add your specific styles for Firefox only

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement horizontal content scrolling when an arrow is tapped in mobile view?

I recently created a JS Fiddle that seems to be working fine on desktop, but in mobile view, the square boxes have horizontal scrolling. Here are the CSS codes I used for this particular issue: @media only screen and (max-width: 767px) { .product-all-con ...

javascriptjquerycssscrollcss-shapes

Creating a circular shape with a radius that can be adjusted

I'm trying to create an expanding bubble-like circle of various colors when clicked on a blank page. The circle should continue increasing in size each time it is clicked, only stopping when the mouse click is released. I am looking to use HTML, CSS, ...

javascripthtmlcss

An error keeps popping up in the console saying "Module not found"

import React from 'react' import './sidebar.css' import logo from './images/' const sidebar = () => { return ( <div className='sideBar grid'> <div className='logoDiv flex&apo ...

cssnode.jsreactjsjsx

Adjusting the spacing between characters in SVG text elements

Take a look at this unique SVG: <svg xmlns="http://www.w3.org/2000/svg"> <defs> <style type="text/css"><![CDATA[ .code { font-family: monospace; white-space: pre; tab-size: 4; } ]]></style> </defs> <text class="cod ...

csssvg

In PowerShell, use the "ConvertTo-Html" commandlet to incorporate

I have a script that retrieves data from a server, converts it to HTML, and then sends the report via email. Here is a snippet of the script: $sourceFile = "log.log" $targetFile = "log.html" $file = Get-Content $sourceFile $fileLine = @() foreach ($Line i ...

htmlcssclasspowershell

What is the best way to enclose a handlebars expression within a span element while also making the span clickable?

In the button, the datePick string is a computed property that can be clicked on to trigger an event. However, clicking outside the datePick value inside the button does not trigger the event. Even after wrapping it inside a span and setting width: 100%, ...

htmlcssember.jshandlebars.js

Seeking ways to ensure my component maximizes available space using Tailwind CSS

I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow- ...

cssangulartailwind-cssangular-router

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

Having difficulty toggling a <div> element with jQuery

I am attempting to implement a button that toggles the visibility of a div containing replies to comments. My goal is to have the ability to hide and display the replies by clicking the button. The "show all replies" button should only appear if there are ...

javascriptjqueryhtmlcss

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

javascripthtmlcssajax

The dimensions of the bottom border on left floating divs are inconsistent

One of my designers frequently uses a particular technique in various designs, and I'm struggling to determine the most effective way to style it with CSS so that it fluidly adapts (as it will be incorporated into a CMS). Essentially, when implementi ...

htmlcsscss-float

Setting the position of a tooltip relative to an element using CSS/JS

I'm struggling to make something work and would appreciate your help. I have a nested list of items that includes simple hrefs as well as links that should trigger a copy-to-clipboard function and display a success message in a span element afterwards ...

javascripthtmlcss

When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback. @media (max-width: 735px) {... } @media (min-width: 735px) {... } @media (width: 320px) {... } @media (width: 360px) {... } @media (width: 375px) {... } @media (width: 414px) {... } I have tried us ...

cssmedia-queries

Adjust the width of xAxis[0] and xAxis[1] in Highcharts to their default values

Hi there, I need some help with Highcharts. Is it possible to adjust the width of xAxis[0] and xAxis[1] as well as reset the offset of xAxis[1] at runtime? I have a chart with two x-axes that need to be resized to fit different sized divs. You can see an ...

javascriptcsshighcharts

What could be causing my display: table-cell element to not take up the entire available space?

After consideration, I have decided to avoid using a JavaScript solution for my problem. The only way it seems to work consistently is by using setInterval() at regular intervals, which I prefer not to do. I am aware that achieving the same effect with CSS ...

htmlcsscss-tables

Why are all links broken and the mobile menu disappeared after installing featherbox gallery?

If you want to see for yourself, here is the link. I can't figure out why my website has suddenly lost functionality on this specific page. None of the links work, except for the home and contact (the non-expandable ones). The navigation menu seems ...

jqueryhtmlcsslightbox

IE's inconsistent float alignment causing display issues

My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlya ...

htmlcsswordpressinternet-explorer

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss

Is the Pure CSS hide/show technique using radio buttons causing a challenge with parent and descendant elements?

Exploring a CSS Show/Hide functionality using radio buttons is my current challenge. The snippet below demonstrates how smoothly it works. .refusal, .acceptance { display: none; } input#refusal:checked~.refusal { display: block; } input#acceptanc ...

htmlcsscss-selectorsshow-hide

Internet Explorer fails to account for the height of table cells when using overflow-x:auto, leading to hidden content. In contrast, Chrome adjusts for this automatically. What steps can be taken to address

Chrome: Internet Explorer: The image at the top shows how the content should appear on Chrome, while the one below demonstrates how it is displayed on IE11. The issue seems to be that on Internet Explorer, the content gets hidden and doesn't adjust ...

htmlcssinternet-explorer