Problem in Internet Explorer which doesn't show up in Firefox

musicollector · Jul 8, 2008

Hi,

As you can see in Firefox, the following page renders fine:

http://harry.cckerala.com/

When you click on any of the drop-down panels, they are all there.

But, when you view the same page in Internet Explorer, the drop-down panels are cut off!!

Could someone kindly help me fix this? I tried to find a place where I can specify the height, but am unable to locate any such thing!

TIA.
Harry

jnjc · Jul 8, 2008

Your problem is caused because there is some padding in IE that is not there in FF. If you look at the distance the "AnchanWorld" logo is from the top of the page you will notice it is further down in IE. The reason you a loosing some of the panel is because you are using frames and because of the extra padding in IE the menu frame is not big enough to fit your menu. There are two ways to resolve this issue.

1) Try and get rid of the extra padding in IE. Experiment with your .css setting margins and paddings etc. to 0
Something like the following may help (I haven't tested it so don't know):

table.header {
background-color: #ffffff;
border: 0;
margin:0;
padding:0;
}

2) Add the extra space into your frameset declaration, increasing the 116 below will give your header frame more space, the down side of this is that things will look fine in IE but you will have a gap between where your menu ends and you next frame begins in FF.

<frameset border="0" frameborder="0" framespacing="0" rows="116,*">
<frame src="include/menu/menu.html" id="menu" name="menu" scrolling="no" noresize="noresize" />
<frame src="main.html" id="main" name="main" />

In short Option 1 is the "best" way to sort your problem but option 2 will be quicker. If I were you I'd do option 2 so that things are working and then focus on getting option 1 implemented.

HTH,
JC

P.S. I won't say anything about the fact you are using frames.....

musicollector · Jul 8, 2008

jnjc said:
Your problem is caused because there is some padding in IE that is not there in FF. If you look at the distance the "AnchanWorld" logo is from the top of the page you will notice it is further down in IE. The reason you a loosing some of the panel is because you are using frames and because of the extra padding in IE the menu frame is not big enough to fit your menu. There are two ways to resolve this issue.

1) Try and get rid of the extra padding in IE. Experiment with your .css setting margins and paddings etc. to 0
Something like the following may help (I haven't tested it so don't know):

table.header {
background-color: #ffffff;
border: 0;
margin:0;
padding:0;
}

2) Add the extra space into your frameset declaration, increasing the 116 below will give your header frame more space, the down side of this is that things will look fine in IE but you will have a gap between where your menu ends and you next frame begins in FF.

<frameset border="0" frameborder="0" framespacing="0" rows="116,*">
<frame src="include/menu/menu.html" id="menu" name="menu" scrolling="no" noresize="noresize" />
<frame src="main.html" id="main" name="main" />

In short Option 1 is the "best" way to sort your problem but option 2 will be quicker. If I were you I'd do option 2 so that things are working and then focus on getting option 1 implemented.

HTH,
JC

P.S. I won't say anything about the fact you are using frames.....

Thank you SO much for your quick response. I will try that and let you know.

Hmmm...should I not be using frames?

musicollector · Jul 14, 2008

No go. Neither works!

jnjc · Jul 14, 2008

The option 1 changes where just a stab, you'd have to play around to get them right.

The second option should work, when I look at your frameset definition it's still set to 116 have you rolled back the changes you made ?

jnjc · Jul 14, 2008

As far as getting option 1 to work, I have had another look at the HTML for the header. The reason for the extra padding at the top looks to be because the first two rows in your table are spacer rows. It's these two rows (which render differently in FF) that are pushing your menu out of frame. Us the following HTML for your header and see if it's any better (again I have only given this code a very basic test so it may need to be tweaked):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Kerala Scenery, Indian music, and my music collection</title>
    <meta name="description" content="Images of Kerala, my Kerala travelogue video, and music in RealAudio">
    <meta name="keywords" content="kerala,kerla,karela,malayalam,backwater,backwater travel,manorama, mathrubhoomi,malayali,mallu,old songs,audio files,real audio,video,music,audio,realaudio,india">
    <style>
        A
        {
            text-decoration: none;
        }
         <!
        -- a
        {
            cursor: crosshair;
        }
        a
        {
            color: #0000FF;
        }
        a:visited
        {
            color: #FF6347;
        }
        a:hover
        {
            color: #DAA520;
        }
        -- ></style>
    <meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
