Carissa (la80schica) wrote in component_help,
Carissa
la80schica
component_help

Navbar Problem in Firefox

I've been trying to look over my coding and figure this out for a while but I'm still not sure what's causing it, I was wondering if anyone else has had this problem. My navigation bar is off-kilter in Firefox.





And here's my user layer:


function Page::print_custom_head() {

"""

<style>

img { border-width: 0px; }



body {

        background-image: url(http://www.nocturnica.net/lj/toppercomponent_80s.jpg) ;

        background-repeat: no-repeat ;

        background-attachment: scroll ;

        background-position: top ;

        margin-top: 250px ; # replace HHH with your image height in pixels

        background-color:#DB97A6;

      }



.header-item {

        top: 0px;

     }

     .header {

        background-image: url(""); /* removed the gradient background */

        height: 15px; /* adjust the height of the component */

     }





</style>

""";

}



function page_layout(Page p) {



  # Calculate the corner_color for the new rounded navigation bar

  var Color header = $*header_bgcolor;

  var Color headerMinus5  = $header->darker(50);

  var Color headerPlus3   = $header->lighter(30);

  var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);





  # Set this to the width that you want both the navbar (if it exists) and the whole journal to be

  # may be percentage (70%) or number of pixels (700px).

  var string k1Swidth = "750px";



  # Start the html document and print the head section which controls the page title, stylesheet information,

  # server supplied head content, and custom header informtion from the print_custom_head function.

  var string title = $p->title();

  """

  <html>

  <head>

    <link rel="stylesheet" href="$p.stylesheet_url" type="text/css"/>

    $p.head_content

    """; $p->print_custom_head(); """

    <title>$title</title>

  </head>

  """;

  

  # Start the body section of the html document which controls the visible parts of the page.

  """<body style="text-align:center;">""";



  # Print the rounded navigation bar if it is needed. This can be incorporated into any other tutorials which override

  # the page_layout() function, and should be placed immediately after the <body> tag above.

  if (not $*comp_navbar or $*comp_state=="none") {

     """

     <div>

     <img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0">

     </div>



     <table width="750" cellspacing="0" cellpadding="0" valign="top">

       <tr valign="top" width="750">

         <td width="3">

           <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">

         </td>

         <td>

            <table cellspacing="0" cellpadding="0" border="0" width="100%">

                <tr>

            <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                    <td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                </tr><tr>

                    <td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr><tr>

                    <td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                </tr><tr>

                    <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                    <td class="tabBg" width="100%">

                      <div class="header">

                      """;

                      print "<span class=\"header-item\"><a href=\""+$p.view_url{"recent"}+"\">$*nav_entries_text</a></span>";

                      print "<span class=\"header-item\"><a href=\""+$p.view_url{"friends"}+"\">$*nav_friends_text</a></span>";

                      print "<span class=\"header-item\"><a href=\""+$p.view_url{"archive"}+"\">$*nav_calendar_text</a></span>";

                      print "<span class=\"header-item\"><a href=\""+$p.view_url{"userinfo"}+"\">$*nav_info_text</a></span>";

                      if($p.journal.website_url != "") {

                        print "<span class=\"header-item\"><a href=\"$p.journal.website_url\">$p.journal.website_name</a></span>";

                      }

                      $p->lay_viewspec_nav();  # prints previous / next links including arrow images

                      """

                      </div>

                    </td>

                    <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                    <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                    <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr><tr>

                    <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                    <td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>

                    <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>

                </tr><tr>

                    <td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr><tr>

                    <td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>

                </tr>

            </table>

         </td>

         <td width="3">

           <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0">

         </td>

        </tr>

      </table>

    """;

  }





  if($k1Swidth != "") {

    """<table style="border: 0px; margin: auto; padding: 0px; width:$k1Swidth;"><tr><td>""";

  }



  # Print a spacer at the top of the page above the components and main area.

  """<div><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="2" alt="" border="0" /></div>""";



  # Start the table which lays out the components and main area in side-by-side layout

  """

  <table cellspacing="0" cellpadding="0" valign="top">

    <tr valign="top" width="100%">

      <td width="3">

        <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" />

      </td>

  """;

  

  # If the components are supposed to be on the left side of the page, then print them, followed by a column

  # with a spacer which is to seperate the components and the main area.

  if ($*comp_state == "left") {

    print_my_components($p);

    """

    <td width="3">

      <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" />

    </td>

    """;

  }



  # Print the main area of the page.

  print_my_entries($p, $title);



  # If the components are supposed to be on the right side of the page, then first print a column with a spacer

  # and then print the components after the spacer.

  if ($*comp_state == "right") {

    """

    <td width="3">

      <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" />

    </td>

    """;

    print_my_components($p);

  }



  # Finish off the table for the body

  """

      <td width="3">

        <img src="http://www.livejournal.com/palimg/component/clear.gif" width="3" height="1" alt="" border="0" />

      </td>

    </tr>

  </table>

  """;



  if($k1Swidth != "") {

    """</td></tr></table>""";

  }



  # End the body section and end the html document

  """

  </body>

  </html>

  """;

}





