Learn VBA & Macros in 1 Week!

CSS - Css In Joomla Cuts Text In Ie In Half

Full Excel VBA Course - Beginner to Expert

Css In Joomla Cuts Text In Ie In Half	View Content

Hi All

I used Joomla to design a really simple website for someone. I currently have the problem where my text, with <h2> tag, in IE, the bottom bit of the text is cut off. For instance, a 'g' will not have its bottom 'loop'. So the text is cut off horizontally, not vertically. Works fine in Firefox.

Using IE 's web development toolbar, I narrowed it down to the H2 tag, which is on a CSS file in Joomla, there are more tags nested within the <h2> tag, but they seem ok, as they are only font tags. Here is the css code of the Joomla template.

Code:

h2, .contentheading { 	
padding: 0; 	
font-family: Verdana, Geneva; 	
font-size: 1.3em; 		
font-weight: bold; 	
vertical-align: text-top; 	
color: #333; 	
text-align: left; 	
width: 100%; }

Any idea how to fix such a problem?

Full Excel VBA Course - Beginner to Expert

Similar Tutorials

Print Preview Cuts Off My Page

Perspective Half Right

Headache And A Half...

Hover Works Half

Link Over Styling - Half Way :s

Z-index Half Way Working In Ff

Colouring Half A Table Cell...

Half Page Height Divs

Half Of Blog Template *disappearing* In Ie6 And 7

Netscape Pc - Css - Images Chopped In Half!

Overflow:hidden Causing My Divs To Be Cut In Half?

Ie Problem...doesn't Apply Css To Half Of Website

Need Help With Joomla Css Template

Css Suckerfish On Joomla

Nav Buttons In Cms Joomla

Css Problem Joomla 1.5.20 + Ff??

Some Joomla Theme Positioning..

Get Rid Of Overhang On Joomla Template

Designing A Site For Joomla

Please Help Me With A 3 Column Joomla Css Template

Learn VBA & Macros for Excel in 1 Week!

Print Preview Cuts Off My Page

Similar Tutorials

I noticed that in IE6 when I go to print, or even look in print preview, it cuts off the right side of my page. Is there any code to avoid that? Or even any tips?

Perspective Half Right

Similar Tutorials

I'm trying to achieve the effect of flipping an element down. I can get it to flip down but I want to add perspective in order to have a 3D effect. I can get perspective to work but the second half of the transformation is what I want to happen from the start, not just half way through.

A lot of things I'm trying makes it go up and then down and that's not what I'm after.

Code:

.flip {
	-webkit-animation: flipDown 5000ms 1 linear;
	-webkit-transform-style: preserve-3d;
	-webkit-transform-origin: bottom center;
}

@-webkit-keyframes flipDown {
	0%    {
		-webkit-transform: rotateX(0deg);
	}
	50%   {
		-webkit-transform: rotateX(45deg);
	}
	100%  {
		-webkit-transform: rotateX(90deg) perspective(900);
	}
}

So I know that the perspective is only being transformed in the frames between the 50% and 100% marks but if I add an initial or perspective the the other keyframes it'll either jump up and then go down or just go straight down as if I didn't have perspective in there.

Any help?

Headache And A Half...

Similar Tutorials

So I came up with this lovely design for the company I'm working for, because they're website now is just utter crap. I figured instead of coding my usual way (a mess and unvalidated) I'd start off making it as clean and css-friendly as possible. I've run into some major issues, some common and some not. If any of you could help me, I would be extremely grateful.

My main problem is my issue with internet explorer. I've positioned everything to match up perfectly in Firefox, the site looks great and is aligned fairly well. However, when the site hits IE, everything shifts a couple pixels and throws everything off. Anyone know why this is happening? There is also a gap at the top of the page in IE, which isn't present in firefox.

I also can't figure out how to pus the footer to the bottom. I wanted another footer that stretched the whole page at the bottom (similar to the top), with a sort of 'prefooter' on top of it. I can't figure out how to just push a regular footer to the bottom, and I've tried all the fixes I can find online. Any idea why?

Here is the site:
Code:

http://www.chromaticstudios.net/AVT/

Hover Works Half

Similar Tutorials

Link Over Styling - Half Way :s

Similar Tutorials

Hi.

Ive been working on a theme I have a navbar with links on it and a background image. When you hover, you get a different background image on that section of the navbar.

Im trying to style it like this:

This is what it is currently like:

This is my current css:
Code:

#nav li {
	float: left;
	border-right: 0px solid #d5d5d5;
	text-align: center;
}

#nav li.over a, #nav a:hover, #nav a:active, #nav a:focus, #nav a.over {
	color: #FFFFFF;
	border-color: #2F2F2F;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
}

#nav li.active a {
	color: #FFFFFF;
	font-style:bold;
	background: url(../images/grad_d1.gif) repeat-x top #0088CC;
	text-align: center;
	align: center;
}

This is a link: http://toyota.identityprojects.co.uk

Everything Ive tried seems to give bad results. Initally I tried putting width 75% and height 30px, centrally and vertically aligning the red gradient, but this seemed to break the whole menu and im sure its a bad way of doing it.

Can anyone help me out with this, ive wasted ages on this!

Z-index Half Way Working In Ff

Similar Tutorials

I have 3 div's in a container, all with the same top and left coordinates width and hieght vary according to content,

z-index's 1 & 2 show and hide as designed at the proper coordinates, z-index 3 shows below and out side of the container?

I have attached a doc with screen shots

layer definitions:
Code:

