[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 408
  • Last Modified:

Joomla layout issue

I'm fairly new to joomla and i have a spacking issue.

my main menu items don't fit in the menu section and they skip the line.  Please take a look at the attchaed image.  

For me it looks like there is a character limit somwhere in the CSS but with the visual interface is hard to check this  

menu.jpg
0
itconsultant1
Asked:
itconsultant1
  • 4
  • 4
1 Solution
 
bill30Commented:
Its hard to give you exact advice without the source code.  Either post a link or provide the page code.

As for an educated guess.  Im betting your width on your nav section is causing issues.  Either increase the total width of the div, or decrease the width of each individual menu item.
0
 
itconsultant1Author Commented:
This is the default CSS:

@charset "UTF-8";
/* CSS Document */

body {
      margin:0 auto;
      padding:0px;
      background:#ffffff}

#top_contain {
      float:left;
      width:100%;
      background:#e6e6e6 url(../images/seamless_header.jpg) repeat-x top;}

#main_contain{
      width:980px;
      margin:0 auto;
      }

#header {
      width:980px;
      float:left;
      height:114px;
      }

.header_logo {
float:left;
}

#header ul {
      list-style: none;
      margin: 0px 0 0 0;
      padding: 0px 0px 0px 155px;
      width:645px;
      height:114px;
      float:left;
}
#header li {
      float: left;
      padding:0px 0px 0 0;
      background-image:url(../images/nav_bg_left_dot.jpg);
      background-repeat:no-repeat;
      background-position:left;
}
#header li.active{
      float: left;
      padding:0px 0px 0 0;
      background-image:url(../images/nav_current.jpg);
      background-repeat:no-repeat;
      background-position:left;
}
#header li a {
      color: #004787;
      text-decoration: none;
      font-family:Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      font-size:12px;
      height:64px;
      display:block;
      padding:50px 44px 0 18px;
      line-height:64px;      
}

#header li a:hover {
      color: #286dab;
      text-decoration: none;
      font-family:Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      font-size:12px;
      height:64px;
      display:block;
      padding:50px 44px 0 18px;
      line-height:64px;
}




#flash_pic {
float:left;
width:980px;}

#gray_mid {
      width:980px;
      height:41px;
      float:left;
      }
      
.citys {
      float:right;
      width:500px;
      text-align:right;
      }
      
#mid_main {
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#706f6f;
line-height:22px;
width:525px;
padding:20px 20px 20px 20px;
}

#news_right {
      float:right;
      width:325px;
      padding:20px 0;
      text-align:right;
      padding-right:20px;
      }
#news_text {
float:right;
background-color:#FFFFFF;
text-align:left;
padding:15px 15px;
width:225px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#989797;
}

#news_text a{
color:#004787;
font-style:italic;
}

#mid_main_one_col {
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#706f6f;
line-height:22px;
width:940px;
padding:20px 20px 20px 20px;
}

#left_nav {
      float:left;
      width:300px;
      padding:20px 0;
      text-align:left;
      padding-left:20px;
      }
      
#left_nav ul{
      list-style: none;
      padding:10px 15px 10px 15px;
      margin:-3px 0 0 0;
      width:221px;
      float:left;
      background-image:url(../images/left_nav_mid.jpg);
      background-repeat:repeat-y;
      }
      
#left_nav li {
      padding:8px 0px 8px 0px;
      width:191px;
      border-bottom:#929394 dotted 2px;
      margin:0px}
      
#left_nav li a {
      color: #929394;
      text-decoration: none;
      font-family:Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      font-size:12px;
      display:block;
      }
      
#left_nav li a:hover {
      color: #286dab;
      text-decoration: none;
      font-family:Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      font-size:12px;
      display:block;
      }


h1 {
      font-weight:normal;
      font-size:25px;
      line-height:30px;
      color:#004787;
      margin:0 0;
      padding:0;
      }      
h2 {
text-align:left;
padding:0px;
margin:0 0;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#004787;
font-weight:normal;
      }

#footer_contain {
      float:left;
      width:100%;
      background-color:#ffffff;
      background-image:url(../images/footer_boarder.jpg);
      background-position:top;
      background-repeat:repeat-x;}
