LinuxQuestions.org

LinuxQuestions.org (/questions/)
-   Linux - Newbie (https://www.linuxquestions.org/questions/linux-newbie-8/)
-   -   ubuntu + firefox problem? (https://www.linuxquestions.org/questions/linux-newbie-8/ubuntu-firefox-problem-849618/)

bizz80 12-11-2010 05:35 AM

ubuntu + firefox problem?
 
hi all, i've just install ubuntu last month. and i'm starting to get the hang of it.

i created my own web app for my office under windows environment, and when i switch to ubuntu, there no real problem viewing the web page. the web page appears just the way it was before.

just today, i install canon ip1700 printer driver and update firefox to version 3.6.13. i don't really know what happen, but since my web page doesn't appear the same as it was before. the layers that i used are not where it supposed to be.

i've tried re-installing firefox but the problem still occurs. but if i used other browser such as chromiun the web page are ok. i've also install firefox with the same version on windows machine, and there's no problem there.

i still can't find where's the problem. any ideas on fixing it?

Snark1994 12-11-2010 05:40 AM

I would use a utility such as firebug - it allows you to see which bits of HTML correspond to which bits of the screen, and generally debug your website. You will at least be able to see what it thinks it should be doing... :)

eSelix 12-11-2010 06:20 AM

Some screenshots and text source of the page will be helpful.

bizz80 12-11-2010 10:45 AM

2 Attachment(s)
Quote:

Originally Posted by eSelix (Post 4187817)
Some screenshots and text source of the page will be helpful.

here's the code that i use

<tr>
<td align="right" bgcolor="#f8f8f8" onMouseOver="MM_showHideLayers('Layer20','','show')" onMouseOut="MM_showHideLayers('Layer20','','hide')"><a href="/siguntang/index.php">Laporan Bulanan>>></a>
<div id="Layer20" style="position:absolute; left:208px; top:580px; width:200px; z-index:1; visibility: hidden; overflow: hidden; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" onMouseOver="MM_showHideLayers('Layer20','','show')" onMouseOut="MM_showHideLayers('Layer20','','hide')">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td><a href="data_frame.php?submenu=40" target="I1">> Laporan Umum</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=41" target="I1">> Laporan Penjualan</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=42" target="I1">> Pembelian Bahan Bangunan</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=43" target="I1">> Hutang Bahan Bangunan</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=44" target="I1">> Pembelian Umum</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=45" target="I1">> Hutang Pembelian Umum</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=46" target="I1">> Upah Kerja</a></td>
</tr>
<tr>
<td><a href="data_frame.php?submenu=47" target="I1">> Piutang Penjualan</a></td>
</tr>
</table>
</div>
</td>
</tr>

and the pictures show's what happen with chromium and firefox browser

eSelix 12-11-2010 04:20 PM

Can you explain in more details what is bad in Firefox? For me they look the same. Only submenu is showing higher.

bizz80 12-11-2010 09:38 PM

that it. the sub menu it's showing higher than it's intended to be. the picture is an example. the sub menu is a hidden layer. when the mouse over the menu a hidden layer submenu appear. the problem is because it is not where its intended to be and some submenu only contain one link, makes it impossible to access the submenu. is there any way to set the position of the hidden layer for the sub menu to be at the same place on any browser? like i said before, the location of this layer are different on firefox on windows and firefox on ubuntu.

eSelix 12-12-2010 02:38 PM

Well, it should not to be positioned from top of the page, because every browser/OS can have other fonts installed, with different height or something. Anyway if you want some elements (submenu) to be related to other (main menu) then they must be positioned according to each other. Try this code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><body>

<style>
.Container
        {
        width: 600px;
        }

.Menu
        {
        position: relative;
        width: 300px;
        text-align: right;
        background-color: #f8f8f8;
        }

.Submenu
        {
        position: absolute;
        z-index:1;
        overflow: hidden;
        top: 0px;
        left: 300px;
        width: 300px;
        text-align: left;
        visibility: hidden;
        background-color: #f4f4f4;
        }

div.Menu:hover .Submenu, div.Submenu:hover
        {
        visibility: visible;
        }

.Submenu a
        {
        display: block;
        }
</style>
<br><br><br><br><br><br><br><br>

<div class='Container'>
<div class='Menu'><a href="/siguntang/index.php">Laporan Bulanan>>></a>
<div class='Submenu'>
<a href="data_frame.php?submenu=40" target="I1">> Laporan Umum</a>
<a href="data_frame.php?submenu=41" target="I1">> Laporan Penjualan</a>
<a href="data_frame.php?submenu=42" target="I1">> Pembelian Bahan Bangunan</a>
<a href="data_frame.php?submenu=43" target="I1">> Hutang Bahan Bangunan</a>
<a href="data_frame.php?submenu=44" target="I1">> Pembelian Umum</a>
<a href="data_frame.php?submenu=45" target="I1">> Hutang Pembelian Umum</a>
<a href="data_frame.php?submenu=46" target="I1">> Upah Kerja</a>
<a href="data_frame.php?submenu=47" target="I1">> Piutang Penjualan</a>
</div>
</div>

<div class='Menu'><a href="/siguntang/index.php">Test 2>>></a>
<div class='Submenu'>
<a href="data_frame.php?submenu=40" target="I1">> Laporan Umum</a>
<a href="data_frame.php?submenu=41" target="I1">> Laporan Penjualan</a>
<a href="data_frame.php?submenu=42" target="I1">> Pembelian Bahan Bangunan</a>
<a href="data_frame.php?submenu=43" target="I1">> Hutang Bahan Bangunan</a>
<a href="data_frame.php?submenu=44" target="I1">> Pembelian Umum</a>
<a href="data_frame.php?submenu=45" target="I1">> Hutang Pembelian Umum</a>
<a href="data_frame.php?submenu=46" target="I1">> Upah Kerja</a>
<a href="data_frame.php?submenu=47" target="I1">> Piutang Penjualan</a>
</div>
</div>

<div class='Menu'><a href="/siguntang/index.php">Laporan Bulanan as test 3>>></a>
<div class='Submenu'>
<a href="data_frame.php?submenu=40" target="I1">> Laporan Umum</a>
<a href="data_frame.php?submenu=41" target="I1">> Laporan Penjualan</a>
<a href="data_frame.php?submenu=42" target="I1">> Pembelian Bahan Bangunan</a>
<a href="data_frame.php?submenu=43" target="I1">> Hutang Bahan Bangunan</a>
<a href="data_frame.php?submenu=44" target="I1">> Pembelian Umum</a>
<a href="data_frame.php?submenu=45" target="I1">> Hutang Pembelian Umum</a>
<a href="data_frame.php?submenu=46" target="I1">> Upah Kerja</a>
<a href="data_frame.php?submenu=47" target="I1">> Piutang Penjualan</a>
</div>
</div>

</div>



</body></html>

I give away a tables, because it is too hard to me to stylish them, I recommend you to use <div> or better <ul> <li> You can also resign from using Javascript to make hover effect and use css to this task. Some people, like me, disables JS for security/privacy reason. But it will not work in IE6, due to bug. Anyway the important is "position: absolute" in Submenu and "position: relative" in Menu. This way Submenu will be always relativly positioned to Menu. But it need "absolute" because it must not affect other elements.

bizz80 12-13-2010 05:26 PM

thx for the advice eSelix. i'll try it.


All times are GMT -5. The time now is 05:00 PM.