Skip to main content

Hr (horizontal line) style in FireFox vs IE vs Chrome - Simplest Simple feature doesn't work same - Hope you can save some time.


ISSUE:
I wasted few minutes figuring out World's simplest simple issue 'drawing a single line' with 1pixel width and a color in html that looks same in at least 3 browsers ( Firefox, IE, Chrome )

I just want to do a simple  code like,

 <hr style="color:#ff6a00; " 
- Firefox: Shows the line with given color but with a border. (Thats good. 4 Stars for Firefox team)
- IE: Shows line with default 'gray' with default width
- Chrome: Shows line with default 'gray' with default width
 

(depending on the browser you are looking - the above line will show as mentioned above)

<hr style="color:#ff6a00;  height: 1px; border: 0; width: 100%; " > 
 

All 3 Browsers: No Show - No line
Even if you try increasing border and height, 
<hr style="color:#ff6a00;  height: 10px; border: 3px; width: 100%; " >
it will not show the line.

FIX: 

You have to use the background-color: #ff6a00; attribute to draw the line!
 <hr style="color:#ff6a00;  background-color: #ff6a00; height: 1px; border: 0; width: 100%; " > 



I have no idea why this has to be this way for a simplest simple horizontal line in html. Imagine how many hours of designers and developers wasted unproductively if you just have to make a simple line work like the same in all the 3 browsers. Good lesson for designers as well as for the companies to see how simple things will drag your productivity.


Comments

Popular posts from this blog

LLM on Mobile Phone : Mini Universal data and assistant running on an android smart phone Galaxy S23

  Imagine a world where everyone has access to a mini #OpenAI's #ChatGPT on their mobile phone, answering any question on any topic, right from their local phone memory. No need for internet. This is the future of #LLMs on mobile devices, and it's happening now. #MLC-AI has created a way to install a 3 billion parameter #RedPajam #LLMModel on a #Galaxy #S23 smartphone. This is a powerful #LLM that can generate text, translate languages, write different kinds of creative content, and answer your questions in an informative way. And it's all available on your phone, without the need for an internet connection. This could have a profound impact on people all over the world. Millions of suburban students who don't have access to the internet could now have access to a universal data source that can answer most of their questions. Refugee camps around the world could also benefit from this technology, giving refugees access to information and resources that they might not ot...

Will Software engineer salary hit $1 million by year 2030

Are today’s Developers over loaded with too many tasks?! In 90s and till late 2000s there were many different job positions in an IT team that only do certain task. There was no Frontend engineers and backend engineers as most of the applications were thin clients in the browser side as the internet band width was very slow. There were jobs like Database Admins, Server Admins, Site Admins and so on to deal with one specific task.   Ever since the Startup culture took off again after the dotcom boom in the mid 2000s , in many cases the founder(s) had to do all tasks. Every single thing involved in the complete SDLC are done by one or two founders and hence there is more in their plate to get funding , business development etc.   And as the World internet infrastructure moved from dialup to DSL to Broadband, the browser apps became THICK CLIENTS. The corporate companies now started adopting Startup cultures into their companies IT strategy and thus Agile SDLC beca...

Ohmni robot disassembly - Parts and structure inside Ohmni Telepresence Robot - Tear down

    The tablet, speakers were disconnected and removed in different video.    Ohmni robot disassembly - Parts and structure inside Ohmni Telepresence - Design - Mechonical and Electrical components .