</head>
<link rel="stylesheet" type="text/css" href="../styles/musiccollector_style.css" />
</HEAD>
<body marginwidth="0" marginheight="0">
    <!-- Begin Header -->
    <table class="header" border="0" cellpadding="0" cellspacing="0" width="780">
        <!-- fwtable fwsrc="header.png" fwbase="header.gif" fwstyle="Dreamweaver" fwdocid = "742308039" fwnested="0" -->
        <tr>
            <td rowspan="3">
                <img id="header_image" name="header_image" src="images/header_image.gif" width="43"
                    height="46" border="0" alt="" />
            </td>
            <td colspan="6">
                <img id="header_5" name="header_5" src="images/spacer.gif" width="658" height="2"
                    border="0" alt="" />
            </td>
            <td class="right_border_edge">
                <img src="images/spacer.gif" width="1" height="2" border="0" alt="" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <img id="header_title" name="header_title" src="images/header_title.gif" width="182"
                    height="31" border="0" alt="" />
            </td>
            <td colspan="4">
                <img id="header_3" name="header_3" src="images/spacer.gif" width="476" height="31"
                    border="0" alt="" />
            </td>
            <td class="right_border_edge">
                <img src="images/spacer.gif" width="1" height="31" border="0" alt="" />
            </td>
        </tr>
        <tr>
            <td rowspan="3">
                <img id="header_2" name="header_2" src="images/spacer.gif" width="129" height="19"
                    border="0" alt="" />
            </td>
            <td rowspan="2">
                <img id="header_text_1" name="header_text_1" src="images/header_text_1.gif" width="53"
                    height="16" border="0" alt="" />
            </td>
            <td rowspan="2">
                <img id="header_text_2" name="header_text_2" src="images/header_text_2.gif" width="153"
                    height="16" border="0" alt="" />
            </td>
            <td rowspan="2">
                <img id="header_text_3" name="header_text_3" src="images/header_text_3.gif" width="76"
                    height="16" border="0" alt="" />
            </td>
            <td rowspan="2">
                <img id="header_text_4" name="header_text_4" src="images/spacer.gif" width="237"
                    height="16" border="0" alt="" />
            </td>
            <td rowspan="3">
                <img id="header_4" name="header_4" src="images/spacer.gif" width="10" height="19"
                    border="0" alt="" />
            </td>
            <td class="right_border_edge">
                <img src="images/spacer.gif" width="1" height="13" border="0" alt="" />
            </td>
        </tr>
        <tr>
            <td rowspan="2">
                <img id="header_8" name="header_8" src="images/spacer.gif" width="43" height="6"
                    border="0" alt="" />
            </td>
            <td class="right_border_edge">
                <img src="images/spacer.gif" width="1" height="3" border="0" alt="" />
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <img id="header_7" name="header_7" src="images/spacer.gif" width="519" height="3"
                    border="0" alt="" />
            </td>
            <td class="right_border_edge">
                <img src="images/spacer.gif" width="1" height="3" border="0" alt="" />
            </td>
        </tr>
        <tr>
            <td class="border">
                <img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
            </td>
            <td colspan="8" width="778" height="60" valign="top">
                <!-- Begin Menu -->
                <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
                    width="778" height="60" id="main_menu" align="top">
                    <param id="movie" name="movie" value="main_menu.swf" />
                    <param id="menu" name="menu" value="false" />
                    <param id="quality" name="quality" value="high" />
                    <param id="bgcolor" name="bgcolor" value="#ffffff" />
                    <embed src="main_menu.swf" menu="false" quality="high" bgcolor="#ffffff" width="778"
                        height="60" name="main_menu" id="main_menu" align="" type="application/x-shockwave-flash"
                        pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
                </object>
                <!-- End Menu -->
            </td>
            <td class="border">
                <img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
            </td>
            <td class="right_border_edge">
                <img src="images/spacer.gif" width="1" height="1" border="0" alt="" />
            </td>
        </tr>
    </table>
    <!-- End Header -->
</body>
</html>

musicollector · Jul 16, 2008

Hi,

Thanks for taking pains to help me.

However, the head.php in the root directory has to do with one of my sub-pages - not the main page. The main page has no head.php document, actually. If you can email me at:

musicollector_at_gmail.dot.com

I can send you any files from my site including a snap shot of my file locations.

In short, I am unsure of where I need to modify my frameset declaration.

Again, thank you so much.

Regards.

jnjc · Jul 16, 2008

There are two files you should be looking at to resolve this issue:

1) include/menu/menu.html
This is the HTML for the top frame of your site. If you look at post no. 6 from this thread I have posted replacement HTML for that file that MAY solve the issue (make sure you back up your original before you try it).

2) index.html

This contains your frameset definition, look for the line in it that says:
<frameset border="0" frameborder="0" framespacing="0" rows="116,*">

By increasing the '116' value you allocate more space to the top part of your page, start by changing it to 126. That is the quickest way to solve your issue.

Have a go at theses changes and if you don't get anywhere let me know and I'll email you for the files.

HTH,
JC

Problem in Internet Explorer which doesn't show up in Firefox

musicollector

New Member

jnjc

New Member

musicollector

New Member

musicollector

New Member

jnjc

New Member

jnjc

New Member

musicollector

New Member

jnjc

New Member