Cascading Style Sheets

Is there a good CSS reference with information about browser compatibility

I decided to create maximally backwards compatible website, so it should work on legacy systems (including old IE), and smartphones using responsive web design. I know that CSS was gradually implemented in previous versions of browsers, but I can't find information (reference) about CSS features supported in previous versions of popular browsers. What is the best website or a book that describe the chronology of CSS implementation?

IE CSS issues;

I have a site @ https://www.weedshopinc.com On that site i have some IE issues and believe it or not, some firefox2 issues. Let me start with IE issues:
In the boxes on the front page, you will see text like "News" and "Member Login". I have an image that creates the color behind that text in the boxes. Notice how the color (image) does not stretch to the right side of the box. It stops short in IE. In firefox2, that is not seen. Here is the CSS for those colors (images):

.box_header {
font-size:15px;
margin:0;
padding:4px;

On Firefox HTML input overflows on the right in a CSS grid

My CSS grid has the following stylesheet :

<span id="declaration" class="declaration" style="grid-template-columns: 80px 10px 150px; grid-template-rows: 10px 10px 20px;">
.declaration {
    display: grid;
    margin-top: 20px;
    grid-column-gap: 5px;
}

The leftmost element of the grid has the following stylesheet :

<input type="text" id="etiquette" class="etiquette" title="label" style="grid-column: 1 / auto; display: initial;">
.etiquette {
    grid-row: 1 / span 2;
    margin-left: 5px;
    margin-right: 10px;
}

I need an expert on CSS&HTML

Please don't say I should have multi line indented coding. My text editor allows deleting & copying a line very easily.

I have narrowed down my problem to the following;

/*1*/<style type="text/css"> .in { position: fixed; width: 100%; left:70%; top: 26%; } </style>
/*2*/<style type="text/css"> .sh { position: fixed; width: 100%; left: 40%; top: 26%; } </style>
 
/*3*/
 
/*4*/<div class="in"> <select name="inout" style="width: 10%; height: 5mm"; >
/*5*/<option value="">Select</option>
/*6*/<option  value="in">In</option>
/*7*/<option  value="out">Out</option>

CSS alignment issue. IE only

My website developed by the Bootstrap4, but the page is confusing on IE, is there any way to solve this problem quickly?

https://succulentsaddiction.com/soil-mix/

Syndicate content