select don't this don't obey to CSS rules ( margin and position ) and other

[ekka]

hello guys.

I'm here to ask about margin and position properties with tow example :

the first is a misalignment (vertical --margin-- and horizontal --align-text-- ) of select tag, the problem is that I add align-text and margin-top properties in the CSS style, but it is invisible for the select tag, and visible for all other input tags.

in the second project you gonna notice, that when I make the four div in position absolute and I put left 0, the left div and top 0, the top div .... , and I put the input (search class) in -vertical-align: top- , the input is coming with top margin by default, I don't know why, but I think is not the input["text"] margin, the margin is a bottom margin of top div.

what i have tried :

I try to set margin-top to select tag with its class (another class CSS just for select tag), and I try to remove all CSS and put just form-control class from bootstrap, after I try to add position relative to the body and position absolute for input and select tags but this was a nightmare, so tell me about your propositions

thank you guys in advance for taking a look at the projects.

[gentlemedia]

Hard to tell withou seeing any code, but here's some info:

A select element is an inline element which means it has by default the CSS decleration display: inline in the browsers' computed stylesheet.
Top/bottom margin and padding don't have effect on inline elements. Only left/right margin and padding. Do you want top/bottom margin and padding on the select element, then you will have to change the display to inline-block or block in your CSS (depending on your situation)

select { display: inline-block )

/* or */

select { display: block }

An input tag is also by default an inline element, but you say the top margin has effect on them, so you probably have somewhere in your (Bootstrap ???) CSS already input { display: block }

Furthermnore don't use position: absolute to lay out your form elements/tags or for any other layout. It''s doable, but it has many disadvantages. Use it only for small things if you have to.

align-text is not a CSS property unless you mean text-alignand the vertical-align property has only effect on the table tags thead, tbody, , th and td or elements with a CSS property of display: table-cell or display: inline-block.

Personally I use flexbox for layout, because I knid of have/want to support IE10+

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[pty]

+1 for Flexbox, it makes dolving these problems much simpler

Another useful link https://philipwalton.github.io/solved-by-flexbox/

Soon with CSS grid landing too, the whole process will be fun again.

[ekka]

here are the project 1 and the project 2 , and thanks guys , but it still not working with this :

input[type="email"] , input[type="password"] , input[type="text"] , select
{
    width : 80%;
    height : 30px;
    text-align : center;
    border : none;
    font-size : 1em;
    color: #313A3D;
    background-color: #E8E9EA;
    margin-top : 10px;
    display: inline-block;
}
select
{
    display : inline-block;
    margin-top : 30px;
}

any other ideas

[pty]

Create a JS fiddle demonstrating your problem. Nobody wants to clone and set up a entire project.

[gentlemedia]

I only had a look and see in project1 that you load first your own stylesheet and then the bootstrap stylesheet. Switch them!

[ekka]

thank you @gentlemedia it was my problem , when i switch them all it works ,thank you very much