#footer_main {
      margin:0 auto;
      width:940px;

      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      font-weight:bold;
      color:#929394;
      line-height:22px;
      padding:24px 20px 0 20px;
      }
.footer_left {
      float:left;
      width:300px;}
.footer_right {
      float:right;
      text-align:right;}
      
.footer_right a{
text-decoration:none;
color:#929394;}

.design {
      font-family:"Times New Roman", Times, serif;
      font-size:13px;
      text-transform:uppercase;
      }
      
.footer_right ul{
      float:right;
      list-style:none;
      padding:0px;
      margin:0 0;
      width:400px;}

      
.footer_right li {
      float:right;
      padding:0px 4px;
      margin:0 0;
      border-right:#929394 solid 1px;
      color:#929394;
      text-decoration:none;
      line-height:12px;}

.footer_right li.item35 {
      border-right:none;}


What i noticed also is that some menu items fit in the internet exlrer than in Firefox but still not all of them fit in one line.
0
 
bill30Commented:
I will need at least the body html to give you a definitive answer.
0
Transaction-level recovery for Oracle database

Veeam Explore for Oracle delivers low RTOs and RPOs with agentless transaction log backup and transaction-level recovery of Oracle databases. You can restore the database to a precise point in time, even to a specific transaction.

 
itconsultant1Author Commented:

 // no direct access
 defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ;?>/templates/<?php echo $this->template ;?>/css/default.css" type="text/css" />
</head>

<body>
<div id="top_contain">
<div id="main_contain">
<div id="header"><div class="header_logo"><a href="http://www.rr.com"><img src="templates/interior/images/ranieri_logo.gif" alt="RR" width="200" height="108" border="0" /></a></div>
<!--top nav -->
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<!--end header-->
<div id="gray_mid">

</div>

<div id="mid_main_one_col">

<jdoc:include type="component" />

</div><!--end mid_main-->


</div><!--end main contain-->

</div><!-- end top contain-->
<div id="footer_contain">
<div id="footer_main"><div class="footer_left">

</div>

<div class="footer_right">
<!--footer nav-->
<jdoc:include type="modules" name="footer" style="xhtml" />
<br />&copy; Copyright <?php echo date('Y'); ?>. All rights reserved.</div>
</div>
<!--end footer main-->
</div>

<!--end footer contain-->
</body>
</html>
0
 
bill30Commented:
There are two possible cuplrits, Im not able to tell for sure without the actual site due to Joomla hiding the code.

Im guessing you need to change the width by making the values smaller on this CSS item:

#left_nav ul{
      list-style: none;
      padding:10px 15px 10px 15px;
      margin:-3px 0 0 0;
      width:221px;
      float:left;
      background-image:url(../images/left_nav_mid.jpg);
      background-repeat:repeat-y;
      }
      
#left_nav li {
      padding:8px 0px 8px 0px;
      width:191px;
      border-bottom:#929394 dotted 2px;
      margin:0px}

Open in new window



Either that or change the padding on the following two CSS items to "padding:50px 0px 0 18px;"

#header li a {
      color: #004787;
      text-decoration: none;
      font-family:Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      font-size:12px;
      height:64px;
      display:block;
      padding:50px 44px 0 18px;
      line-height:64px;      
}

#header li a:hover {
      color: #286dab;
      text-decoration: none;
      font-family:Arial, Helvetica, sans-serif;
      text-transform:uppercase;
      font-weight:bold;
      font-size:12px;
      height:64px;
      display:block;
      padding:50px 44px 0 18px;
      line-height:64px;
}

Open in new window


You are running out of room and that is causing the menu items to not go as planned.
0
 
itconsultant1Author Commented:
thanks
0
 
itconsultant1Author Commented:
It works now but what it's wired about it it works on all the browsers except IE9
0
 
bill30Commented:

Clear your cache.  It may not be fully reloading.

If that doesnt work...

Do you have compatibility mode turned on?  Try changing that to what it is not.
0

Featured Post

Get your Conversational Ransomware Defense e‑book

This e-book gives you an insight into the ransomware threat and reviews the fundamentals of top-notch ransomware preparedness and recovery. To help you protect yourself and your organization. The initial infection may be inevitable, so the best protection is to be fully prepared.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now