Any serious CSS person has hacked their way through more ‘Internet Exploder’ issues than they care to talk about. Even if there are only a few small issues to fix in an area, it can be difficult to track them through multiple style sheets (ie. conditional sheet for IE6 & 7). Hacks are just bad practice, so what can you do? There is a better way! I came up with a neat little piece of code that has greatly simplified my life when dealing with cross-browser compatibility.
Archive for the ‘Templates’ Category
Easy IE Conditional CSS with No Hacks!
Thursday, January 15th, 2009 by JonathanFix the sIFR bug when logged in (UPDATED!)
Wednesday, May 14th, 2008 by JonathanI ran into a strange bug today while implementing sIRF into Joomla!. Everything looked great until I logged into the front-end. Then the titles show this:
Contact Us <!– function olMouseMove(e) { var e = e ? e : event; if (e.pageX) { o3_x = e.pageX; o3_y = e.pageY; } else if (e.clientX) { o3_x = eval(”e.clientX+o3_frame.” + docRoot + “.scrollLeft”); o3_y = eval(”e.clientY+o3_frame.” + docRoot + “.scrollTop”); } if (o3_allowmove == 1) {runHook(”placeLayer”,FREPLACE);if(olHideForm)hideSelectBox(); } if (hoveringSwitch && !olNs4 && runHook(”cursorOff”, FREPLACE)) { olHideDelay ? hideDelay(olHideDelay) : cClick(); hoveringSwitch = !hoveringSwitch; } } //–>
After many hours of frustration, we finally came up with a fix!
The error comes from a conflict between sIFR and OverLIB, so we just disabled OverLIB. To do this you have to open the base index.php file in the root directory. Go to line 214 and change FALSE to TRUE.
// set for overlib check
$mainframe->set( 'loadOverlib', true );
Your site will now display sIRF correctly when logged in.
UPDATE:
While we realized that turning off OverLIB was not a good idea, we didn’t have any better alternatives…until now! The problem was caused by the fact that Joomla! loads the front-end edit button inside the div with the class “contentheading,” which is translated by sIFR. To solve this, you have to edit com_content/content.html.php to move the edit button into a separate < td > so that it’s in line with the pdf/email/print buttons (and out of the contentheading div).
Thanks to Mike at mike.simbunch.com for the sharing this fix with us.
Perfect absolute positioning in IE6
Saturday, February 9th, 2008 by JonathanEver try to give a div an absolute position in IE6 and find out it’s not doing anything your CSS is telling it to do? I found out why!
Read the rest of this entry »
Style members sections using a unique CSS ID
Saturday, February 10th, 2007 by JonathanHow many times have you found yourself wishing that you could style your Joomla! site differently for members than for the public? Well, we just got hired on a project that made this feature mandatory, so we set out to create code that would allow us to style the CSS separately. This is how it’s done:
Insert this PHP code just below your body tag. This will add an ID called #members when someone is logged in.
<?php if ( $my->id ) { echo '<div id="members">'; } else { }; ?>
Then add this just above the end body tag in your template:
<?php if ( $my->id ) { echo '</div>'; } else { }; ?>
You may now use some creative CSS to style things differently for members! For example, if you have a white header for the public, you can change it to red when members log in by using the following CSS:
#members #header {background:#990000}
If it doesn’t change for some reason, try adding !important on the end of the color and it will override any cascading issues.
I hope you find this little piece of code useful for your Joomla! projects. I know it has given us a LOT more control over our Joomla! pages. Enjoy!
Tableless column overflow issue with IE7
Saturday, February 10th, 2007 by JonathanToday we realized that the De-Modular Business template doesn’t display correctly in IE7. There was one specific issue that boggled me for hours on end. I had 3 columns. The middle column was divided into 2 additional columns. The problem was, they acted like the 3rd column didn’t exist! (It was the default install in the Blog section). I am willing to bet that we are not the only ones who has had this happen with a Joomla! template. So how can you fix it?
As I said, it took me hours upon hours of trial and error to find a solution for this. I realized it was happening with the tables Joomla! creates for content when it nests more tables within that table for additional content. (I personally prefer Accessible Joomla! so that I don’t have to worry about such things, but we have to appease the masses…) I’m not exactly sure what prompted IE7 to give this much power to a table, but one line of CSS will tame it so that it doesn’t flow over your tableless columns. There doesn’t seem to be any side effects to the code elsewhere in the template. Just insert this to tame your tables:
table * {max-width:100%;}
Now they can’t go beyond their intended usage. Take that, tables!!!
Gain more control of your CSS Joomla! pages
Saturday, December 16th, 2006 by JonathanRecmtly, weve had to come up with a way to control CSS on a page by page basis. It might seem that the only way around this is to create a new template for each of these pages, but we have come up with an invaluable piece of code that will change the way your do your CSS with Joomla! forever.
I actually got the idea from when I first started doing static tableless web sites. I found that if I created a unique ID for each page, I could just add that ID to my CSS class and it would only affect that one page. After some thought, Steven and I came up with a short piece of php code that grabs the page ID and inserts it into your body tag.
<body id="body-< ?php echo $Itemid; ?>“>
You may now use the ID in conjunction with your CSS class to control just one page of your layout.
#body-1 #footer {background:#fff;}
This makes your footer white on just the opening page, if your opening page ID is 1. As you can imagine, this unlocks all kinds of possibilities. I even used it when I wanted a completely different layout for an opening page, and I didn’t have to manage two different templates.
One thing to remember is that not all components or Joomla! pages have unique IDs attached to them. The login page has an ID of 9999 which is used by other special pages. If you need a unique ID and there isn’t one, you’ll have to hack into the component and add a unique class to them. You loose some control, but at least you can change the content area’s CSS.
We hope this helps you with your Joomla! tableless designs. I know it has completely changed how I think about and create my pages. More power with less code – how can you go wrong?
Are your tables breaking your tableless layout in IE?
Tuesday, July 11th, 2006 by JonathanI personally don’t think there is anything more frustrating than spending hours troubleshooting something only to find that one line of code is all that is needed to fix it. This is the recap of my day today: I had a great tableless designed site that seemed to hold up against everything I threw at it. Then I put in a page that had a table in it and all hell broke loose.
I don’t know why, but tables interact with CSS layouts in a very different way than any other code. For some reason it moved the table all the way to the left and pushed down the other two columns to the left of it. I started trying different numbers, then different CSS, then child selectors on just the tables, but nothing worked. I remembered in the back of my mind that IE always needed a width, so I started looking at my columns. They all had width, but I put my content within another div to get around the box model issue, and didn’t declare a width in my inner div. Once I put “width:100%” on my inner div the table snapped into place. Don’t you just LOVE Internet Exploder? I do, I do!!!
One additional note: If you are using PerForms or anything else that puts a table in a form then you will need to add width:100% to the form as well.
What resolution do I use?
Friday, July 7th, 2006 by JonathanAfter being in the graphic design business for over 12 years I have a tendency to take things for granted and forget the struggles of my past. One question that comes up a lot is what resolution to use for different media types. Here is a quick run-down of what I currently know:
- Web: If you develop for 640√ó480 then make your page 600√ó300.
- Web: If you develop for 800√ó600 then make your page 760√ó420.
- Web: If you develop for 832√ó624 then make your page 795√ó470.
- Web: If you develop for 1024√ó768 then make your page 955√ó600.
- Typical Poster: 150dpi (Typically RGB: 85/100 lpi)
- Newspaper: 150dpi to 200dpi (Greyscale or CMYK: 85/100 lpi)
- Press: 225dpi to 300dpi (CMYK: 133/150 lpi) is the ‘norm‚’ but double check with your printer before starting the job.
- Home Printers: (Typically Greyscale or RGB) This can be a little more difficult to figure out, but once you know the math it’s easy. Just divide the total number of inks your printer produces by the dpi stated on the printer. Example: An Epson printer may boast that it can produce a 1440 dpi image, but you have to divide that by the amount of inks it uses, which is probably 6. That leaves you with 240. This is the dpi you should use on your image for maximum quality. Note: You may get a better image with a higher dpi with some printers.
If you are scanning for a particular job and don’t know how to correctly scan the images, use this page as a reference: http://www.scantips.com/basics03.html. It does a better job explaining than I can. If it is for the web, just use 72dpi, unless there is a possibility it will be used for print later as well.
Joomla!: What path do I take?
Monday, June 19th, 2006 by JonathanI am writing this for anyone who constantly gets paths wrong while creating templates (like myself)! Sure, you can get it right through trial and error, but when time is money, it’s always good to have a resource you can visit to find the correct answer instantly. Keep reading to find out the correct paths to use in different parts of your templates and in other parts of your Joomla! site.
Code within the Template head
The best way to define a path within the head is with PHP. In this example I will call my print CSS file within the template folder using the following code:
<link href="/<?php echo "$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/"; ?>print.css" rel="stylesheet" type="text/css" media="print" />
Code within the Template body
The above code works anywhere within the entire template. If you need to link to a place other than your template folder you can call a direct path. With this example I will call up an image from the default images folder in the root…
<img src="/images/stories/articles.jpg"/>
Code within the CSS file
This is where it can get a little tricky. Since you can’t use PHP within your CSS file, you have to know all the correct ways to connect to the desired file. The first example here is how I connected to a file in my images folder within the template folder I was using. From what I’ve seen, you may use either of the following codes for this:
#css_image {background: url{images/cssimage.gif}
or
#css_image {background: url{./images/cssimage.gif}
Code within an IE CSS file
Most developers will filter out all the crap that has to be done to make IE display correctly by separating it into another CSS file. They do this so the page will validate. It saves download time for those using a modern browser because it doesn’t have to download all the extra fixes. For those of you trying to find the paths to use with this style sheet, read on.
If you are calling in a .htc file you have to use the absolute path:
img {behavior: url("http://www.corephp.com/templates/corephp/pngbehavior.htc");}
If you are using a filter you also have to use an absolute path:
#top-shadow {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.corephp.com/templates/corephp/images/top_shadow.png', sizingMethod='scale');}
Otherwise, you use the same relative path as the other CSS file.
This should cover the basics on which path to use when creating Joomla! templates. More will be added as I run across more examples that frustrate me. Please let me if there you ran into any that took some time to figure out as well.
Thanks!
A min-max that works in almost ALL modern browsers (even IE!)
Thursday, June 15th, 2006 by JonathanNot being able to use min-max in CSS layouts is a thorn in virtually every designer’s side. I have been testing different theories and complex codes for over 6 months now trying to get something that is both easy to use and is consistent across all modern browsers. About 3 months ago I ran across some information on IE’s conditional statements that made me think about the possibility of roping in IE to use them. After finally getting a min-width to work I knew a true min-max would be possible. After a few more weeks of testing, it finally worked and my world was never the same again!
In this example I will create a flexible layout window with a min-width of 700 and a max of 1100 that centers in the window.
Step 1
Lets start with the XHTML you will need for this example:
<body>
<div id="wrap-page">
<div id="content">
<p>Here is a page that has a min-max set from 700px to 1100px and it works in all modern browsers, including IE.</p>
</div>
</div>
</body>
Pretty simple! Now let’s get to the heart of the layout – the CSS.
body {text-align: center;}
#wrap-page {
min-width:700px;
max-width:1100px;
height: 100%;
text-align: left;
margin: 5px auto;
}
#content {
background-color: #FFFF99;
border: thin dotted #000000;
}
Well, that takes care of all the good browsers. Now let’s take care of IE. The following code goes into the head of the page, but I recommend moving it into an external style sheet just for IE (just make an @import between the [if IE] style statements).
<!--[if IE]>
<style type="text/css">
#wrap-page {width: 700px;}
div#wrap-page { width:expression(((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth : document.body.clientWidth)
> 1118 ? "1100px" : (((document.compatMode &&
document.compatMode=='CSS1Compat') ?
document.documentElement.clientWidth :
document.body.clientWidth) < 718 ? "700px" : "99.7%")); }
</style>
< ![endif]-->
I won’t bore you with details, but this basically looks at the width of the client’s window and carries out the statements. If it goes below 700 then set the width fixed at 700. It will stretch until it hits 1100 then fix the width at 1100. I did a ton of testing on this to come up with these numbers. Basically, keep the first number around 18 pixels wider than your intended width, otherwise you won’t get a smooth transition when it hits the min-max point. Also, make sure you don’t set the last variable to 100% or the screen will occasionally stick in it’s max position.
This has been tested on every browser I have on both a mac and pc. The only browser that doesn’t support it is macIE5x. This includes Netscape6-8, IE5-6, Camino, Safari, OmniWeb, Opera 6-8, iCab, etc.