#projects{
    position:absolute;
    top: 400;
    left: 600;
    margin-left:400px;
    margin-top:30px;
    padding-top:30px;
    padding: 10px;
    height: auto;
    width: 300px;
    z-index: 1;
    visibility: visible;
}
#DBApps{
     position:absoute;
     top: 400;
     left: 300;
     margin-left:400px;
     margin-top:30px;
     padding-top:30px;
     padding: 10px;
     height: auto;
     width: 400px;
     z-index: 2;
     visibility: hidden;

}
#resources{
     position: absolute;
     top: -200;
     left: 300;
     margin-left:400px;
     margin-top:30px;
     padding-top:30px;
     padding: 10px;
     height: auto;
     width: 300px;
     z-index:3;
     visibility: hidden;

}

Any and all suggestions would be greatly appreciated.

Colouring Half A Table Cell...

Similar Tutorials

I am not sure the best way to colour half a table cell?

Basically we have a booking system with a table that shows booked days. On the date a booking starts I want to make the right half of the table cell (actually I would prefer to use a triangle on the top right - a diagonal half) the correct colour, and the same principle applies to a departure date. I was going to just use two 50% divs for the left/right split. But the diagonal split is a bit trickier. Should I just use 2 100% height/width divs and apply a different graphic to each?

Half Page Height Divs

Similar Tutorials

Hey everyone,

I'm having troubles with some DIVs. I'm trying to divide a page into 4 equal sections. If I remove the doctype declaration, it looks right in Firefox 3.5.2 In ie it is all sorts of crazy. 100% height of the inner objects seems to be referencing the window height and not the parent elements height. I'm more concerned about Firefox anyway. I expect IE to require some hacks.

If I set an absolute size to the body, in px, everything works fine. But if I have the body set to %, things shrink. I tried creating a wrapper div and setting it's height/width to 50% but that didn't work either.

I tried to find a solution on kravvitz and bon rouge's sites but I didn't find anything that was 100% fluid.

Any ideas?

HTML4Strict Code:
Original - HTML4Strict Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> body{ width:100%; height:100%; padding:0; margin:0; color:#ffffff; background-color:#000000; } object{ float:left; clear:both; width:80%; height:100%; background-color:#cccccc; } .section{ float:left; clear:none; width:48%; height:48%; margin:1%; background-color:#333333; display:block; position:relative; } .panel{ float:left; clear:none; width: 16%; height:96%; margin:2% 2%; background-color:#cccccc; } #container{ float:left; clear:both; width:100%; height:100%; min-height:100%; background } </style> </head> <body> <div id="container"> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> <div class="section"> <object data="http://www.google.ca"> </object> <div class="panel"> <a href="#"> test </a> </div> </div> </div> </body> </html>

  

  


 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


  


 <html>


 <head>


     <style>


 body{


     width:100%;


     height:100%;


     padding:0;


     margin:0;


     color:#ffffff;


     background-color:#000000;


 }


 object{


     float:left;


     clear:both;


     width:80%;


     height:100%;


     background-color:#cccccc;


 }


 .section{


     float:left;


     clear:none;


     width:48%;


     height:48%;


     margin:1%;


     background-color:#333333;


     display:block;


     position:relative;


 }


 .panel{


     float:left;


     clear:none;


     width: 16%;


     height:96%;


     margin:2% 2%;


     background-color:#cccccc;


     


 }


 #container{


     float:left;


     clear:both;


     width:100%;


     height:100%;


     min-height:100%;


     background


 }


     </style>


 </head>


 <body>


     <div id="container">


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


         <div class="section">


             <object data="http://www.google.ca">


             </object>


             <div class="panel">


                 <a href="#"> test </a>


             </div>


         </div>


     </div>


 </body>


 </html>

Half Of Blog Template disappearing In Ie6 And 7

Similar Tutorials

Looks fine in all other browsers (of course).

http://sports.theedgenews.com

For some strange reason the last half of the blog blows up in IE6 and IE7. It simply does not show up.

Why we don't know. When looking at the source code, it "gets" the whole page, it's just the last half is not rendered.
A copy of the css is here.
http://sports.theedgenews.com/css.css

If anyone has any ideas at all on what to do, it would be greatly appreciated.

Btw this is a design not made by me. I have become pretty familar w/ it for the blog but I have not written it.

Thanks for any help.

Netscape Pc - Css - Images Chopped In Half!

Similar Tutorials

I'm having some trouble with a CSS page that works perfectly fine in IE Mac/PC, Safari, and Netscape on Mac, but goes wonky on Netscape 6 and 7.1 for PC.

Basically the top navigation, consisting of three images, gets chopped in half - only the bottom half of the images is displayed. The top half is simply blank. There's enough space for the rest of the image in the navbar. If I put a background-color: definition on the DIV that handles the tab, it stops where the image stops, cut off halfway up.

If I RESIZE the image, using either CSS or HTML, it displays fine (but, of course, at the wrong size!) This leads me to suspect that it's some kind of refresh bug in Netscape... but I haven't found anyone else with the same problem, so maybe it's just somethin' I did.

Here's the HTML that handles this part of the page:

Code:

<div id="nav2">
  	<div id="nav-secondary-title"><img src="images/title-subpage.gif" width="127" height="20" /></div>
  	<div id="nav-secondary">
     		<div class="tab"><a href="#"><img src="images/studentstab.gif" width="77" height="27" class="navimage" /></a></div>
	     	<div class="tab"><a href="#"><img src="images/fullartstab.gif" width="100" height="27" class="navimage" /></a></div>
	     	<div class="tab"><a href="#"><img src="images/studentstab.gif" class="navimage" /></a></div>
	  </div>
</div>

And here's the relevant CSS:

Code:


	#nav2 {							/* nav bar for secondary pages */
		border-top: 1px solid #BD7445;
		border-left: 1px solid #BD7445;
		border-bottom: 1px solid #2D2A28;
		border-right: 1px solid #2D2A28;
		height: 27px;
		margin:0px; padding:0px;
		z-index: 0;
		background: #A73600;
		}

	#nav-secondary-title {  /*placement of title on secondary pages */
		display: inline;
		float: left;
		height: 20px;
		margin: 0px;
		z-index: 1;
		padding:2px 10px 0px 10px;
	}

	#nav-secondary {  /* placement of main nav on secondary pages */
		float: right;
		margin: 0px 10px 0px 10px;
		height: 27px;
		padding: 0px;
		z-index: 1;
	}

	.tab {
		position: relative;
		top: 2px;
		display: inline;
		padding: 0px;
		margin: 0px;
	}
	img.navimage {
		border: 0px; margin: 0px; padding:0px 6px 0px 6px;
	}

Thanks - any help would be much appreciated!

Overflow:hidden Causing My Divs To Be Cut In Half?

Similar Tutorials

I had a problem earlier with my containing DIV pushing too wide which was resolved by adding "overflow:hidden" to my containing DIV. The problem is now that it's cutting off the sides of one of my graphics.

At the bottom of my page, I have a link which you can click that will (through the magic of javascript) reveal divs on either side of my main content (the link at the bottom of the page says "reveal sea creature")

When overflow:hidden was NOT on my containing DIV, I had the problem with all the extra space, but these revealing divs worked fine. Now that I add overflow:hidden, the extra space is gone, but the divs are cut off.

I've tried pushing everything to the left which seems to make the DIV on the right work fine, but the left is still a problem. I realize this doesn't make sense without code, so here's the site.

www . deepwaterchurch . com

Thanks so much.

Ie Problem...doesn't Apply Css To Half Of Website

Similar Tutorials

This is messed up....it's not the javascript cause i deleted it and it still continued...it's not the includes cause i put everything on one file....it's not the <link> cause i put it in <style> tags and it still continued

http://66.195.240.220/~majdkgf/cip/

it works PERFECT in Firefox...not in Internet Explorer

Need Help With Joomla Css Template

Similar Tutorials

Hi,

just to explain I know absolutely nothing about css. I can barely manage to change fonts, so please be gentle with me. I am quite capable of following straight forward instructions though so if you can help it would be much appreciated. I have a website (URL address blocked: PM me to get URL)/joomla that I'm playing with. The submenu's are where I have an issue - they appear exactly as I want when a menu item is selected (indented and normal font weight) however when a sub menu item is selected the indent dissappears and it treats it like a main menu item. Below is the code where I think the issue is.
I've been googling like mad to see if anyone else has the same problem with this particular template but no joy. On a seperate note if there are any joomla template experts out there I would be happy to pay a reasonable fee to make some other modifications (basically the padding and position of the main column is all over the place dependent on the content that is displayed). I'd also like to upgrade this to joomla 1.6 at some stage. Enquired with a couple of "professional" Joomla developers and recieved no reply. I assume my requirements are too small for them to consider, and that they are just too rude to reply to say so.

/*LEFT COL LINK*/
#leftcolumn ul.menu li a, #leftcolumn ul.menu li a:link,
#rightcolumn ul.menu li a, #rightcolumn ul.menu li a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
color: #666666;
font-weight: bold;
}

#leftcolumn ul.menu li a:hover, #rightcolumn ul.menu li a:hover {
color: #4CAFC6;
text-decoration: none;
}

/*LEFT COL CURRENT LINK*/
#leftcolumn ul.menu li#current a, #leftcolumn ul.menu li#current a:link,
#rightcolumn ul.menu li#current a, #rightcolumn ul.menu li#current a:link {
line-height: 18px;
padding: 0 0 0 8px;
text-decoration: none;
color: #666666;
font-weight: bold;
font-size: 11px;
background: url(../images/menu_row.jpg) center left no-repeat;
margin: 0;
height: 18px;
}

#leftcolumn ul.menu li#current a:hover, #rightcolumn ul.menu li#current a:hover {
color: #4CAFC6;
text-decoration: none;
}

/*LEFT COL SUB LINK*/
#leftcolumn ul.menu li#current ul li a, #leftcolumn ul.menu li#current ul li a:link {
text-decoration: none;
color: #666;
margin: 0 0 0 6px;
font-size: 11px;
background: url(../images/submenu_row.jpg) center left no-repeat;
font-weight: normal;
display: block;
line-height: 18px;
padding: 0 0 0 18px;
border: none;
height: 18px;
}

#leftcolumn ul.menu li ul li#current a, #leftcolumn ul.menu li ul li#current a:link, #leftcolumn ul.menu li ul li#current a:visited, #leftcolumn ul.menu li ul li#current a:hover {
font-size: 11px;
margin: 0 0 0 6px;
padding: 0 0 0 18px;
text-decoration: none;
border: none;
color: #333;
background: url(../images/submenu_row.jpg) center left no-repeat;
height: 18px;
line-height: 18px;
}
/*SUBMENU POSITION*/
#leftcolumn ul.menu li#current ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li {
margin: 0;
padding: 0;
}

/*CURRENT SUBMENU POSITION*/
#leftcolumn ul.menu li ul {
margin: 0;
padding: 0;
}

#leftcolumn ul.menu li#current ul li a:hover {
color: #333;
}

#leftcolumn ul.menu li ul, #rightcolumn ul.menu li ul {
list-style: none;
}

Css Suckerfish On Joomla

Similar Tutorials

I'm struggling with css on my joomla site. I'm trying to develop a dropdown that can have two levels to it. I've got something working with the following css but I have no idea what to change to line the menus up.
Code:

/* =======================================
Top Menu aka Main Menu
======================================= */
.moduletable_topmenu{
   padding:0;
   color: #333;
   height: 30px;
   margin: 0;
   width: 500px;
   font-size: 90%
}

