Page 1 of 1

CHROME: Odd div appearing from no where.

Posted: Thu Aug 12, 2010 6:18 am
by Weiry
This is for CHROME only, please don't reply if your testing in IE or FF.
I am unsure if it might be a webkit problem, so anyone with safari, could you also test this.

I have a <ul> tag with several <li> tags. Fairly simple, however when being used in conjunction with the following css, a strange div area seems to appear when hovering over any item in the <ul>
The div itself cant be seen, however it still appears while using the Chrome Element Inspector.

Does anyone have any idea why this might be happening? I have tested in IE and FF, both of which don't have a problem with this code.
This is the first time I've actually seen Chrome be the only browser to really break something :S

Full HTML / CSS:

Code: Select all

<style>
ul.sdt_menu{
	margin:0px;
	padding:0px;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:850px;
	height:85px;
}

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000 inset;
	-webkit-box-shadow:0px 0px 2px #000 inset;
	box-shadow:0px 0px 2px #000 inset;
}

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
/*	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
*/
}

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}

ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px; /*For dumbass IE7*/
	font-size:10px;
	letter-spacing:1px;
}

ul.sdt_menu li div.sdt_box{
	z-index:2;
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}

ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}

ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}
</style>

<ul id="sdt_menu" class="sdt_menu"> 
    <li> 
            <a href="#"> 
            </a> 
    </li> 
    <li> 
            <a href="#"> 
            </a> 
    </li> 
    <li> 
            <a href="#"> 
            </a> 
    </li> 
    <li> 
            <a href="#"> 
            </a> 
    </li> 
</ul> 

Re: CHROME: Odd div appearing from no where.

Posted: Thu Aug 12, 2010 6:36 am
by Weirdan
I don't see any odd divs... frankly all I see is four rectangles with grey border, but those seem to be links

From about: page
Chromium: 5.0.375.125 (Developer Build 53311) Built on Debian unstable, running on Debian squeeze/sid
WebKit: 533.4
V8: 2.2.24
User Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.125 Safari/533.4

Re: CHROME: Odd div appearing from no where.

Posted: Thu Aug 12, 2010 6:54 am
by Weiry
Weirdan wrote:I don't see any odd divs... frankly all I see is four rectangles with grey border, but those seem to be links

From about: page
Chromium: 5.0.375.125 (Developer Build 53311) Built on Debian unstable, running on Debian squeeze/sid
WebKit: 533.4
V8: 2.2.24
User Agent: Mozilla/5.0 (X11; U; Linux x86_64; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.125 Safari/533.4
Strange.. here is a screenshot of what i am seeing on my Chrome.

Code: Select all

Google Chrome	5.0.375.126 (Official Build 53802)
WebKit	533.4
V8	2.1.10.15
User Agent	Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/533.4 (KHTML, like Gecko) Chrome/5.0.375.126 Safari/533.
A picture says a thousand words in this case i think :S