CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8
ImadBakir
ImadBakir

Reputation: 553

IE8 CSS Relative position extra whitespace

I'm facing a problem that I couldn't solve, When I add Position:relative; to a div it appears with sorta a white border, or extra space like in the imageenter image description here

and if I remove Position:relative; border moves to the parent which also has Position:relative; and this is only on IE8. Markup:

<div class="content clearfix">
    Some content goes here
         <div class="block">
               <div class="block_content" style="display: block;">
                 Some content goes here
              </div>
          </div>
 </div>

CSS:

.content {
min-height: 100%;
height: 100%;
position: relative;
width:100%;
background-color:#ebebeb;
}
.block_content {
display:none;
position:relative;
margin: 25px 20px 15px 20px;
}
.block{
      overflow:hidden;
    width:58%;
    padding-bottom:60px;
float:right;
position:relative;
margin-right:10%;
background: rgb(222,222,222); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(222,222,222,1) 0%, rgba(255,255,255,1) 0%, rgba(222,222,222,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(222,222,222,1)), color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(222,222,222,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(222,222,222,1) 0%,rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(222,222,222,1) 0%,rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(222,222,222,1) 0%,rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(222,222,222,1) 0%,rgba(255,255,255,1) 0%,rgba(222,222,222,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dedede', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */

            box-shadow: 6px 6px 14px #333333;
        -moz-box-shadow:6px 6px 14px #333333;
    -webkit-box-shadow: 6px 6px 14px #333333;
    }

demo link: http://bank.benseno.com.tr/Sunus.html any help is appreciated

Upvotes: 3

Views: 2148

Answers (3)

Dom
Dom

Reputation: 40459

The problem lies with this line in layout.css (line 480):

.maroon:before{
    border: 4px solid #FFF;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
}

Remove the border and content, or change the class.

Upvotes: 1

Arkana
Arkana

Reputation: 2889

Well, well, well, I think I have what that strage border comes from.

It's from that piece:

.maroon:before {
    border: 4px solid #FFFFFF;
    bottom: 0;
    content: "";
    display: block;
    left: 0;
    position: absolute; 
    right: 0;
    top: 0;
    z-index: -1;
}

If you remove content:""; you don't see that border anymore.

Seems that IE8 it's making a mess with the parent. So, if you change parent position:relativeor remove it, IE8 apply this style to the previous relative element. I don't know if this might be for the filter you applied to achieve rotation and that stuff...

Sorry for the incomplete info, at least we can target where's the issue... I continue studying, but now perhaps you or other user, knowing this, can help to fix it.

Upvotes: 3

Tiago C&#233;sar Oliveira
Tiago C&#233;sar Oliveira

Reputation: 810

Since web browsers handle default CSS properties in very peculiar ways, it's always a good practice to reset your css before starting development. On my tests, I was able to solve the problem applying Eric Meyers's reset css technique, but it's important to note that it worked under an environment where the provided code was the only one present at the document.

Looking at the example website you provided, I can see that you already use an CSS reset solution, but you aren't using a css reset that was made thinking on HTML 5 pages (like that one). So, my advise is for you to use HTML5 Doctor CSS Reset instead. It's based on Eric Meyer's solution, and you can get it here: http://www.cssreset.com/

Upvotes: 1

Related Questions