.moduletable_topmenu h3 {
   background:#666;
   color:#fff;
   padding:0.25em 0;
   text-align:center;
   font-size:1.1em;
   margin:0;
}

.moduletable_topmenu ul{
   list-style: none;
   margin: 0;
   padding: 0;
}

.moduletable_topmenu li{
   margin: 0px 15px 0px 0px;
   float: left;
}
.moduletable_topmenu li ul {
   position: absolute;
   width: 135px;
   left: -999em;
   border: 1px solid #474748;
   border-bottom: none;
   top: 22px;
}
.moduletable_topmenu li:hover ul {
   left: auto;
}
.moduletable_topmenu li ul li {
   width: 135px;
   padding: 0;
   border-bottom: 1px solid #474748;
}

.moduletable_topmenu li a{
   display: block;
   padding: 5px;
   background-color:#fff;
   color: #000;
   font-weight: bold;
   text-decoration: none;
}
html>body .moduletable_topmenu li a {
   width: auto;
}

.moduletable_topmenu li ul li a {
   width: 125px;
   background-color: #221f20;
   color: #fff;
   /* --- 
   filter:alpha(opacity=80); 
   -moz-opacity: 0.8; 
   opacity: 0.8;*/
}


.moduletable_topmenu li a:hover,a#active_menu:link,a#active_menu:visited{
   color: #e22f00;
   text-decoration: none;
   /* --- 
   filter:alpha(opacity=100); 
   -moz-opacity: 1.0; 
   opacity: 1.0;*/
}

.moduletable_topmenu li ul li a:hover {
   background-color: #e22f00;
   color: #fff;
   background: url(../images/top_link_bg2_on.png) repeat-y top left;
}

.moduletable_topmenu li:hover ul, .moduletable_topmenu li.sfhover ul {
   left: auto;
}


.moduletable_topmenu ul li.active a {
   color: #038fd9;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active a {
   color: #038fd9;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active a:hover {
   color: #e22f00;   
}

.moduletable_topmenu li.parent.active ul li a {
   color: #fff;
   text-decoration: none;
}
.moduletable_topmenu li.parent.active ul li a:hover {
   color: #fff;
   text-decoration: none;
}

I am currently using IE 7 and my test site is located at http://vcob.org/2008test if you want to see the menu in action go to that site and mouse over the "About Joomla" link in the menu across the top of the page. You should notice how the sub-menus stack on top of each other and I can't get them to line up. Any help would be so appreciated as I need to get this to work and I can't seem to get anyone at Joomla to help me, thanks in advance.

Nav Buttons In Cms Joomla

Similar Tutorials

I'm trying to do custom active buttons in a Joomla horizontal menu. But they don't align correctly with the text. I assume it's because the pseudo element with the button is an absolute inside a relative positioned section. The only way I can move it is to fiddle with padding on the relative section. But that fixes some buttons and messes up others.
I've tried a lot of other things but they move the whole element and not just that background image.

Does anyone know a way to do this?

Here's the code:

Code:

ul.frc-hmenu>li>a
{
   position: absolute;
   display: block;
   height: 23px;
   cursor: pointer;
   text-decoration: none;
   color: #4A4A4A;
   padding:3px 12px;
   line-height: 23px;
   text-align: center;
}
/*change from absolute positioning*/
ul.frc-hmenu>li>a:before, ul.frc-hmenu>li>a:after
{
   position: absolute;
   display: block;
   content:' ';
   top: 0;
   bottom:0;
   z-index: -1;
   overflow: visible;
  background-image: url('../images/menuitem.png');


}

Css Problem Joomla 1.5.20 + Ff??

Similar Tutorials

Some Joomla Theme Positioning..

Similar Tutorials

I dunno if this is the right spot but I am stuck. Here is my issue

http://fifafanatics.com/league/index.php?option=com_joomleague&func=showRanking&p=1

is my site. as you can see the theme the content in the right is too close to the left. I want to "center". If you click on the forum you will see the real issue. I need that forum to stretch out. I feel like these are stuck in a container but I don't even know where to look. Let me post some code. this is the .css file. theres a html file as well if needed I can post that.

Code:

body {
	overflow-x : hidden;
	overflow: -moz-scrollbars-vertical;	
}
.body {
	color: #000000;
	margin: 0 0 0 0;
	padding: 0px;
	font-size: 11px;
	font-family: "Trebuchet MS";
	background: #575757;	
}

.all {
	width:970px;
	margin:0 auto;
	padding:0;
	background: url(../images/bg_page.gif) repeat-y;
}


#logo {
	background: transparent url(../images/bg.jpg) no-repeat top center;
	margin:0 auto;
	width: 100%;
	padding:0;
	height:119px;
	text-align:left;
	vertical-align:middle;
}
#logo a {
	margin:20px 0 0 75px;
	line-height:80px;
	font-family:"Trebuchet MS";
	font-size:23px;
	color:#FFFFFF;
}
.topmaincol {
	width:100%;
	height:30px;
}
/* --- nav --- */
.div {
}
#menu{
	position:relative;
	height:58px;
	color:#E0E0E0;
	background: url(../images/topmenu_bg.jpg) repeat-x;
	width:966px;
	font-size:13px;
}

#menu .menuc {
	margin: 0px auto;
	width: 966px;
	font-family:"Trebuchet MS";
	
}

#topnavi{
	position:relative;
	height:58px;
	font-size:12px;
	font-weight: normal;
	font-family:"Trebuchet MS";
	background: url(../images/topmenu_bg.jpg) repeat-x top left;
	padding:0 0 0 5px;
}

#topnavi ul{
	margin:0;
	padding:0;
	list-style-type:none;
	width:auto;
	float:left;
}

