0

Hi guys, I'm here again with my psd to html / css template.
now i have a strange issue is simple to explain but difficult to deal with.
i have tow tags (.iconSearch and search classes ) in one form, and i want to float them at right but when i do that, i get an extra margin in top despite i set 0 on margin-top, this the code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body , html{
            height : 100%;
            width : 100%;
            margin: 0;
            padding :0;
        }
        body
        {
            height : 100%;
            width : 100%;
            background-color : #d0d0d0;
            padding : 0 20px;
            box-sizing : border-box;
        }

        * , *::before , *::after
        {
            box-sizing : inherit;
        }
        .container
        {
            background-color : #ffffff;
            border-top : 10px solid #894aa3;
            /*border-bottom : 55px solid #444444;*/
            height : 100%;
            width : 100%;
            margin: 0;
            display : table;
            /*padding : 0 30px;*/
            position : relative;
        }

        .iconSearch
        {
            background-color : #ebebea;
            background-image : url("../img/searchIcon.png");
            background-repeat: no-repeat;
            background-size : 15px 15px;
            background-position: center;
            width : 28px;
            height : 28px;
            border-radius: 0 0 7px 0;
            margin : 0 30px auto auto;
            float : right;
            border : 0;

        }

        .search
        {
            margin: 0;
            float : right;
            width : 188px;
            height: 28px;
            border : 0px;
            background-color: #ebebea;
            border-radius: 0 0 0 7px;
        }

    </style>
</head>
<body>
<form>
    <div class="container">
        <header>
            <form>
                <input class="iconSearch" type="submit" value=""/><input class="search" type="text"/>
            </form>
            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>
            <span class="utopic-flowers2">free PSD webSite template</span>
            <ul class="navbartop">
                <li><a href="#">home</a></li>
                <li><a href="#">style demo</a></li>
                <li><a href="#">full width</a></li>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">portfolio</a></li>
                <li><a href="#">gallery</a></li>
            </ul>
            <div class="headerText">
                <p>Veniam ipsum laboris adipisicing anim aliquip occaecat qui amet exercitation dolor culpa. Voluptate
                    excepteur pariatur adipisicing cupidatat exercitation occaecat do consequat culpa ea duis proident.</p>
            </div>
        </header>
    </div>
</form>
</body>
</html>

thank you in advance.

Edited by ekka

3
Contributors
2
Replies
33
Views
5 Months
Discussion Span
Last Post by multail
0

It's a margin of

            <h2 class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </h2>

try to replace e.g.

            <b class="utopic-flowers">
                <span>u</span>topic <span>f</span>lowers
            </b>

and you will see that the extra margin of input element disappears

Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.