And the theme layer:


layerinfo "type" = "theme";

layerinfo "name" = "80's Customizations 2/2005";

set lineheight = 18;



function print_free_text(Page p) {





var string k1Mheader1 = "Lovin'";   # title of component



var string k1Mheight1 = "140px";   # height of component



var Color  k1Mborder1 = "#000000"; # bordercolor for images







var Color    k1Mbg1;



var string[] k1Msrc1;



var string[] k1Malt1;



var string[] k1Mtitle1;



var string[] k1Melse1;



var string[] k1Murl1;











# set one



$k1Msrc1[0]   = "http://www.nocturnica.net/lj/love_matt.jpg";



$k1Malt1[0]   = "Matthew";



$k1Mtitle1[0] = "Matthew";



$k1Melse1[0]  = "My <3er";



$k1Murl1[0]   = "http://www.summertimemiles.com/";







# set two



$k1Msrc1[1]   = "http://www.nocturnica.net/lj/love_davey.jpg";



$k1Malt1[1]   = "David Spade";



$k1Mtitle1[1] = "David Spade";



$k1Melse1[1]  = "Blond blue-eyed sarcasm";



$k1Murl1[1]   = "http://www.davidspade.com/";





# copy sets as necessary



# make sure that the index numbers (bolded numbers) are the same in each group



# this program will step thru them in numerical order







# comment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



print_comp_header($k1Mheader1);







# decomment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



# print $comp_header_open; print $k1Mheader1; print $comp_header_close;



"""



<div id="Layer1" style="position:relative; width:100%; height:$k1Mheight1; z-index:1; overflow: auto; overflow-x: hidden;">



<table width="100%" cellpadding="3" cellspacing="0">



""";







foreach var int i (0 .. (size($k1Msrc1) - 1)){



  $k1Mbg1 = ($i % 2 == 0) ? $*comp_bgcolor  :  $*header_bgcolor;



  """



  <tr style="background-color:$k1Mbg1;">



  <td style="text-align:center;">""";



if($k1Murl1[$i] != "") { """<a href="$k1Murl1[$i]">"""; }



  """<img src="$k1Msrc1[$i]" border="0" style="border: 1px solid $k1Mborder1" alt="$k1Malt1[$i]" title="$k1Malt1[$i]" />""";



if($k1Murl1[$i] != "") { """</a>"""; }



  """</td>



  <td style="text-align:left; text-size:1;" ><B>$k1Mtitle1[$i]</B>""";



if($k1Melse1[$i] != "") {"""<br><nbsp><I>$k1Melse1[$i]</I>""";}



"""</td>



  </tr>



  """;



}







"""



</table>



</div>



""";



# comment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



print_comp_footer();





# decomment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



# print $comp_footer;













var string k1Mheader2 = "Current Albums";   # title of component



var string k1Mheight2 = "200px";   # height of component



var Color  k1Mborder2 = "#000000"; # bordercolor for images







var Color    k1Mbg2;



var string[] k1Msrc2;



var string[] k1Malt2;



var string[] k1Mtitle2;



var string[] k1Melse2;



var string[] k1Murl2;











# set one



$k1Msrc2[0]   = "http://www.nocturnica.net/lj/music_80s.jpg";



$k1Malt2[0]   = "Like, ohmigod! The Totally 80's Pop Culture Box Set";



$k1Mtitle2[0] = "The '80s Pop Culture Box";



$k1Melse2[0]  = "Box Set - Various Artists";



$k1Murl2[0]   = "http://www.amazon.com/exec/obidos/tg/detail/-/B000068ZVP/qid=1109546030/sr=8-1/ref=__1/104-6207972-8009509?v=glance&s=music";







# set two



$k1Msrc2[1]   = "http://www.nocturnica.net/lj/music_guster.jpg";



$k1Malt2[1]   = "Guster - Lost & Gone Forever";



$k1Mtitle2[1] = "Lost & Gone Forever";



$k1Melse2[1]  = "Guster";



$k1Murl2[1]   = "http://www.amazon.com/exec/obidos/ASIN/B00001SIEW/qid=1109546138/sr=2-2/ref=pd_ka_b_2_2/104-6207972-8009509";







$k1Msrc2[2]   = "http://www.nocturnica.net/lj/music_bloodhound.jpg";



$k1Malt2[2]   = "Bloodhound Gang - One Fierce Beercoaster";



$k1Mtitle2[2] = "One Fierce Beercoaster";



$k1Melse2[2]  = "Bloodhound Gang";



$k1Murl2[2]   = "http://www.amazon.com/exec/obidos/ASIN/B000000OWJ/qid=1109546211/sr=2-2/ref=pd_ka_b_2_2/104-6207972-8009509";





$k1Msrc2[3]   = "http://www.nocturnica.net/lj/music_beachboys.jpg";



$k1Malt2[3]   = "The Very Best of the Beach Boys - Sounds of Summer";



$k1Mtitle2[3] = "Best of the Beach Boys";



$k1Melse2[3]  = "The Beach Boys";



$k1Murl2[3]   = "http://www.amazon.com/exec/obidos/ASIN/B000093BDX/qid=1109546708/sr=2-1/ref=pd_ka_b_2_1/104-6207972-8009509";





$k1Msrc2[4]   = "http://www.nocturnica.net/lj/music_letitbe.jpg";



$k1Malt2[4]   = "The Beatles - Let It Be";



$k1Mtitle2[4] = "Let It Be";



$k1Melse2[4]  = "The Beatles";



$k1Murl2[4]   = "http://www.amazon.com/exec/obidos/tg/detail/-/B000002UB6/qid=1109546793/sr=1-1/ref=sr_1_1/104-6207972-8009509?v=glance&s=music";







# copy sets as necessary



# make sure that the index numbers (bolded numbers) are the same in each group



# this program will step thru them in numerical order







# comment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



print_comp_header($k1Mheader2);







# decomment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



# print $comp_header_open; print $k1Mheader2; print $comp_header_close;



"""



<div id="Layer1" style="position:relative; width:100%; height:$k1Mheight2; z-index:1; overflow: auto; overflow-x: hidden;">



<table width="100%" cellpadding="3" cellspacing="0">



""";







foreach var int i (0 .. (size($k1Msrc2) - 1)){



  $k1Mbg2 = ($i % 2 == 0) ? $*comp_bgcolor  :  $*header_bgcolor;



  """



  <tr style="background-color:$k1Mbg2;">



  <td style="text-align:center;">""";



if($k1Murl2[$i] != "") { """<a href="$k1Murl2[$i]">"""; }



  """<img src="$k1Msrc2[$i]" border="0" style="border: 1px solid $k1Mborder2" alt="$k1Malt2[$i]" title="$k1Malt2[$i]" />""";



if($k1Murl2[$i] != "") { """</a>"""; }



  """</td>



  <td style="text-align:left; text-size:1;" ><B>$k1Mtitle2[$i]</B>""";



if($k1Melse2[$i] != "") {"""<br><nbsp><I>$k1Melse2[$i]</I>""";}



"""</td>



  </tr>



  """;



}







"""



</table>



</div>



""";



# comment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



print_comp_footer();





# decomment this section if this is in the non-print_free_text section of the page_layout function when using the components on both sides tutorial



# print $comp_footer;



}





