PDA

View Full Version : Resolved What?? Mouse And Selection Are In Different Places?! Issue in FF3. Help please!



mwgriffin
Mar 15th, 2009, 03:38 AM
I suspect this problem may be attributed to something in my css. Here's my website: http://www.mwgriffin.com/ If you click on the audio or video menu items, and then proceed to click on any of the links in the page, when using Firefox 3, the flash video player doesn't work correctly. A simple explanation of the problem would be that the mouse and where the mouse is actually selecting items are in two separate places. I have no clue why this is, all I can say is that it works fine in IE 7 and Safari. It used to work perfectly in FF before i totally redid my css of the webpage, and now I don't know what I've done wrong... If you could give me any pointers or even a solution I'd be immensely thankful. And if you need any extra information to come up with what's wrong I'll provide it. Thanks!!!

Michael

mwgriffin
Mar 15th, 2009, 03:55 AM
Ok actually I commented out my css, to test the page that way, and BAM! there is no problem with the flash player. So... That means that there is something wrong with my css... Here it is:


@charset "utf-8";
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: left;
color: #FFF;
font-family: "Century Gothic";
font-size: 75%;
background-color: #171717;
font-weight: bold;
font-variant: small-caps;
background-attachment: fixed;
background-image: url(paint2.png);
background-repeat: no-repeat;
background-position: right bottom;
z-index: 1;
overflow: hidden;
height: 100%;
max-height: 100%;
border: 0;
}
.twoColElsLtHdr #header {
background-color: #333;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #FC0;
position: absolute;
height: 50px;
width: 100%;
left: 0px;
top: 0px;
background-image: url(tile2.png);
background-repeat: repeat;
z-index: 3;
overflow: hidden;
right: 0px;
}
.twoColElsLtHdr #header h1 {
margin: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
color: #FC0;
padding-top: 5px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 15px;
}


.sidebar1 {
float: left;
width: 125px;
background-color: #383838;
position: absolute;
left: 0px;
top: 0px;
height: 100%;
overflow: hidden;
text-align: center;
}

.twoColElsLtHdr #mainContent {
z-index: 1;
overflow: auto;
position: absolute;
left: 125px;
top: 52px;
right: 0px;
bottom: 27px;
}
.paddingmain {
padding-right: 15px;
padding-left: 15px;
}
.twoColElsLtHdr #footer {
background-color: #333;
border-top-width: 2px;
border-top-style: solid;
border-top-color: #FC0;
position: absolute;
bottom: 0px;
left: 0px;
height: 25px;
background-image: url(tile2.png);
z-index: 3;
overflow: hidden;
right: 0px;
}
.paddingsidebar {
padding-top: 52px;
}
.twoColElsLtHdr #footer p {
margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
text-align: center;
color: #FC0;
}


.imagelinkborder {
height: 120px;
width: 120px;
border: 3px double #CCC;
margin-top: 5px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 2px;
}
.imagelinkbordering {
background-color: #666;
height: 156px;
width: 136px;
margin-top: 3px;
margin-bottom: 3px;
margin-right: 1px;
margin-left: 1px;
border: 1px solid #CCC;
float: left;
}
.textbelow {
text-align: center;
}

#shadowbox_top {
position: absolute;
height: 10px;
width: 100%;
top: 52px;
z-index: 3;
background-image: url(shadowelement.png);
background-repeat: repeat-x;
overflow: hidden;
left: 0px;
right: 0px;
}
#shadowbox_bottom {
position: absolute;
height: 10px;
width: 100%;
bottom: 27px;
z-index: 3;
background-image: url(shadowelement_bottom.png);
background-repeat: repeat-x;
overflow: hidden;
left: 0px;
right: 0px;
}
#shadowbox_leftSide {
position: absolute;
height: 100%;
width: 12px;
z-index: 2;
background-image: url(shadowelement_leftSide.png);
background-repeat: repeat-y;
left: 125px;
overflow: hidden;
top: 0px;
bottom: 0px;
}

Thanks again!!!

mwgriffin
Mar 15th, 2009, 04:06 AM
Ok here's another update. I've determined, by deleting classes and ids in the css, and then testing the page, that the issue has to do with the maincontent id. More specifically with the positioning of it. I need the maincontent to be in that spot somehow, but it obviously is thinking that whatever is inside that lightview container is back in the original position, therefore throwing off the location of the mouse.


