...

View Full Version : Unintentional whitespace around Divs



wrathrowe
06-15-2010, 01:18 PM
Hey everyone,
I'm writing a scrolling news feeder and I'm running into a problem with spaces in between my divs. Basically I have master holding div that contains all the news elements, when I mouse over the master div, I want it to pause. All that works fine, but when I mouse in between the divs it triggers the event the occur. Here is a simple example of whats happening:

<html>
<head>
<script type='text/javascript'>
function check(id){
alert(id);
}
</script>
<style type='text/css'>
div{
position:relative;
}
</style>
</head>
<body>
<div id='master' style='border:1px solid black; width:60px;' onMouseOver='check(this.id)'>
<div id='div1'>Div1</div><div id='div2'>Div2</div>
</div>
</body>
</html>
As you can see, when you mouse in between div1 and div2 it triggers the event function to be called. Is there any way to jam those two divs together so it doesn't call the event?? Thanks for any help!!

Kor
06-15-2010, 02:57 PM
I don't get it. Between the 2 divs there is no space, so that you can not place the mouse between them.
You can see that more clearly if CSS like:


#div1{
background:#00CCFF
}
#div2{
background:#FFCC00
}


Can you detail, elaborate and clarify your aim?

wrathrowe
06-15-2010, 03:56 PM
I'm using Firefox 3.6.3, and when I open that page and run my mouse from div1 to div2 inside the master div I get the onMouseOver='check(this.id)' event called.
I know there's no space in between them, and that why I'm so confused as to why this is happening. Did you run the page and try it?
Thanks.

SB65
06-15-2010, 04:01 PM
Um, but your alert fires onMouseOver on the #master div. When you're mousing over div1 and div2 you're still within #master - that's why it's firing...

Kor
06-15-2010, 04:11 PM
I'm using Firefox 3.6.3, and when I open that page and run my mouse from div1 to div2 inside the master div I get the onMouseOver='check(this.id)' event called.
Of course. Both divs are nested inside the parent div, they do not cover the parent div.

What in fact do you want?

wrathrowe
06-15-2010, 06:57 PM
Hey,

I'd like to be able to roll my mouse from div1 to div2 without the mouseOver event being called.

(I'm not trying to be a jerk about this or anything, I'm just trying to clearly explain the problem and what I'd like to happen)

So here's what's happening.. The master div contains another two divs with text in them. Once you mouse over the master div, lets say from the bottom, the function check is called which alerts 'master'. Best kind, that's what I want to happen. So then you have your pointer on the text div2, the cursor changes in to the text selector. So if you move your mouse around on the text, nothing is called, which is good. Now, if you slowly move your mouse from the text div2 up to div1 there's a 1px region when onMouseOver is called for the master div. Is there any way I can jam both of those divs together so that 1px space is not there, and instead of going from div2 -> master -> div1 it goes directly from div2 -> div1, therefore not mousing over master and calling the function check.

Thanks again for your help.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum