CODEWITHSUNDEEP
htmlcss
Altaf Hussain
Altaf Hussain

Reputation: 5202

Strange spacing above an image placed in anchor tag

I have a big banner placed on top of the page just below the top menu and a link is placed on it. Check the below link.

http://dev.shy7lo.com/shoes.html?___store=en&___from_store=arabic

If you check the spacing above the image in firebug or in Chrome Developer Tools, the a tag is adding about 17 to 20px extra top space. It is very strange. Can any body suggest why this spacing is there and how to remove it?

Upvotes: 1

Views: 78

Answers (3)

Navtosh Adhikari
Navtosh Adhikari

Reputation: 198

Remove float:none; from the .col1-layout .col-main css.

.col1-layout .col-main {
    width: 100%;
    padding: 0;
    display: block;
}

and put css on .category-image a

.category-image a {
    display: block;
    position:relative;
}

Upvotes: 0

Mukul Kant
Mukul Kant

Reputation: 7122

Its because of 

 .main-container {
   padding: 30px 30px 0;
 }

you should replace it with 

.main-container {
  padding: 0 30px; 
}

and make height:0px in #header-search

@media only screen and (min-width: 771px)
#header-search {
    display: block;
    position: relative;
    top: -48px;
    float: right;
    width: 25%;
    /*height: 50px;*/
    height: 0;
    padding: 0;
}

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi now define this css and resolve your problem 

.page-width{
position: relative;
}
#header-search {
    display: block;
    position: absolute;
    top: -47px;
    width: 25%;
    height: 40px;
    padding: 0;
    right: 0;
display: block;  // remove this line
position: relative; // remove this line
float: right;  // remove this line
}

Upvotes: 0

Related Questions