function print_profile(Page p) {



  print_comp_header("The Spadechild");

    """

<table cellspacing="0" cellpadding="0" border="0">

<tr>

<td width="50%" align="center">

<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>

<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>

</td>

<td align="center"><a href="http://www.livejournal.com/allpics.bml?user="la80schica"><img src="http://www.livejournal.com/userpic/22383401/338328" alt="Carissa's LJ" width="95" height="95" border="1" vspace="4" class="userpic" /></a></td>

<td width="50%" align="center">

<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>

<div class="shortLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></div>

</td>

</tr>

<tr>

<td colspan="3" class="compContent">

<div><b>User:</b> <span class='ljuser' style='white-space:nowrap;'><a href='http://www.livejournal.com/userinfo.bml?user='la80schica'><img src='http://stat.livejournal.com/img/userinfo.gif' alt='userinfo' width='17' height='17' style='vertical-align:bottom;border:0;' /></a><a href='http://www.livejournal.com/users/la80schica/'><b>la80schica</b></a></span></div>

<div><b>Name:</b> Carissa</div>

<div><b>Nicknames:</b> Rissa, KK</div>

<div><b>Age:</b> 21</div>

<div><b>Location:</b> Baltimore, MD</div>

</td>

</tr>

</table>

    """;

  print_comp_footer();

}







Is there any CSS I can stick in to correct this problem? It looks fine in IE, Firefox is the only other browser I use so I don't know if it's like that in Netscape or Opera or anything. Thanks for any help.

[edit] - I don't know if it helps at all but modifications I'm currently using are: Shrinking & Centering, Additional Components (Listening/Watching to be specific), modified user profile.
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 5 comments