.twoColElsLtHdr #mainContent {
z-index: 1;
overflow: auto;
position: absolute;
left: 125px;
top: 52px;
right: 0px;
bottom: 27px;
}
I still have not solved it though, any input would be great.

mwgriffin
Mar 15th, 2009, 04:26 AM
here's the code for the lightview object. There must be some sort of compatibility issue between this, the changes that I made to the maincontent class in my css, and firefox 3.....

/* lightview.css
http://www.nickstakenburg.com/projects/lightview
*/

#lightview {
position: absolute;
top: 50%;
left: 50%;
height: 150px;
width: 150px;
margin: -75px 0 0 -75px;
padding: 0;
text-align: left;
}

/* The container that holds everything */
.lv_Container {
position: relative;
width: 100%;
height: 100%;
background: none;
padding: 0;
margin: 0;
}

.lv_Button {
cursor: pointer;
text-decoration: none;
border: none;
background: none;
margin: 0;
padding: 0;
}

/* The buttons on the side when you view a gallery */
.lv_Sides {
position: absolute;
top: 50%;
left: 0;
clear: both;
width: 100%;
padding: 0;
margin: 0;
}
.lv_Sides * { padding: 0; margin: 0; }
.lv_Sides li {
list-style-type: none;
position: relative;
}

.lv_PrevSide { float: left; }
.lv_NextSide { float: right; }
.lv_Sides .lv_Wrapper {
width: 100%;
height: 100%;
cursor: pointer;
}
.lv_Sides .lv_Button {
float: left;
background: none;
}

/* The frames above and below the center, that hold the corners.
It's recommended not to change anything here, a lot is done in
javascript to build further upon this based on your settings.
*/
.lv_Frames {
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.lv_Frames li {
list-style-type: none;
margin: 0;
padding: 0;
}
.lv_Frame {
width: 100%;
display: block;
}
.lv_Frame * { padding: 0; margin: 0; }
.lv_FrameTop {
position: absolute;
left: 0;
width: 100%;
display: block;
}
.lv_FrameBottom {
position: relative;
float: left;
clear: both;
}

.lv_Liquid {
position: relative;
float: left;
width: 100%;
overflow: hidden;
clear: both;
}
.lv_Liquid .lv_Filler {
position: absolute;
height: 100%;
width: 2px;
top: 0;
left: 50%;
}

.lv_Half {
display: block;
height: 100%;
clear: both;
line-height: 0px;
}
.lv_Half li { list-style-type: none; }
.lv_Corner {
float: left;
position: relative;
}
.lv_CornerTr, .lv_CornerBr { float: right; }

.lv_Fill {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}

.lv_Half .lv_CornerWrapper {
float: left;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
}
.lv_HalfRight .lv_CornerWrapper { float: right; }

.lv_Corner { position: relative; }
.lv_Corner canvas { position: relative; }
.lv_HalfLeft .lv_Corner { float: left; }
.lv_HalfRight .lv_Corner {
position: relative;
float: right;
}

/* To position content correctly in the center with correct
rounded corner display we need a few wrappers.
This is to get it right on all browsers.
*/
.lv_Center {
position: relative;
clear: both;
height: 100%;
overflow: hidden;
background: none;
padding: 0;
margin: 0;
}
.lv_WrapUp {
position: absolute;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.lv_WrapDown {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.lv_WrapCenter {
position: relative;
padding: 0;
margin: 0;
}

/* The loading indicator */
.lv_Loading {
position: absolute;
top: 50%;
left: 50%;
}
.lv_Loading .lv_Button {
float: left;
height: 100%;
width: 100%;
}

.lv_MediaWrapper {
position: relative;
width: 100%;
display: block;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}
.lv_MediaWrapper img {
position: relative;
float: left;
padding: 0;
margin: 0;
}

/* The overlays on top of images that toggle the previous/next buttons */
.lv_PrevNext {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.lv_PrevNext * { padding: 0; margin: 0; }
.lv_PrevNext .lv_Button {
position: relative;
height: 100%;
}
.lv_PrevButton { float: left; }
.lv_NextButton { float: right; }

/* The bar that holds title, caption, imagenumber, slideshow and closebutton */
.lv_MenuBar {
clear: both;
position: relative;
width: 100%;
color: #FFF;
padding: 0;
margin: 0;
text-align: left;
font-family: "Century Gothic";
font-size: 11px;
}
.lv_MenuBar * { padding: 0; margin: 0;}


.lv_Close {
position: relative;
float: right;
overflow: hidden;
width: 100%;
height: 100%;
}

.lv_Data {
position: relative;
float: left;
padding-bottom: 3px;
line-height: 13px;
overflow: hidden;
}

/* simulates padding-left inside .lv_Data
.lv_DataText div, .lv_ImgNumber div { margin-left: 3px; } */

.lv_Data li {
list-style-type: none;
float: left;
margin-top: 3px;
}
.lv_DataText { width: 100%; }
.lv_DataText .lv_Title {
font-weight: bold;
margin-bottom: 2px;
}
.lv_DataText .lv_Caption { clear: both; }
.lv_Data .lv_ImgNumber {
color: #FFF;
margin-right: 5px;
margin-top: 5px;
}

.lv_Data .lv_innerPrevNext,
.lv_Data .lv_Slideshow {
position: relative;
border-left: 1px solid #d7d7d7;
padding: 0 5px;
margin-top: 5px;
vertical-align: middle;
}
.lv_Data .lv_Slideshow { padding-right: 0px; }

.lv_Data .lv_innerPrevNext .lv_Button,
.lv_Data .lv_Slideshow .lv_Button { /* play and stop */
float: left;
background-position: center left;
background-repeat: no-repeat;
}

/* the boxes that hold media or external content */
.lv_contentTop,
.lv_contentBottom {
position: relative;
float: left;
margin: 0;
padding: 0;
clear: both;
}

#lightview iframe {
float: left;
border: 0;
clear: both;
padding: 0;
margin: 0;
background: none;
}

/* The container that hold buttons above the view, currently only topclose */
.lv_topButtons {
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.lv_topcloseButtonImage { cursor: pointer; }


/* The error/warning/download message that will appear when
a required plugin is not installed.
*/
#lightviewError p { padding: 0 0 10px 0; }
#lightviewError div {
padding: 6px;
font: 11px Arial, Helvetica, sans-serif;
}
#lightviewError .message {
background: #fcb5b5;
color: #dd1f1f;
margin-bottom: 3px;
}
#lightviewError .type { font-weight: bold; }
#lightviewError .pluginspage {
background: #b5fcbd;
color: #21be30;
}
#lightviewError a,
#lightviewError a:hover,
#lightviewError a:visited {
color: #21be30;
text-decoration: none;
background: none;
font-weight: bold;
border-bottom: 1px solid #7de689;
}
#lightviewError p {
margin-left: 0;
padding: 0;
}