#topnavi ul li{
	display:block;
	float:left;
	margin:0 1px;
}

#topnavi ul li a{
	
	display:block;
	float:left;
	color: #FFFFFF;
	text-decoration:none;
	padding:0 0 0 11px;
	height:52px;		
}

#topnavi ul li a span{
	font-size:12px;
	padding:17px 11px 0 0;
	height:52px;
	float:left;
}

#topnavi ul li a:hover{
	font-size:12px;
	color: #000000;
}

#topnavi ul li a:hover span{
	font-size:12px;
	display:block;
	width:auto;
	cursor:pointer;
}

#topnavi ul li a.current,#topnavi ul li a.current:hover{
	color: #FFFFFF;
	background: url(../images/topmenu_left.jpg) no-repeat top left;
	line-height:350%;
}

#topnavi ul li a.current span{
	display:block;
	padding:0 10px 0 0;
	width:auto;
	background: url(../images/topmenu_right.jpg) no-repeat top right;
	height:52px;
}
/* --- end nav --- */

/* /////////////////////////////////////////////////////////////////////////// */
form {display:inline;}
hr {
  color            : #999999;
  height           : 1px;
  width            : 100%;
}
.back_button {
  color            : #999999;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  font-weight      : normal;
  padding-bottom   : 3px;
  margin-right     : 4px;
  float            : right;
  line-height      : 20px;
}
.button {
  font-size        : 11px;
  color            : #333333;
  border           : 1px solid #999999;
  margin           : 3px;
  background-color : #EDEDED;
  padding          : 1px;
  cursor           : pointer;
}

.inputbox {
 color        : #000000;
 background   : #ffffff;
 border       : 1px solid #cccccc;
 margin       : 3px;

}

table,td,div {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  margin:0;
}

p {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
}
strong {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
}
i {
  color            : #000000;
  font-family      : Verdana,  Helvetica, sans-serif;
  font-size        : 10px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
  font-style: normal;
}
em {
  color            : #000000;
  font-family      :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
  font-size        : 11px;
  line-height      : 16px;
  padding:4px 0px 4px 0px;
  margin:0;
  font-style: normal;  
}

/* /////////////////////////////////////////////////////////////////////////// */


.leftcol {width:200px;padding:10px 5px 10px 10px;}
.maincol {width:525px;padding:10px 5px 10px 5px;}
.rightcol {width:200px;padding:10px 10px 10px 10px;}
.pollstableborder td{ text-align:left}

#container {
	width:970px;
	height:100%;
	margin: 0px auto;
	padding:0;
	text-align: left;
}


/* -------------------------------------------------------------------------------------------------------------- */
table.moduletable {
	margin             : 0 0 20px 0;
	width              : 100%;
    font-family        :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
	font-size          : 10px;	
}

table.moduletable th {
      
    font-family        :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;
	font-size          : 11px;
	font-weight        : bold;
	text-align         : left;
	height			   : 34px;
    color              : #FFFFFF;
	padding            : 8px 0 0 13px;
    text-indent        : 10px;
	line-height        : 15px;
	background		   : #fff url(../images/moduletable_th_bg.jpg) no-repeat left top;
	}

table.moduletable td {
    padding-top: 2px;
}
table.moduletable td table{
   width              : 100%;
}


.sectiontableheader {
  font-size        : 10px;
  font-family        :"Trebuchet MS", Arial, Verdana,  Helvetica, sans-serif;  
  font-weight      : normal;
  text-transform   : uppercase;
  letter-spacing   : 1px;
  color            : #333333;
  background       : #ffffff; 
  padding          : 1px;
}


.sectiontableentry1 {
  vertical-align   : top;
  padding          : 3px;
  background       : #D9D9D9;
  border-bottom    : 1px solid #ffffff;
  line-height      : 25px;

}
.sectiontableentry2 {
  vertical-align   : top;
  padding          : 3px;
  border-bottom    : 1px solid #ffffff;
  background       : #EEEEEE;
  line-height      : 25px;
}
a.mainlevel  {
  display           : block;
  width             : auto;
  margin            : 1px 0;
  padding           : 0;
  font-size         : 12px;
  background        : none;
  text-indent       : 10px;
  width				: 200px;
}

a.mainlevel:link, a.mainlevel:visited {
  display          : block;
  font-size        : 11px;
  background       : transparent url(../images/mainlevel.gif) repeat-x right bottom;
  font-weight      : normal;
  padding          : 4px 0 4px 0;
  color            : #000000;
  text-indent      : 11px;
}
a.mainlevel:hover {
  background       : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
  font-size        : 11px;
  font-weight      : normal;
  color            : #D01C0D;
  text-decoration  : none;
  text-indent      : 11px;
}
#active_menu {
  color            : #D01C0D;
  background       : transparent url(../images/mainlevel_h.gif) repeat-x right bottom;
}
a#active_menu:hover {
  color            : #333333;
}

a:link, a:visited {
  font-size        : 11px;
  color            : #333333;
  text-decoration  : none;
  font-weight      : bold;
}
a:hover {
  font-size        : 11px;
  color            : #D01C0D;
  text-decoration  : none;
  font-weight      : bold;
}
a.category:link, a.category:visited {
  font-size        : 11px;
  font-weight      : bold;
}
a.readon:link, a.readon:visited {
  color            : #999999;
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/readon.gif) no-repeat;
  white-space      : normal;
  font-weight      : bold;
  padding          : 1px 0 3px 18px;
  float            : right;
  line-height      : 10px;
  text-decoration  : underline;
}
a.readon:hover {
  color            : #D01C0D;
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  background       : url(../images/readon.gif) no-repeat;
  white-space      : normal;
  font-weight      : bold;
  padding          : 1px 0 3px 18px;
  line-height      : 10px;
  text-decoration  : underline;
}
ul {
  margin           : 2px;
  padding-left     : 10px;
  list-style       : none;
}
li {
  
  line-height      : 15px;
  padding-left     : 10px;
  padding-top      : 0;
}
table.contenttoc {
  border           : 1px solid #dcdcdc;
  background       : #F1F1F1;
  padding          : 5px;
  margin-left      : 2px;
  margin-bottom    : 2px;
}
.pagenavcounter {
  font-size        : 10px;
  color            : #4da338;
}
.pagenavbar {
  border-top       : 1px solid #999999;
  padding          : 2px;
}
.pagenav {
  font-weight      : bold;
  }
