Mr_CHISOL Posted February 18, 2007 Share Posted February 18, 2007 Hi!I'm working on a layout/template for a site that uses Joomla! (a CMSI).The CSS I'm using is written by another person (that's not in the development anymore) and I don't feel like going thru the CSS and/or rewriting it all so it is a bit (not much) messy...The main problem (as usual!?) is inheritance and tables. I don't like tables and try to avoid them as far as possible, but I don't feel like going thru the source for joomla! to remove them...I had the font-size "tamed" for a while, and it look good (both in IE and FF), but then I was going to change the look of the "page titles" (as they look as normal text) and then everything seemed to break.. (not EVERYthing...)the CSS I added was this: /* Design Altered by Christopher Hindefjord (ch@kachtus.net) to be compatible with Joomla as an template. Design Anpassad för Joomla (som "mall") av Christopher Hindefjord (ch@kachtus.net). */* { margin: 0; padding: 0; }div, td p{font-size: 1em !important;}html { height: 100%; }body { font-size: 100%; /*background: #AECEDD url(../images/body_bg.gif) repeat-x; fixed;*/ background: #DBECF3 url('../images/body_bg.png') repeat-x center top; background-attachment: fixed; font-family: verdana, helvetica, sans-serif; margin-top: 7px; color: #000; height: 100%; margin-bottom: 1px; text-align: center; /** Center hack (IE) **/ }#wrap { /*background: #dbedf2;*/ width: 764px; min-height: 470px; height:100% !important; height:1%; margin: 0 auto; color: #000; padding-bottom: 0px; text-align: left; z-index:9; }#header { /*background-image: url('../images/head_bg.png');*/ background-image: url('../images/top_bg.png'); width: 100%; height: 124px; z-index:10; } img.logo { float: left; margin: 51px 0 0 30px; } img.hus { float: left; margin: 34px 0 0 21px; }#toprow { font: .7em "trebuchet ms", arial, helvetica, sans-serif; background: #DBEDF2; /*url('../images/toprow_bg.gif');*/ height: 45px; padding: 0; color: #000;/* border: 2px solid #22A;*/ }#page { background: #dbedf2 url('../images/page_bg.png') left top repeat-y; min-height: 333px; display: table; /** UGLY hack... Fult "hack" (IE) **/ width: 100%; margin: 0 0 0 0; color: #000; z-index:8; height: 100% !important; height: 1%; display: table;/* border: 2px solid #000;*//* margin-bottom: 1px;*/ }#col_left { z-index: 9; min-height: 333px; height: 100% !important; height: 1%; display: table; color: #000;/*border: 2px solid #D0F;*/ float: left; width: 169px; padding: 0 0 0 0px; background: url('../images/left_bg.png'); }#col_left #top { background: url('../images/left_top.png'); width: 169px; height: 42px; margin: 0px; }#col_left #content { position: relative; top: -39px; width: 168px; margin: 0px; }#col_main { z-index: 10; float: left; width: 420px !important; width: 420px; max-width: 420px; padding-left: 1px; }#col_main .moduletable { z-index: 11; margin: 0px; padding-left: 1px; }#col_main #content { z-index: 11; margin: 0 -5px 0 0px; padding-left: 0px; padding: 12px; font-size: 1em; max-width: 417px; }#col_main table tbody td { padding-right: 0px; }#col_right{ display: block; z-index: 12; float: right; width: 146px; max-width: 150px; /*min-height: 160px;*/ height: 100% !important; height: 1%; display: table;/** padding: 0 2px 0 0;*/ background: url('../images/right_bg.png'); }#col_right #top { background: url('../images/right_top.png'); width: 145px; height: 42px; margin: 0px; }#col_right #content { position: relative; top: -39px; width: 145px; margin: 0px; }#footer{ width: 100%; height: 42px; font-size: 0.6em; padding: 21px 0 8px 0; clear: both; text-align: center; background: #DBEDF2 url('../images/footer.png') left top no-repeat; color: #000; } #footer hr{ display: none; }textarea { max-width: 423px; }.textbox{ margin: 0 17px 0 17px;}.textbox_col{ margin: 0 7px 0 7px;}#col_left .moduletable,#col_right .moduletable { padding-left: 4px; padding-left: 4px; }#col_left .moduletable:after,#col_right .moduletable:after { display: block; content: " "; height: 1px;/* width: 90%;*/ margin: 3px 6px 3px 5px; border-bottom: 1px solid #BBF; }.intender { font-size: 1pt; width: 9px; }/* Standard ----------------------------------------------------------- */p { color: #5B5B5B; margin: 0 0 1.4em 0; font: .7em/1.3em verdana, helvetica, sans-serif; }div { /* Samma som p ovan, men utan margin (sabbar designen...), anpassning för joomla */ color: #5B5B5B; font: .6em verdana, helvetica, sans-serif; }#col_main table tbody td table td { color: #5B5B5B; padding: 12px; padding-right: 20px; margin-right: 17px; }#col_main table tbody td { font-size: 0.8em;}#col_main div { font-size: 0.8em; }td { font-size: 0.9em; }td h1 { font-weight: bold; font-size: 1.9em; }/* Contenttabell ------------------------------------------------------ */.contentpaneopen { border-bottom: 1px solid #eef; width: 100%; border-collapse: collapse; }.contentpaneopen td { margin-left: 0px; margin-right: -6px; }.contentpaneopen td.contentheading,.contentpaneopen td.buttonheading { border-bottom: 1px solid #ccf; margin-right: -6px: }/* Standardtext ------------------------------------------------------- *//** NOTE: THE ONE ABOVE **/h1, .componentheading, .contentheading,td.componentheading, td.contentheading { font-weight: bold; font-size: 1.9em !important; font-size: 1.9em; font-family: "trebuchet ms", verdana, arial, sans-serif; color: #000; padding: 2px 0 2px 0; margin: 0 0 .3em 0; }h2 { font: bold 1.0em "trebuchet ms", verdana, arial, sans-serif; color: #000; margin: .6em 0 .3em 0; }h3 { font: bold .8em tahoma, "trebuchet ms", verdana, arial, sans-serif; margin: .6em 0 .3em 0; color: #000; }#col_left p, #col_left table, #col_right p { margin-left: 15px; }#col_left table { font-size: 0.9em; }.coltitle, .moduletable h3 { font: bold .7em "trebuchet ms", verdana, arial, sans-serif; margin: 0 0 .1em 0; padding: 5px 0 2px 0; text-indent: 8px; color: #000; background: url('../images/coltitle_bg.png') left center; }.quoted { display: block; text-align: right; font-style: italic; margin-right: 10px; }/*/Standardtext ------------------------------------------------------- */a{ /*text-decoration: none;*/}a:link{ color: #126DB6;}a:visited{ color: #126DB6;}a:hover{ color: #505050;}a:active{ color: #126DB6;}/* Sektioner/Topp-meny ----- */#buttons_inner { /*vertical-align: middle;*/ }#topmenu {/* border: 2px solid #AFA;*/ width: 764px; background: url('../images/topmenu_bg.png'); float: left; height: 24px;/* margin-top: 0px;*/ vertical-align: middle; clear: right; z-index: 1; margin-bottom: -1px; }#topmenu ul { height: 24px; margin: 0; padding: 0; vertical-align: middle; text-align: center; clear: right; margin-left: 14px; }#topmenu li { display: block; width: 119px; height:18px; font-size: 1em; float: left; vertical-align: middle; text-align: center;/* list-style: list-style-image; list-style-image: url('../images/ico_menulink.gif');* / margin: auto;*/ margin: 0px; padding-top: 4px; }#topmenu a,#topmenu a:visited,#topmenu span { text-decoration: none; }#topmenu ul#mainlevel li.mainlevel,#topmenu ul#mainlevel li.mainlevel_current { background: url('../images/knapp.png'); font-size: 0.9em; }#top_submenu { width: 755px; height: 18px; margin-bottom: -3px; }#top_submenu ul#mainlevel,#top_submenu ul#mainlevel_1,#top_submenu ul#mainlevel_2,#top_submenu ul#mainlevel_3,#top_submenu ul#mainlevel_4,#top_submenu ul#mainlevel_5,#top_submenu ul#mainlevel_6 { clear: left; float: left; width: 759px; height: 17px; padding-top: 6px; margin-top: -1px; z-index: 2;}#top_submenu ul#mainlevel_1 { background: #FFF url('../images/bar_1.png'); }#top_submenu ul#mainlevel_2 { background: #FFF url('../images/bar_2.png'); }#top_submenu ul#mainlevel_3 { background: #FFF url('../images/bar_3.png'); }#top_submenu ul#mainlevel_4 { background: #FFF url('../images/bar_4.png'); }#top_submenu ul#mainlevel_5 { background: #FFF url('../images/bar_5.png'); }#top_submenu ul#mainlevel_6 { background: #FFF url('../images/bar_6.png'); }#top_submenu ul {/* border: 1px solid #AAA;*/ display: block; height: 15px; width: 100%; margin: 0; padding: 1px 0px 0px 5px; list-style-type: none; vertical-align: middle; z-index: 3; }/*#top_submenu li ul ul { margin: -1.3em 0 0 13em; /* Ev. en offset på menyn * /}*/#top_submenu a,#top_submenu a:visited,#top_submenu span { color: #000;/* border: 2px solid #000;*/ display: block;/* width: 10em;*/ text-decoration: none; padding: 0 0 0 5px; margin: 0 12px 0px 0; vertical-align: middle; font-size: 0.8em; z-index: 2;/* background: url('../images/ico_menulink.png') no-repeat 1px 3px;*/ }#top_submenu li { float: left;/* width: 9em;**/ z-index: 3; }#top_submenu li ul { position: absolute; width: 12em; left: -999em; background: #dbedf2; border: 1px solid #ABD; border-top: none; padding: 0px 0px 0px 0px; line-height: 1; z-index: 3;/* display: block;*/ }#top_submenu ul#mainlevel li.mainlevel,#top_submenu ul#mainlevel li.mainlevel_1,#top_submenu ul#mainlevel_1 li.mainlevel,#top_submenu ul#mainlevel_1 li.mainlevel_1, #top_submenu ul#mainlevel li.mainlevel_2,#top_submenu ul#mainlevel_2 li.mainlevel,#top_submenu ul#mainlevel_2 li.mainlevel_2, #top_submenu ul#mainlevel li.mainlevel_3,#top_submenu ul#mainlevel_3 li.mainlevel,#top_submenu ul#mainlevel_3 li.mainlevel_3, #top_submenu ul#mainlevel li.mainlevel_4,#top_submenu ul#mainlevel_4 li.mainlevel,#top_submenu ul#mainlevel_4 li.mainlevel_4, #top_submenu ul#mainlevel li.mainlevel_5,#top_submenu ul#mainlevel_5 li.mainlevel,#top_submenu ul#mainlevel_5 li.mainlevel_5, #top_submenu ul#mainlevel li.mainlevel_6,#top_submenu ul#mainlevel_6 li.mainlevel,#top_submenu ul#mainlevel_6 li.mainlevel_6 { /*border: 1px solid #FFF;*/ height: 15px;/* vertical-align: middle;*/ /*padding-top: -1px;*/ padding-bottom: 1px; display: block; margin-right: 10px; z-index: 3; }#top_submenu ul#mainlevel ul,#top_submenu ul#mainlevel_1 ul,#top_submenu ul#mainlevel_2 ul,#top_submenu ul#mainlevel_3 ul,#top_submenu ul#mainlevel_4 ul,#top_submenu ul#mainlevel_5 ul,#top_submenu ul#mainlevel_6 ul { z-index: 3; height: auto; }#top_submenu ul#mainlevel li.mainlevel:hover,#top_submenu ul#mainlevel li.mainlevel.sfhover,#top_submenu ul#mainlevel_1 li.mainlevel_1:hover,#top_submenu ul#mainlevel_1 li.mainlevel_1.sfhover,#top_submenu ul#mainlevel_2 li.mainlevel_2:hover,#top_submenu ul#mainlevel_2 li.mainlevel_2.sfhover,#top_submenu ul#mainlevel_3 li.mainlevel_3:hover,#top_submenu ul#mainlevel_3 li.mainlevel_3.sfhover,#top_submenu ul#mainlevel_4 li.mainlevel_4:hover,#top_submenu ul#mainlevel_4 li.mainlevel_4.sfhover,#top_submenu ul#mainlevel_5 li.mainlevel_5:hover,#top_submenu ul#mainlevel_5 li.mainlevel_5.sfhover,#top_submenu ul#mainlevel_6 li.mainlevel_6:hover,#top_submenu ul#mainlevel_6 li.mainlevel_6.sfhover { /*border: 1px solid #AAD; background-color: #dbedf2; margin-right: 8px;*/ }#top_submenu li.sublevel,#top_submenu li.sublevel_1,#top_submenu li.sublevel_2,#top_submenu li.sublevel_3,#top_submenu li.sublevel_4,#top_submenu li.sublevel_5,#top_submenu li.sublevel_6 { display: block; border-top: 1px solid #ABD; height: 1.5em; width: 12em; padding-top: 4px; z-index: 2; }#top_submenu li:hover ul,#top_submenu li.sfhover ul { margin-top: 3px; margin-left: -1px; left: auto; }#top_submenu li.sublevel:hover,#top_submenu li.sublevel.sfhover,#top_submenu li.sublevel_1:hover,#top_submenu li.sublevel_1.sfhover,#top_submenu li.sublevel_2:hover,#top_submenu li.sublevel_2.sfhover,#top_submenu li.sublevel_3:hover,#top_submenu li.sublevel_3.sfhover,#top_submenu li.sublevel_4:hover,#top_submenu li.sublevel_4.sfhover,#top_submenu li.sublevel_5:hover,#top_submenu li.sublevel_5.sfhover,#top_submenu li.sublevel_6:hover,#top_submenu li.sublevel_6.sfhover { background: #f2f9fb; }#top_submenu li ul li a,#top_submenu li ul li span { width: 12em; z-index: 2; }#top_submenu a:hover { color: #AA0077; /*text-decoration: underline;*/ /* offseta bakgrundsbilden vid hover */ background-position: 1px -21px; }#top_submenu a#active_menu-nav { font-weight: 600;}#telefon { margin: 6px 10px 0px 0px; padding-left: 10px; float: right; vertical-align: middle; text-align: center; background: url('../images/ico_telefon.gif') no-repeat 1px 3px; }/* Kalender ------------------------- */.calendar { margin-top: 5px; margin-left: -2px; font-size: 0.7em; background-color: #fff; width: 135px; }.calendar caption { background-color: #FFF; margin-bottom: -5px; margin-left: -2px; padding-top: 2px; padding-bottom: 5px; font-weight: bold; }.calendar-prev, .calendar-next { font-weight: normal; }.calendar td/*, .calendar th*/ { padding: 0px; margin-bottom: 3px; text-align: center; vertical-align: middle; background-image: url('../images/kalenderplupp_0.gif'); background-repeat: no-repeat; width: 16px; height: 16px; }.calendar td.today { padding: 0px; margin-bottom: 3px; text-align: center; vertical-align: middle; font-weight: bold; /*background-image: url(../images/kalenderplupp_1.gif); background-repeat: no-repeat;*/ }.calendar td.hasEvents { background-image: url('../images/kalenderplupp_HE.png'); background-repeat: no-repeat; }ul.rss { list-style-type: none; display: block; font-size: 0.8em; padding-right: 3px; padding-left: 3px; padding-top: 1px; padding-bottom: 1px; margin-left: 3px; margin-right: 4px; margin-top: 0px;/* border: 1px solid #AAF;*/ background-color: #DDF; }ul.rss li { margin-top: 3px; margin-bottom: 2px; padding: 3px; /*border: 1px solid #000;*/ background-color: #F2F3FF; }ul.rss li a { color: #002; text-decoration: none; }ul.rss li a:hover { color: #126DB6; text-decoration: underline; }/* copyright Text */.copyText { font-size: 0.4em; color: #AAA; }.copyText a { color: #AAF; }/* Inputs ----------------- */.inputbox, textarea { border: 1px solid #669; border-bottom: 1px solid #CCE; border-right: 1px solid #CCE; }.button { background: #F2F3FF; border: 2px solid #CCE; border-bottom: 2px solid #669; border-right: 2px solid #669; }/* Login ------------------ */table#loginform td { /*border: 1px solid #DDD;*/ }table#loginform td.title { padding: 3px; font-weight: bold; }table#loginform td.field { padding: 3px; }table#loginform td.submit { text-align: center;}table#loginform td.subbox { text-align: center;}/* Döda nedärvningsproblem ---------- */form { font-size: 0.8em; }select, input, textarea { font-size: 1em; }/*table { font-size: 1em;}*//*td{ font-size: .8em;}*/ /* Finns ovan *//*ul{ font-size: 1em; margin-top: 1em; margin-bottom: 1em; margin-left: 15px; /* For IE * / padding-left: 5px; /* For real browsers * /}li{/* font-size: .8em;* / margin-bottom: .5em; line-height: 1.2em;}*/ Thankfull for all ideas.. Link to comment Share on other sites More sharing options...
jlhaslip Posted February 18, 2007 Share Posted February 18, 2007 I think you need to understand the Cascading Style Sheet "cascade" and the reasons for allowing clients to alter the page on their machine. It is a accessibility issue. Some users need larger font sizes, so I can not recommend that you change this feature on your page. If you must use a specific font size to view a page without "breaking" it, then you should review the structural layout and change something. IMHO. Link to comment Share on other sites More sharing options...
Mr_CHISOL Posted February 18, 2007 Author Share Posted February 18, 2007 That I get.And I don't think you get the problem. I'm trying to distinguish a heading from the other text as they look the same at the moment.Last I checked it is better, more accesible to have it like thisHeadingText, A lot of Text...Than this:HeadingText, A lot of Text...And I can't get it like the first one at the moment (without !mportant), but I guess I must reorder the CSS... Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now