#lv_overlay {
position: absolute; /* Opera will use fixed */
top: 0;
left: 0;
height: 100%;
width: 100%;
}

/* navbar
Adds a bar below the view that takes over the default Controller
*/
#lightviewController {
position: fixed;
bottom: 0;
top: 0;
left: 50%;
margin: 0;
padding: 0;
color: #d2d2d2;
font: 11px Arial, Helvetica, sans-serif;
}
* html body #lightviewController { /* IE6 */
position: absolute;
top: auto;
margin-top: expression( (-1 * this.offsetHeight / 2 + (document.documentElement ? document.documentElement.scrollTop : 0) + (Lightview.controllerOffset || 0)) + 'px');
}
#lightviewController ul {
display: block;
height: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.lv_controllerTop, .lv_controllerMiddle, .lv_controllerBottom {
list-style-type: none;
float: left;
display: block;
position: relative;
clear: both;
overflow: hidden;
margin: 0;
padding: 0;
}
.lv_controllerCenter { width: auto; float: left; }
.lv_controllerCornerWrapper {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.lv_controllerCornerWrapperTopLeft,
.lv_controllerCornerWrapperBottomLeft { top: 0; left: -100%;}
.lv_controllerCornerWrapperTopRight,
.lv_controllerCornerWrapperBottomRight { top: 0; left: 100%;}

#lightviewController .lv_CornerWrapper {
width: 100%;
}
#lightviewController .lv_Corner { float: left; }
#lightviewController .lv_Corner {
float: right;
position: relative;
}
#lightviewController .lv_CornerTr, #lightviewController .lv_CornerBr { float: left; }
.lv_controllerBetweenCorners {
position: relative;
height: 100%;
overflow: hidden;
}