a.pagenav:link, a.pagenav:visited {
  font-size        : 11px;
  color            : #999999;
  text-decoration  : none;
}
a.pagenav:hover {
  font-size        : 11px;
  color            : #3333ff;
  text-decoration  : none;
}
.date {
  font-size        : 10px;
  font-weight      : bold;
  color            : #707070;
  padding-right    : 12px;
}
.small {
  font-size        : 10px;
  color            : #333333;
}
.smalldark {
  font-size        : 10px;
  color            : #333333;
}
.createdate, .modifydate {
  float            : right;
  font-size        : 10px;
  color            : #666666;
  font-weight      : bold;

  
}
.content_vote {
  font-size        : 10px;
  height           : 22px;
  padding-top      : 2px;
  padding-bottom   : 2px;
}
.content_rating {
  font-size        : 10px;
  color            : #999999;
}

.pway {
	margin:0 auto;
	text-align:left;
	width:970px;
	height:18px;
	padding:5px 0 0 0 ;
	background:#575757;
}
.pathway {
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  font-size        : 11px;
  color            : #D01C0D;
  padding-left     : 12px;
}
a.pathway:link, a.pathway:visited {
  font-family      :"Trebuchet MS", Arial, Verdana, Helvetica, sans-serif;
  color			   : #FFFFFF;
  font-size        : 11px;
  padding-left     : 0;
}
a.pathway:hover {
  color:#efefef;
  font-size        : 11px;
  padding-left     : 0;
}
table.content{
  width            : 100%;
  padding          : 0;
  border-collapse  : collapse;
  border-spacing   : 0;
  margin-bottom    : 10px;
}
table.contentpane {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
}
table.contentpaneopen {
  width            : 100%;
  border-spacing   : 0;
  padding-left     : 5px;
  padding-right    : 5px;
  margin-bottom    : 5px;
}
.poll {
	color : #333333;
	line-height : 12px;
	font-weight: normal;
      
}

.pollstableborder{
  border-color     : #999999;
}
.contentheading,.componentheading {
  width            : 90%;
  font-size        : 12px;
  font-weight      : bold;
  line-height      : 16px;
  text-transform   : uppercase;
  text-align       : left;
  text-indent      : 0;
  color            : #D01C0D;
  padding          : 1px;
  margin           : 3px 0px;
  }


.ontab {
  border-left      : 1px solid #666666;
  text-align       : center;
  font-weight      : bold;
  color            : #333333;
  padding          : 5px;
  cursor           : pointer;
  line-height      : 30px;
}
.offtab {
  border-left      : 1px solid #666666;
  text-align       : center;
  color            : #999999;
  font-weight      : normal;
  padding          : 5px;
  cursor           : pointer;
  line-height      : 30px;
}
.tabpadding {
 border-left       : 1px solid #666666;
}
.col {
   vertical-align   : top;
   background       : #ffffff;
   padding-top: 5px;
   

}

.contentdescription { 
  width          : auto !important;
  margin         : 0;
  padding        :  0;
  padding-top    : 5px;
  text-align     : left;
}

td.top1{
margin: 0;
padding:  0;
height: 28px !important;
height: 28px;
padding-top:  2px !important;
padding-top:  3px;
background		: url(../images/shadow.jpg) #f1f1f1 repeat-x top;
}
table.top2{
background : #ffffff; 
}

.searchbox {
  margin           : 0;
  padding          : 0;
  margin-top       : 13px;
  margin-left      : 10px;
  width            : 130px;
  font-size        : 11px;
  color            : #707070;
  border           : 1px solid #cccccc;
  padding          : 2px !important;
  padding          : 1px;
  background       : none;
     }

.sublevel {
   font-family      :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size        : 10px;
   font-weight      : normal;
   color            : #999999;
   margin-top		: 10px;
}
a.sublevel:link, a.sublevel:visited {
   font-family      :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size        : 10px;
   font-weight      : normal;
   color            : #999999;
   padding    	    : 5px 1px 3px 5px;
   text-decoration	: none;
}
a.sublevel:hover {
  color            : #D01C0D;
  text-decoration  : none;
}
a.sublevel#active_menu  {
	background      : transparent;
	color           : #ff6600;
	border          : 0;
      
}
a.toclink:link, a.toclink:visited {
   font-family      :"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
   font-size        : 10px;
   font-weight      : normal;
   color            : #999999;
   padding    	    : 5px 1px 3px 5px;
   text-decoration	: none;
}
a.toclink:hover {
  color            : #D01C0D;
  text-decoration  : none;
}

td.logoheader {
  margin: 0;
  padding:  0;
  background     : url(../images/header.jpg)  no-repeat bottom;
  height         : 65px;
  width          : 770px;
 }
td.topnav {
  margin : 0px;
  padding:  0px;
  background     : url(../images/bg_top.jpg) repeat-x top left;
  height         : 42px;
  width          : 770px;
  
 }

td.bgline {
  margin : 0;
  padding:  0;
  background     : url(../images/s.gif) repeat-y;
  width          : 7px;
 }


 #mainlevel-nav {
  font-size        : 11px;
  list-style       : none;
  padding          : 0;
  margin           : 0;
  margin-left      : 1px;
 
}

