|
CSS - Cufon Problem - Joomla + Firefox
Hi there,
I have a site running on Joomla and I'm using cufon for changing the font type. The problem is that, in firefox, the tile only shows in the correct font in some articles... Here, using firefox the title shows up fine: sostudent.com/joomla/index.php/solutions Here, using firefox the title shows up without the font replaced by cufon: sostudent.com/joomla/index.php/about-us Also, I can't seem to change the links font as you can see in the "Contact Form" link on this page: sostudent.com/joomla/index.php/contacts In Google chrome everything seems fine!! Can anyone please help? Thanks, Similar TutorialsHi there, I customized the content module so the title of an article displays an image before the text and the text is displayed with two colors!! The relevant part of the code is at follows: Code: <h2 class="title">
<?php if ($params->get('link_titles') && !empty($this->item->readmore_link)) : ?>
<a href="<?php echo $this->item->readmore_link; ?>">
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;color:#303030;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div></a>
<div style="clear:both;height:0px;"></div>
<?php else : ?>
<div><span class="image-title"></span>
<?php
$titles = explode(" ",$this->item->title);
for ($i=0; $i<count($titles)-1; $i++){
echo '<div style="float:left;padding-left:7px;">'.$this->escape($titles[$i]).'</div>';
}?>
<div style="color:#06cfef;float:left;padding-left:7px;"><?php echo $this->escape($titles[$i]);?></div></div>
<div style="clear:both;"></div>
<?php endif; ?>
</h2>
In both IE and Google Chrome everything is displayed as wanted (apart from ie which has some positioning problem but i'm not focusing on that now) In firefox, I can see the content loading correctly but just before the page finish loading the image disappears... I just can't understand why!! You can take a look at this url: Can anyone please help?? Thanks 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; } 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. 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');
}
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;
}
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::_("© 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!! 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. 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? Hi, Ive got a joomla worksite and it has a menu on footer. The menu uses the following css code : #footmenu ul { margin: auto; padding: 0; list-style:none; margin-top:7px; } #footmenu li { float:left; border-right: 2px solid #fff; background: none; padding: 0; display: inline; padding: 10 10px; } } #footmenu a { font-family: Tahoma, Helvetica, sans-serif; font-size: 11px; font-weight: bold; float:left; display:block; height: 25px; line-height: 25px; padding: 0 15px; color: #666; } #footmenu a:hover { /*background: #e1e1e1; */ color:#98aa65; } I have read some posts and articles on the web but i didnt have any luck with it. I could make it align in left or right but not in the middle. From what i read, i have to align the whole div as one part, dunno Any help appreciated, Thanks Good Evening, Am very glad to find this board. Am working on my first paid Joomla site - and the Suckerfish menu's do not seem to center, and I cannot find any directions on how to go about making them so. Also, many sites I've visited will scale to the size of the window open (until too small) - am using the JNS Epic Pro Template and was wondering if there was any CSS feature to program the whole site to scale as best possible. Hope this makes sense. Am not new to computers, but rather a newbie to Joomla and CSS (although I do know a little). If any further info is required, please just advise. Thanking you in advance ... going live on 7/1 ... I'm currently working on my first HTML site using CSS and it appears exactly as I want it to on IE, but does not on Firefox. On IE it's centered in the middle of the screen and there are no gaps, but on Firefox it's left justified and there is a gap between a couple graphics. I ran it through an HTML and CSS validator and supposedly it is error-free, so does anyone know what the problem may be? Thanks in advance. Adam http://thesuperbeedesigns.com/Lora/ FYI the page isn't functional, the links don't go to live pages. My site renders properly using Firefox (and Opera), but IE skews the format entirely. Looks like the table cells aren't correct, but I've double checked the code and all the tables appear to be right. I don't know if there are CSS incompatibilities with IE, but would appreciate some helpful assistance from the forum. http://markswebsite.net/dev5 html4strict Code: Original - html4strict Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Lederer's Sound</title> <meta name="DESCRIPTION" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="KEYWORDS" content="home audio system, audio conferencing system, sony audio system, audio visual system, micro audio system"> <meta name="COPYRIGHT" content="Lederer's Sound"> <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT"> <meta http-equiv="CHARSET" content="ISO-8859-1"> <meta http-equiv="content-LANGUAGE" content="English"> <meta name="RATING" content="General"> <meta name="ROBOTS" content="index,follow"> <meta name="REVISIT-AFTER" content="7 days"> <link href="includes/main.css" rel="stylesheet" type="text/css" /> <!--<link href="includes/sfd.css" rel="stylesheet" type="text/css" />--> </head> <body> <div id="frame"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white"> <tr> <td width="49%"><img src="images/lederers_sound.gif" alt="Lederer's Sound" width="366" height="63"></td> <td width="51%"> <div align="right"><img src="images/call3.gif" alt="Call us (703) 532-2400" width="313" height="67" border="0" usemap="#Map2"></div> </td> </tr> </table> <hr> <div id="contentleft"> <div id="leftinfo"> <div id="search"> <table width="100%" border="0" cellspacing="3" cellpadding="3"> <tr> <td height="33" valign="middle"> <form action="index.htm." name="srchform"> <input type="text" id="srchtxt" name="SS" size="10" maxlength="125" value="Search Store" onfocus="this.value='';this.style.background='#FFFFFF'" class="input"> <input type="submit" value="Go"> <input type="hidden" name="PR" value="-1"> <input type="hidden" name="TB" value="A"> <input type="hidden" name="SHOP" value=""> <input type="hidden" name="ACTINIC_REFERRER" value="index.html"> </form> </td> </tr> </table> </div> <!-- end search --> <hr> <div id="store"> <a href="index.html"><img src="images/Store_000.gif" width="120" height="37" hspace="13" border="0"></a> </div> <!-- end store --> <hr> <div id="leftnav"> <br> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Products</u></th> <tr> <td width="129"> <a href="intercoms/index.html">Home Intercoms</a><br> <a href="pasystems/index.html">Portable PA Systems</a><br> <a href="index.html">Megaphones</a> <br> <a href="index.html">PA Amplifiers</a><br> <a href="index.html">Message Repeaters</a><br> <a href="microphones/index.html">Microphones</a><br> <a href="index.html">Audio Security Masking</a><br> <a href="remote_ventilators/index.html">Remote Ventilator Alarms</a><br><BR><BR> </td> </tr> </table> <table width="159" border="0" cellspacing="1" cellpadding="1"> <th align="left"><u>Services</u></th> <tr> <td width="129"> <a href="index.html">Corporate Services</a><br> <a href="index.html">Installations</a><br> <a href="index.html">Hire Services</a> <br><br> </td> </tr> </table> </div> <!-- leftnav --> <hr> <p> <div id="leftnav"> <table width="100%" height="170" border="0" cellspacing="1" cellpadding="1"> <tr> <td width="129" align="left"><br> <a href="news.html">News</a><br> <a href="links.html">Links</a><br> <a href="ordering.html">Ordering</a><br> </td> </tr> </table> </div> <!-- leftnav --> </div> <!-- leftinfo --> </div> <!-- contentleft --> <div id="contentcenter"> <div id="content_header"><img src="images/header_home.gif" width="585" height="165"> </div> <hr> <table cellpadding=10> <tr> <td> Lederer's Sound has been family owned and operated for over 25 years. We offer friendly and personalized service. Call or <a href="mailto:lederersnd@aol.com">email</a> us with any questions you may have with your existing system, or if you are interested in repairs or updating. We will be happy to help you! <p> Free estimates/Washintgon, DC/Metro area. </td> </tr> </table> </div> <!-- contentcenter--> <div id="quickfind"> <h3>Product Quick Find</h3> <table border="0" cellspacing="7" cellpadding="7" align="center""> <tr> <td width="70" align="center"><a href="intercoms/index.html"><img src="images/home_intercoms.jpeg" alt="Home Intercoms" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="pasystems/index.html"><img src="images/portable_pa_systems.jpeg" alt="Pa Systems" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/megaphones.jpeg" alt="Megaphones" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/pa_amplifiers.jpeg" alt="PA Amplifiers" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="intercoms/index.html">Home Intercoms</a></td> <td align="center"><a href="pasystems/index.html">Portable PA Systems</a></td> <td align="center"><a href="index.html">Megaphones</a></td> <td align="center"><a href="index.html">PA Amplifiers</a></td> </tr> <tr> <td width="70" align="center"><a href="index.html"><img src="images/message_repeaters.jpeg" alt="Message Repeaters" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="microphones/index.html"><img src="images/qk_mic.jpg" alt="Mics" width="70" height="57" border="0"></a></td> <td width="70" align="center"><a href="index.html"><img src="images/audio_security.jpeg" alt="Audio Security" width="70" height="57" border="0"></a></td> <td width="94" align="center"><a href="remote_ventilators/index.html"><img src="remote_ventilators/images/fcsystem.jpg" alt="Remote Ventilator Alarms" width="70" height="57" border="0"></a></td> </tr> <tr> <td align="center"><a href="index.html">Message Repeaters</a></td> <td align="center"><a href="microphones/index.html">Mics</a></td> <td align="center"><a href="index.html">Audio Security Masking</a></td> <td align="center"><a href="remote_ventilators/index.html">Remote Ventilator Alarms</a></td> </tr> </table> </div> <!-- quickfind --> <div id="footer"> <p>Copyright 2006 Lederer's Sound<br> <a href="index.html">Contact Us</a> | <a href="index.html">Disclaimer</a> | <a href="index.html">Terms & Conditions</a></p> </div> </div> <map name="Map2" id="Map2"> <area shape="rect" coords="257,8,307,58" href="mailto:lederersnd@aol.com" alt="Email Us"> </map> </body> </html>
css Code: Original - css Code /* CSS Document */ body { text-align:center; background: #BEBEBE url(images/bg-vert.jpg) repeat-x 50% 0; font-family:Verdana, sans-serif; font-size: 75%; line-height: 1.5em; margin: 0px 0px; color:#858585; } /* ---[ links ]------------------------------- */ a:link { color: #858585; } a:visited { color: #858585; } a:hover { color: #666666; } #frame { position: relative; margin: 0 auto; padding: 0; text-align: left; font-size: 95%; width: 750px; border-left: 1px solid #666; border-right: 1px solid #666; background: url(images/frame-bg.gif); } #hdr { height:68px; background:#fff; } /*----------------Nav-------------------*/ #search { width: 100%; padding:0px; background:#F0F0F0 url(bg-srh.gif) no-repeat; } #store { width: 100%; padding:0px; background:#F0F0F0 ; } #contentleft { width:150px; padding:0px; float:left; background:#ccc; border-top:1px solid #D4D4D4; } #leftinfo { width:159px; padding:0px; float:left; background:#fff; } #leftnav { padding-left:3px; background: #F0F0F0; border-bottom:1px solid #D4D4D4; } #leftnav table { padding: 0px; margin: 0px; border-collapse: collapse; } #contentcenter { width:585px; padding:0px; float:right; padding-left:8px; background:#fff; } #content_header { padding: 0 0; margin: 0 0; height: 165px ; } #content_header2 { padding: 0 0; margin: 0 0; height: 228px ; } #quickfind { float:right; width:575px; padding:5px 5px; background-color: #FFF; border-top: 1px solid #D4D4D4; } /*------ text --------------*/ .productheading { font-weight:bold; font-size:13px; }
Thanks! Hi All, As an avid reader of these forums for sometime, I can usually find the help I need by searching through the posts but my latest problem is killing me. I have spent close to 15 hours trying all kinds of methods to fix it but with no luck. Can anyone help? In IE my page looks fine, just as I want it but firefox throws a fit when viewing on 800 x 600 (as in the nav buttons and text do not align properly, (auto expand, start a new line)). In essense they do not align properly when the nav buttons are forced to wrap. Here is the test page Here is my CSS: (div top is the top banner. div nav is the nav button area.) html Code: Original - html Code div.top{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img); background-repeat: repeat; text-align:center; font-family: $font_style; font-size: 24px; color: $site_text_colour; } /*To make the block autostretch on IE*/ * html .top {left:3px;} * html .top {right:3px;} * html .top {width:100%;} div.nav{ margin:0px; width:100%; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg); height:40px; } /*To make the block autostretch on IE*/ * html .nav {left:3px;} * html .nav {right:6px;} * html .nav {width:100%;} * html .nav { height:30px;} .cssnav { position: relative; font-family: arial, helvetica, sans-serif; background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour); border:none; background-repeat: no-repeat; white-space:wrap; display: inline; top:-15px; height: auto; padding-right:5px; width:120px; margin: 0; padding-bottom:10px; } * html .cssnav {top:0px;} .cssnav a { display: inline; color:#000000; font-size: 11px; width: 120px; height: 25px; color: white; text-align:center; text-decoration: none; } .cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;} * html .cssnav img { height: 30px; width:120px; border: 0; } * html a:hover {visibility:visible} .cssnav a:hover img{visibility:hidden} .cssnav span { position: absolute; left: 15px; top: 8px; margin: 0px; padding: 0px; cursor: pointer; color:$link_text; text-align:center; font-size:12px; font-weight:bold; }
div.top{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$banner_img);
background-repeat: repeat;
text-align:center;
font-family: $font_style;
font-size: 24px;
color: $site_text_colour;
}
/*To make the block autostretch on IE*/
* html .top {left:3px;}
* html .top {right:3px;}
* html .top {width:100%;}
div.nav{
margin:0px;
width:100%;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/bgs/$nav_bg);
height:40px;
}
/*To make the block autostretch on IE*/
* html .nav {left:3px;}
* html .nav {right:6px;}
* html .nav {width:100%;}
* html .nav { height:30px;}
.cssnav {
position: relative;
font-family: arial, helvetica, sans-serif;
background-image: url(http://www.westdorset.org.uk/sites/images/nav_buttons/rollover/$button_colour);
border:none;
background-repeat: no-repeat;
white-space:wrap;
display: inline;
top:-15px;
height: auto;
padding-right:5px;
width:120px;
margin: 0;
padding-bottom:10px;
}
* html .cssnav {top:0px;}
.cssnav a {
display: inline;
color:#000000;
font-size: 11px;
width: 120px;
height: 25px;
color: white;
text-align:center;
text-decoration: none;
}
.cssnav img {height: 10px; width:120px; border: 0; padding-bottom:5px;}
* html .cssnav img { height: 30px; width:120px; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position: absolute;
left: 15px;
top: 8px;
margin: 0px;
padding: 0px;
cursor: pointer;
color:$link_text;
text-align:center;
font-size:12px;
font-weight:bold;
}
I have messed with above code so much trying to get it right that I know it is a bit of a mess now but scared to change anything in case I mess up IE as well. There is another problem with Firefox in that the hover buttons don't align but that's another story. Any help greatly appreciated. This is a css script that works wonderful in IE: [SIZE=2]A:link {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:visited {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} A:hover {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:21; color: #faf994;} A:active {font-family:gill sans MT, arial,georgia; text-decoration: none ; font-size:19; COLOR: #B5B8FC} BODY { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} TD { COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; FONT-SIZE: 16px } #screen {LEFT: 10%; WIDTH: 80%; POSITION: absolute; TOP: 10%; HEIGHT: 80%} #screen IMG { VISIBILITY: hidden; WIDTH: 0px; CURSOR: pointer; POSITION: absolute; HEIGHT: 0px } #canvas SPAN { FILTER: alpha(opacity=99); LEFT: -1000px; WHITE-SPACE: nowrap; POSITION: absolute; opacity: 99 } #bankImages {DISPLAY: none} [SIZE=2] But when it comes to firefox, the links on top if the script does not work at all. How can I place the A:link, A:visited, A:hover, A:active somewhere, in the HTML or in a separate css and make it work? If I just use the links A:link, A:visited, A:hover, A:active and a BODY {COLOR: #B5B8FC; FONT-FAMILY: gill sans MT, arial,georgia; BACKGROUND: #000033;} in a css it will work in both IE and firefox. greatful for some help! Hanna Da Hi there, I am new to this world of web development and this forum. Would be looking for help from all the experienced techies and where possible also help it out. I have written the following code but it is working in IE but not in Firefox. [Code] ______ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Lets Learn, Teach And Educate</title> <meta name="description" content="Education For All"> <meta name="keywords" content="Kids Forum, Kids Education, Kids Fun Learning, Professional Knowledge, Professional Education Material, General Educational Links, General Education Topics"> <style type="text/css"> body { background: url('Graphics\SaraswatiGoddess.jpg') no-repeat center fixed; } </style> </head> <body> <div></div> </body> </html> ________ END CODE Got it validated thru W3C and CSS but still no success. Hi, I am trying to work with just getting my companies web site (poor design and I just started ) away from tables. I am trying to duplicate (for practice) the home page but have a problem with padding/margin around the logo, search, etc in the header portion of the site. I would like firefox to display the "header" area similar to how it can be viewed in ie 6.x. I know CSS quite well but have just started getting into the standards, so that is where my knowledge is lacking! Any comments on what I have done so far would be appreciated! Here is the url:http://www.rell.com/rell.html and the code: CSS: PHP Code: body { margin: 0; padding: 0; background-color: #066; font-family: verdana, arial, helvetica, sans-serif; font-size: 11px; } #header { background: url(http://www.rell.com/images/banner_home.jpg) center bottom no-repeat; padding: 1.8em, 0.5em, 0.2em, 1em; } #header form { position: absolute; color: #fff; font-size: 9px; right: 1em; } #header #rellSearch { top: 5.5em; } HTML: PHP Code: <div id="header"> <a href="http://www.rell.com"><img src="http://www.rell.com/images/RELL_logo.gif" border="0" width="178" height="65" alt="Richardson Electronics logo" /></a> <form action="http://catalog.rell.com/rellecom/scripts/QuickSrch.asp" method="get"> Search Online Catalog: <input type="text" name="SKU" maxlength="50" size="6" /> </form> <form id="rellSearch" action="http://search.atomz.com/search/" method="get"> Search RELL.com: <input type="text" size="6" name="sp-q" maxlength="50" /><INPUT type="hidden" name="sp-a" value="000704b8-sp00000000" /> </form> </div> Thank you, cranium |
|||||||