.lv_controllerMiddle {
position: relative;
height: 100%;
float: left;
}
.lv_controllerCenter { float: left; width: auto;}
.lv_controllerCenter li {
list-style-type: none;
float: left;
display: inline;
position: relative;
clear: none;
}
.lv_controllerSetNumber {
float: left;
text-align: center;
}

#lightviewController .lv_Button {
float: left;
position: relative;
height: 100%;
clear: none;
}
.lv_controllerSetNumber {
position: relative;
height: 100%;
padding-right: 3px;
}
.lv_controllerPrev,
.lv_controllerNext,
.lv_controllerSlideshow,
.lv_controllerClose {
float: left;
position: relative;
height: 100%;
padding-left: 3px;
}

.lv_controllerPrev { border-left: 1px solid #3c3c3c; }
#lightviewController .lv_controllerNext { padding-right: 3px; border-right: 1px solid #3c3c3c; }

* html #lightview { /* IE6 */
position: absolute;
margin-top: expression( (-1 * this.offsetHeight / 2 + (document.documentElement ? document.documentElement.scrollTop : 0) - (Lightview.controllerHeight || 0)) + 'px');
margin-left: expression( -1 * this.offsetWidth / 2 + (document.documentElement ? document.documentElement.scrollLeft : 0) + 'px');
}

/* Always cover 100% of the screen in IE6 */
html #lv_overlay {
position: absolute;
height: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight].max() : document.documentElement.scrollHeight) + 'px' );
width: expression(((window.Enumerable && window.Enumerable.max) ? [document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.clientHeight].max() : document.documentElement.scrollWidth) + 'px' );
}

mwgriffin
Mar 15th, 2009, 04:41 AM
Ok so here's an update. I've embedded a flash player, and added a link to the same flash player (in the lightview box) on the home page so you can easily see it. The issue is clearly not with the flash player, as it works perfectly while embedded. The problem now can be attributed to an issue between the lightview object and the positioning of the maincontent div within Firefox. I really would appreciate an solution asap as this is a project for school that I've got to have functioning well by monday. Thank you so much!!!

mwgriffin
Mar 15th, 2009, 01:18 PM
Anyone? I'm really at a loss as to how I'm going to solve this. There must be something I can change in either the lightview css or my css (in the maincontent class or add another class/id). Ideas?

mwgriffin
Mar 15th, 2009, 10:24 PM
Time is running out... I'm gonna be swcrewed if I cannot figure out what is the cause of this problem. Please help! Thankyou!!!

mwgriffin
Mar 16th, 2009, 07:39 AM
Ok, so after a little trial and error, I realized that instead of using the position attributes for the maincontent div, I could instead use margins. While this solves the problem with the selection, it completely removes the ability to scroll the content, and therefore makes it useless. I'm lost and I need to turn this in tomorrow. This little problem might just kill all of the hard work I've put into this. If you have any suggestions I'd be immensely grateful. Thankyou.

abduraooft
Mar 16th, 2009, 09:47 AM
Here's my website: http://www.mwgriffin.com/ If you click on the audio or video menu items, and then proceed to click on any of the links in the page, when using Firefox 3, the flash video player doesn't work correctly.
I don't see the issue, and which might be the reason for not getting any reply.
I've opened you site in FF3 and then clicked the AUDIO first and the VIDEO and then clicked on the http://www.mwgriffin.com/images/mvthumb2.jpg. The flash played a video for me.

mwgriffin
Mar 16th, 2009, 11:00 AM
Right, it's not the clicking of the icon, its when you get TO the player that things start screwing up. If you notice, try and click the pause button. You can't in ff3, at least in mine. If you measure where the mouse goes from normal to pointer, the offset corresponds to the amount that the maincontent div is offset from its original position. When I change the maincontent div to using margins, everything inside the overlay works fine, except that the ability to scroll the page goes away. Yeah, so to reiterate, the problem occurs inside the overlay, within the window of it, where the flash player is. Therefore you can't select things correctly... I hope that helps some? Thanks so much for the reply though!

abduraooft
Mar 16th, 2009, 11:10 AM
Have a try by removing the inline style overflow: hidden; from lv_contentTop

kashfun
Mar 16th, 2009, 04:10 PM
try changing:

<div class="lv_WrapCenter" style="padding: 0pt 12px; background-color: rgb(25, 25, 25);">
to:

<div class="lv_WrapCenter" style="margin: 0 auto; background-color: rgb(25, 25, 25);">

This is to prevent your padding to get in the way of your video while making it center.

mwgriffin
Mar 16th, 2009, 06:25 PM
Thanks so much people! I'm sure those will work. The only problem is that I can'f find this to remove it:
removing the inline style overflow: hidden; from lv_contentTop
This is what I'm seeing for the lv_contenTop:


.lv_contentTop,
.lv_contentBottom {
position: relative;
float: left;
margin: 0;
padding: 0;
clear: both;
}

are you saying I should add overflow: hidden to it?
And @ kashfun where are you getting that code from? Is this what you're referring to?


.lv_WrapCenter {
position: relative;
padding: 0;
margin: 0;
}

If it is then should I change it to this?


.lv_WrapCenter {
position: relative;
padding: 0;
margin: 0 auto;
}

or are you asking me to put that in as html? Because I can't find that specific original code... Thankyou so much though both of you! If I can clear up (probably me being stupid) my confusion over what exactly you want me to change I'm sure your solutions will work. :D

kashfun
Mar 16th, 2009, 06:55 PM
Sorry, I tried editing your site and just realised that both our suggestions are meaningless. What both of us suggested was to change the style of lightview (which is meaningless).

The only thing I can suggest right now is to try other alternatives instead of lightview.
To name some, lightbox 2 (http://www.huddletogether.com/projects/lightbox2/), greybox (http://orangoo.com/labs/GreyBox/) and lightwindow (http://www.stickmanlabs.com/lightwindow/).

Hopefully, with any of this, it should solve your problem. If it doesn't you might have to check your swf player or change to a different player.

mwgriffin
Mar 16th, 2009, 09:46 PM
Thanks kashfun. Ok I've finally determined that the fault lies with lightview. I loaded up a simple swf file just to make sure that the issue wasn't with the player I was using. If you try to click the "plus" button, you can't although you should be able to. It is because for some reason the lightview is messing with the swf, or offsetting the pointer control. I'm going to figure this out eventually...

mwgriffin
Mar 16th, 2009, 10:04 PM
YESSS. I finally figured it out. I just created a test page with an offset div and fiddled around with it, adding each attribute of the maincontent div to it until i ran into the same problem. GUESS WHAT? It was the "overflow:auto" in the maincontent div that screwed it up. I don't know why this was, but it solved it! Maybe that was what abduraooft was referring to, although it should have been "inside the maincontent div." But hey! I fixed it and thank you to abduraooft and kashfun for helping me to eliminate problems and keep me motivated. WHahoooo!!!!

mwgriffin
Mar 16th, 2009, 10:07 PM
dang... I just ran into another problem though... No scroll bar appears in the maincontent div when the content overflows... I don't know how I'm going to fix that though... without using overflow:auto to see what I'm talking about visit this pages here: http://www.mwgriffin.com/test.html http://www.mwgriffin.com/test2.html I've set up a couple of examples. The interesting thing is that with test.html the very bottom div should be working, as it has the exact same css as it does in test2.html (where the div does work). I don't understand. This actually positively means that there is something wrong with lightview's css or js implementation of swf objects. Oh and also notice the jerky and blocky playback in the bottom div's swf in test.html. And of course all of the divs work fine in IE 7 and safari, only in mozilla do these problems arise.

UPDATE: OK this just got more confusing. I made some changes to test2.html and created a new page http://www.mwgriffin.com/test3.html What I don't understand is that the div in test3.html works whereas the div in test2.html doesn't after I changed the overflow to auto!? The only difference between the two is that the div in test2.html is 50px away from the top, whereas in test3.html it's 344px away!!!??? What the heck is that? changing the distance from the top either makes it work or not? To reiterate now the overflow is not the issue anymore... but the distance from the top of the page is... wtf

FURTHER UPDATE:
I don't know anymore, it looks as though it might be a combination of the overflow element and the positioning of the div, as without any overflow the lightview works, no matter what its position. ahh. this is exhausting.

SOLUTION:
I finally found a permanent solution to the problem!!! I talked to the maker of lightview and he suggested I set the wmode option in lightview to window or opaque. And it worked!!! Sweet thanks to everyone who helped me out!!!