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

Is the sequence of CSS styles important in styling web content?

I'm a newcomer to this field and recently encountered an issue with my div styling. My code was compatible with Chrome 11 but did not render properly in Firefox 4, Opera 11.1, and IE 8. Upon review, I found that the style for the div was as follows, a ...

csslayouthtml

Image of outer space enclosed by a circular boundary

Check out this fiddle I created here. It's a simple concept of an image inside a red circle. Is there a way to add some spacing around the image within the circle? This is the markup I currently have: <div style=" width: 50px; he ...

htmlcss

Bootstrap's ability to display panels of equal height across multiple rows is a game

Just started using Bootstrap 4 after being familiar with Foundation for years. In Foundation, equalizer was a tool to ensure divs had the same height, which would be applied to all divs within a container. I understand that Bootstrap uses Flex, but I&apos ...

csstwitter-bootstrapflexbox

What is the best way to activate a scrollbar exclusively for the final section in fullpage.js?

Is there a way to enable a scrollbar for the last section only in fullpage.js? This is what I attempted: $("#section3").fullpage({ scrollBar: true, fitToSection: false, }); Unfortunately, it didn't work as expected. ...

jqueryhtmlcssfullpage.js

Having trouble connecting local stylesheet on server?

Currently, I am developing an HTML-based game with Node.js, focusing on enhancing the front-end interface. While trying to include a CSS stylesheet, I encountered an unusual issue. The structure of my folders is organized as follows: C:\Users\m ...

htmlcssnode.js

Display a pop-up window when hovering over a table cell using HTML and JavaScript

I am currently developing a JavaScript application and came across a helpful library called qtip2. My objective is to have different information displayed when the user hovers over each cell in the table. The qtip2 library I mentioned earlier can display ...

javascripthtmlcss

What is the best way to perfectly center the navbar-nav class element in a menu using Bootstrap 5?

Currently, I am in the process of developing a backend for a novice website while also revamping the front end. My knowledge of frontend development is limited, so I have opted to utilize Bootstrap 5. One of my tasks involves transferring the menu from the ...

htmlcssbootstrap-5

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

javascriptcssvue.jsfrontendvuejs3

Is there a way for me to retrieve the header values of a table when I click on a cell?

I have a project where I am developing an application for booking rooms using Angular 2. One of the requirements is to be able to select a cell in a table and retrieve the values of the vertical and horizontal headers, such as "Room 1" and "9:00". The data ...

htmlcssangulartypescript

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...

javascripthtmlcssarrays

Tips for keeping Sub Menu visible at all times

Is there a way to keep the sub menu always visible on the homepage of my website's navigation? Thank you for your help! Check out my website here ...

htmlcsswordpress

Stacking the FontAwesome icons on a PrimeNG button

I've been experimenting with various methods to incorporate stacked icons on a pButton in Primeng, but I haven't had any success. Does anyone have a solution that doesn't result in the button being twice its normal height? Here are a couple ...

cssfont-awesomeprimeng

What could be causing my HTML elements to shift position based on varying screen sizes or zoom levels?

Does anyone else experience their HTML and CSS elements shifting around based on the screen size or zoom level? I have screenshots illustrating this issue. Here is how it currently appears And here is how it's supposed to look ...

javascripthtmlcssiframebrowser

Ensure that the user remains within the current div when they click the submit button, even if the textbox is

For the past 48 hours, I've been grappling with an issue on my HTML page that features four divs. Each div contains three input fields and a button. The problem arises when a user leaves a text box empty upon submitting - instead of staying in the sam ...

javascriptjqueryhtmlcssajax

The mobile responsive view in Chrome DevTools is displaying incorrect dimensions

Seeking some clarification on an issue I encountered: I recently created a simple webpage and attempted to make an element full width using width: 100vw. However, I observed that on screens smaller than around 300px, the element appeared smaller and not t ...

htmlcssgoogle-chrome

What is the reason for the image not being positioned in the top left corner of the html page?

My simple HTML page consists of only one image: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Anz ...

htmlcssimage

Incorporating unique typography onto your website (HTML/CSS)

I am currently struggling to implement a custom font on my website. I'm not very experienced with programming, and since my friend isn't available to help, I'd appreciate a solution from anyone. The issue I'm facing is that while the Ca ...

htmlcss

Completing the remainder of the page with CSS styling

Currently, I have three Divs positioned absolutely on the page - leftDiv, middleDiv, and rightDiv. The middleDiv has a width of 900px, which is fine. However, I need the leftDiv and rightDiv to fill the remaining space on the left and right sides, regardle ...

asp.netcsshtml

Creating a full-width navbar in Bootstrap 4 using the container-fluid

Looking for assistance with making a Bootstrap navbar fill the entire width of a container-fluid using only CSS, as I do not have access to the HTML code. It works outside the container-fluid but can someone help me achieve the same result within the con ...

csstwitter-bootstrapbootstrap-4

Trouble with card alignment in Bootstrap

I've been experimenting with creating a grid layout using cards and utilizing ng-repeat for generating the cards. Unfortunately, I'm running into an issue where there is no spacing between each card, as depicted in the image. https://i.stack.img ...

htmlcssangularjstwitter-bootstrap