• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 411
  • 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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

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