CODEWITHSUNDEEP
htmlcss
devmonster
devmonster

Reputation: 1739

New line in page for no reason

I have updated my banners in my site. There are unexplainable over margins (between the first from the left and the second from the left.) The margin is a new line in the HTML, but without any fader element to hold it. It's weird.

I have tried to set up a jsfiddle, but the error does not exist there.

Here is the code:

<br>
<div class="invisible_box">
    <a class="overlay" onclick="window.open('http://www.s-maof.com/LandingPages/PRO/','PRO','scrollbars=yes, toolbar=no,status=no, width=570,height=650')"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/bannerPro150x75.swf" width="150" height="75">
        <param name="movie" value="http://s-maof.com/stuff/bannerPro150x75.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
    </object>
</div>

<div class="invisible_box" style="z-index: 7000">
    <a class="overlay" style="cursor:auto;"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/tachlit-150x150.swf" width="150" height="150">
        <param name="movie" value="http://s-maof.com/stuff/tachlit-150x150.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
   </object>               
</div>

And the CSS:

.invisible_box {
    height: 75px;
    margin-bottom: 5px;
    position: relative;
    width: 150px;
}
.overlay {
    background: none repeat scroll 0 0 white;
    display: block;
    height: 75px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 150px;
    z-index: 10000;
}

Upvotes: 2

Views: 356

Answers (4)

devmonster
devmonster

Reputation: 1739

Thanks guys and @Mr_Green,

There were hidden three characters that were discovered only when I copied the code to notepad!! there were NOT shown in the vbulletin editor (my site's framework).

very interesting..

Upvotes: 0

bfavaretto
bfavaretto

Reputation: 71939

You have three invisible U+200B characters after the div, and they may be the cause. The source code shows this (look in a text editor that allows you to see those):

<div class="invisible_box">
    <a class="overlay" onclick="window.open('http://www.s-maof.com/LandingPages/PRO/','PRO','scrollbars=yes, toolbar=no,status=no, width=570,height=650')"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/bannerPro150x75.swf" width="150" height="75">
        <param name="movie" value="http://s-maof.com/stuff/bannerPro150x75.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
    </object>
</div>​​​<U+200B><U+200B><U+200B>

They may be causing the rogue element you see on Chrome Console, as pointed out by Tiby.

Upvotes: 5

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

try to insert the html comment in there <!-- --> 

<div class="invisible_box">
            <a class="overlay" onclick="window.open('http://www.s-maof.com/LandingPages/PRO/','PRO','scrollbars=yes, toolbar=no,status=no, width=570,height=650')"></a>
            <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/bannerPro150x75.swf" width="150" height="75">
                <param name="movie" value="http://s-maof.com/stuff/bannerPro150x75.swf" />
                <param name="quality" value="high" />
                <param name="wmode" value="transparent" />
                <param name="loop" value="false" />
            </object>
        </div><!--

                --><div class="invisible_box" style="z-index: 7000">
<a class="overlay" style="cursor:auto;"></a>
    <object type="application/x-shockwave-flash" data="http://s-maof.com/stuff/tachlit-150x150.swf" width="150" height="150">
        <param name="movie" value="http://s-maof.com/stuff/tachlit-150x150.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="loop" value="false" />
   </object>      

</div>

Upvotes: 2

Tiborg
Tiborg

Reputation: 2305

In the Google Chrome Console, if you take a look at that area, there is a large empty text block between the first banner and the second one (it appears between quotes). I just deleted that and the empty space between the two banners disappeared. Try it out.

Upvotes: 3

Related Questions