In this article, we will learn how to approach fixing browser-specific styling issues. You can approach the problem by inspecting the page and when you find a bug or an area that you want to change or modify the inspect tool will ease your work by finding the location of the element and the dimension of that element.
How would you approach fixing browser-specific styling issues?
Step 1: Your first step is to run your code into the browser and debug the code using Inspect Element Tool. Below are the shortcuts mentioned according to the device:
Shortcuts for Mac:
- Cmd + Opt + I to open the Developer Tools
- Cmd + Opt + J to open the Developer Tools and bring focus to the Console
- Cmd + Shift + C to open the Developer Tools in Inspect Element mode, or toggle Inspect Element mode if the Developer Tools are already open.
Shortcuts for Windows/Linux:
- F12, or Ctrl + Shift + I to open the Developer Tools.
- Ctrl + Shift + J to open the Developer Tools and bring focus to the Console.
- Ctrl + Shift + C to open the Developer Tools in Inspect Element mode, or toggle Inspect Element mode if the Developer Tools are already open.
Step 2: In the next step after finding the issue and the offending browser, then use a separate style sheet that only loads when that specific browser is being used.
Step 3: In the last step you can update the browser once. If you find any bugs after updating then you may read the document to see where your style is going wrong or you can also use the bootstrap libraries that already handle these styling issues for you.
Why CSS is not showing the output that we want to see?
This is because your current CSS properties are overriding the old CSS properties and in CSS terminology this concept is known as Specificity and we can also say that the new CSS is crossed out.
Approach:
- Firstly, create an HTML file with Some CSS style.
- After creating the file, and if your web page is not showing the output that you want then inspect using the above commands. Commands are different for macOS and Windows.
- When you are in inspect mode then you can find the bug by just hovering over the page.
Example1: In the below code, we will see how you can find the bug using inspect tool.
<!DOCTYPE html> <html>
<head>
<title>How to approach fixing
browser-specific styling issues?</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<container>
<div style="background-color:green;
height:200px; width:400px">
<section style="font-size:40px; color-white;
padding-top:50px;">GeeksforGeeks</section>
</div><br>
<div style="background-color:green;
height:100px; width:200px">
<section style="font-size:20px; color-white;
padding-top:30px;">GeeksforGeeks</section>
</div>
</container>
</center>
</body>
</html>
|
Output:
Explanation: When you hover over the element then it will show you the exact location and dimensions of that element.
Example2: In the below code, we will see how you can find the bug using inspect tool.
<!DOCTYPE html> <html>
<head>
<title>How to approach fixing
browser-specific styling issues?</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
</center>
</body>
</html>
|
Output:
What are the issues in HTML?
- When you didn’t add the DOCTYPE into your file.
- When you miss the character encoding.
- When you add Unsupported tags or attributes.
- When you follow the improper format of HTML.
- When you add improper tables.
- When you miss the alt text.
- When you miss the closing tags.