#mainlevel-nav li {
  float            : right;
  display          : block;
  list-style       : none;
  background-image : none;
  padding-left     : 2px;
  padding-right    : 2px;
  margin           : 0;
  width            : auto !important;
  font-size        : 11px;
  line-height      : 28px;
  white-space      : nowrap;
  border-left      : 1px solid #cccccc;

}
#mainlevel-nav li a {
  
  padding-left     : 10px;
  padding-right    : 10px;
  font-size        : 11px;
  color            : #000033;
  text-decoration  : none;
  
}

#mainlevel-nav li a:hover {
  font-size        : 11px;
  color            : #999999;
    
}

.blog_more {
margin   : 10px 0 7px 7px;
}
.buttonheading {
padding  : 0 2px;
}

.mosimage {
  border     : 1px solid #dedede;
  margin     : 5px;
  padding-top:  3px;
  background:#FFFFFF;

}

.mosimage_caption {
  margin-top: 3px;
  padding   :  2px;
  color     : #000066;
  font-size : 10px;
  background: #f1f1f1;
}

/* -------------------------- */
.footer_bg {
	width:970px;
	background:#575757 url(../images/footer_bg.jpg) no-repeat left top;
	color:#FFFFFF;
	padding:6px 0px 0 0;
	height:43px;
	text-align: center;
	margin:0px;
}
.footer {
	color:#fff;
	padding:0;
	margin:0 0 10px 0;
}
.footer div, .footer div a, .footer div a:visited{
	color:#fff;
}

Get Rid Of Overhang On Joomla Template

Similar Tutorials

I am using a modified Joomla template for this site - (birminghamfiberguild . org) I need to simply nudge over the menus and the middle content to avoid the couple of pixel overhang going on, on the right. I have looked at it using Firebug and nothing I do seems to do the trick.

I'm doing this site for free for my non-profit org. I'd be appreciative of any help.

Designing A Site For Joomla

Similar Tutorials

Please Help Me With A 3 Column Joomla Css Template

Similar Tutorials

hello community... i would like to humble ask for anyone's help on this one... i need to add a right column to this template to make it a 3 column joomla template. but since i dont know css, i really dont know what to do. please help me. i have privided the code below.

Here is the index.php

Code:


<?php
/**
 * @copyright	Copyright (C) 2005 - 2008 Open Source Matters. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

defined('_JEXEC') or die('Restricted access');



?>
<?php echo '<?xml version="1.0" encoding="utf-8"?'.'>'; ?>
<!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; ?>" dir="<?php echo $this->direction; ?>" >
<head>
	<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/layout.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template.css" type="text/css" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/joomla.css" type="text/css" />
	<!--[if lte IE 6]>
		<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/getirshelp/css/template_ie6.css"  type="text/css" />
	<![endif]-->
    <!-- Flow Player Start -->
<script type="text/javascript" src="flowplayer/flowplayer-3.0.6.min.js"></script> 
<!-- Flow Player End -->
<meta name="verify-v1" content="18/oD5mtAqJSklIsjK/k6NWXMxJ6ZNJMyoGRkIl3Md8=" /> 
</head>

<body id="template-body">
	
<div id="header">
	<div id="top"><jdoc:include type="modules" name="top" /></div>
	<div id="contact"><jdoc:include type="modules" name="user6" /></div>
</div>

<div id="mainnav">
	<div id="blog">
		<a href="irsblog/index.php">Blog</a>
	</div>
	<jdoc:include type="modules" name="user3" />
</div>

<div class="clear"></div>

<div id="mainbody">
	<div id="mainbody2">
		<div id="sidebar">
			<div class="inside">
				<jdoc:include type="modules" name="left" style="xhtml" />
			</div>
		</div>
        
        <div id="sidebar2">
			<div class="inside">
				<jdoc:include type="modules" name="right" style="xhtml" />
		</div>
        

        

		<div id="maincontent">
			<div class="inside">
				
			
				<?php if ($this->getBuffer('message')) : ?>

				<?php endif; ?>
				<jdoc:include type="component" />
			</div>
               
		</div>      
    


		</div>
        
		<div class="clear"></div>

		<div id="mainbottom-wrapper">
			<div id="mainbottom">
				<?php if( $this->countModules('user1') ): ?>
				<div class="mainbottom-box" id="box-1">
					<jdoc:include type="modules" name="user1" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user2') ): ?>
				<div class="mainbottom-box" id="box-2" >
					<jdoc:include type="modules" name="user2" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user4') ): ?>
				<div class="mainbottom-box" id="box-3">
					<jdoc:include type="modules" name="user4" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<?php if( $this->countModules('user5') ): ?>
				<div class="mainbottom-box" id="box-4">
					<jdoc:include type="modules" name="user5" style="xhtml" />
				</div>
				<?php endif; ?>
				
				<div class="clear"></div>
				
			</div>
		</div>
		<div id="footer">
			<jdoc:include type="modules" name="footer" />
		</div>
		

	</div>
</div>

<div id="bottom">
	
	<div class="left">
		<?php echo JText::_("100 S. EDISON AVE., STE. A TAMPA, FL 33606"); ?><br />
		<?php echo JText::_("PHONE: (813) 229-7100 TOLL FREE: (888) 438-6474 FAX: (813) 251-9605"); ?>
	</div>

	<div class="right">
		<?php echo JText::_("&COPY; 2000-2009 Law Offices of  Darrin T. Mish, P.A"); ?>
	</div>
	
	<div class="clear"></div>
</div>
<script src="http://24520.hittail.com/mlt.js"; type="text/javascript"></script> 

</body>
</html>

here is the layout.css

Code:


#header {
	background: transparent url('../images/bg-header.jpg') no-repeat scroll 0 0;
	height: 149px;
	width: 990px;
	margin: 0 auto;
}

#mainnav {
	height: 46px;
	width: 990px;
	margin: 0 auto;
}

#mainbody {
	background: url('../images/bg-mainbody.png') repeat-y scroll 0 0;
	width: 1010px;
	margin: 0 auto;
}

#mainbody2 {
	background: url('../images/bg-mainbody2.png') no-repeat scroll 0 0;
} 


#sidebar {
	background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
	color: #000000;
	width: 223px;
	min-height: 700px;
	margin-left: 15px;
	float: left;
}

#sidebar2 {
	background: #FFFFFF url('../images/bg-sidebar.png') repeat-x scroll 0 0;
	color: #000000;
	width: 250px;
	min-height: 700px;
	margin-right: 15px;
	float: right;
}

#maincontent {
	width: 500px;
	float: right;
	margin-right: 15px;
}

#mainbottom-wrapper {
	border-top: 0px dotted #000;
	margin-top: 50px;
	margin: 0 15px;
} 

#mainbottom {
	background: none #EFEFEF no-repeat scroll 0 0;
	min-height: 192px;
	margin: 10px 0;
	padding: 0 10px;
	clear: both;
	color: #000000;
}

#footer {
	background: #0B60B7 url('../images/bg-footer.png') no-repeat scroll 0 0;
	text-align: center;
	color: #FFFFFF;
	padding: 10px 0;
	margin: 0 11px;
}

#bottom {
	background: #FFFFFF url('../images/bg-bottom.png') no-repeat scroll 0 0;
	margin: 10px 0 20px 0;
	width: 1010px;
	margin: 0 auto;
	padding: 10px 0;
}

and here is the template.css
Code:


/* @important */

* { margin:0; padding:0; }

body {
	background: #FFFFFF url('../images/bg.png') repeat-x scroll center top;
	font: 78% Arial,Tahoma,Verdana;
	color: #000000;
}

h1,h2,h3 {
	margin: 0 0 10px 0;
}

h1, .componentheading { font-size: 1.5em; }
h2, .contentheading { font-size: 1.2em; text-align:center; }
h3 { font-size: 1.167em; }

ul {
	margin: 10px 0 10px 0;
	padding: 0 0 0 35px;
}

li{}

a {
	text-decoration: underline;
	color: #666666;
}

p {
	margin: 0 0 15px 0;
	line-height: 20px;
}

img {
	border: none;
}

fieldset {
	border: none;
}

.clear{
	clear: both;
}

.inside {
	padding: 5px;
}

.left {
	float: left;
}

.right {
	float: right;
}

/* Header Style */

#top {
	height: 35px;
	text-align: right;
	color: #FFFFFF;
}

#contact {
	float: right;
	width: 300px;
	min-height: 80px;
	padding-right: 5px;
	color: #000000;
}

/* Mainnav Style*/

#mainnav ul {
	float: right;
	list-style-type: none;
	padding: 0;
	margin: 0 auto;
}

#mainnav ul li {	
	background: url('../images/bg-menu.png') no-repeat scroll right center;
	display: inline;
	float: left;
	height: 46px;
	padding: 0 10px;
}

#mainnav ul li a {
	color: #FFFFFF;
	display: block;
	float: left;
	font-family: times new roman;
	font-size: 1.2em;
	font-weight: bold;
	line-height: normal;
	margin-top: 12px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Blog Button */

#blog {
	float: right;
	margin: 10px 15px 0 120px;
	padding: 0;
	width: 60px;
}

#blog a {
	background: #F2A31E;
	color: #FFFFFF;
	display: block;
	font-family: times new roman;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	padding: 3px 0;
}


/* Advert Style */

#advert-wrapper {
	border-bottom: 0px dotted #000;
	padding: 0 0 10px 0;
}

.advert-box {
	min-height: 239px;
	width: 367px;
}

/* Sidebar Style */

#sidebar ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#sidebar ul li {
	
	padding: 5px;
	border-bottom: 1px dotted #B9B9B9;
	list-style-image: url('../images/bullet.png');
}
#sidebar ul li a {
	color: #000000;
	text-decoration: none;
}

#sidebar .moduletable, #sidebar .moduletable_menu{
	margin: 0 0 15px 0;
}

/* Sidebar-c Style */

#sidebar-c ul {
	list-style-position: inside;
	margin: 0;
	padding: 0;
}

#sidebar-c ul li {
	
	padding: 5px;
	border-bottom: 1px dotted #B9B9B9;
	list-style-image: url('../images/bullet.png');
}
#sidebar-c ul li a {
	color: #000000;
	text-decoration: none;
}

#sidebar-c .moduletable, #sidebar .moduletable_menu{
	margin: 0 0 15px 0;
}

/* Main Content Style */

#maincontent img {
	padding: 5px;
}

/* Main Bottom Style */

.mainbottom-box {
	float: left;
	width: 228px;
	min-height: 166px;
	padding: 10px 5px;
	margin: 10px 0;
}

.mainbottom-box ul {
	list-style-image: url('../images/bullet.png');
}

.mainbottom-box ul li {}

.mainbottom-box ul li a {
	text-decoration: none;
	color: #000000;
}

#box-2,#box-3,#box-4 {
	border-left: 1px dotted #B9B9B9;
} 

/*Footer Style */

#footer a {
	color: #FFFFFF;
}

/* Bottom Style */

#bottom .right, #bottom .left {
	font-size: 0.833em;	
}

#bottom .right {
	width: 157px;
}

#bottom .left {
	padding-left: 15px;
}

i would really appreciate it if anyone can help...

thankks a whole lot!!