Ever 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 »
Archive for the ‘XHTML+CSS’ Category
Perfect absolute positioning in IE6
Saturday, February 9th, 2008 by JonathanStyle 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.
Tableless does NOT mean Accessible!
Tuesday, July 11th, 2006 by JonathanIn the last year there have been major changes in tableless design and accessibility. Recently, laws have been passed requiring websites to be accessible and lawsuits have been filed against current sites and developers. Clearly, our world will never be the same again. It’s a case of ‘get up to speed or get out of the race.’ Unfortunately, there have been a lot of misunderstandings about the terms ‘accessible,’ ‘tableless’ and ‘valid xhtml+css.’
A short time ago, I was getting burned out doing the same ol’ coding day after day. I had pushed my nested table skills to the limits and could get a good design, but something always seemed off. I originally started out with prepress, graphic design and Photoshop work, and I wanted the web to do what I was used to doing in those programs. To say it was frustrating was an understatement. Then one day I came across CSS Zen Garden and my world was never the same again. I have learned all I can about tableless websites and accessibility, and it’s completely changed how do web development.
I think I’m accessible!
I go through several pages of news every day trying to find tips to increase my development skills and I have recently noticed a growing trend with the majority of developers. People seem to think that if they make their site tableless, it automatically means it’s accessible. This couldn’t be further from the truth. It is a great step toward greater accessibility, but chances are they are missing the mark in several other areas of their site. Another myth is that if their site passes the validation for xhtml and CSS, that their site is accessible as well. They are just as libel for a lawsuit with a tableless validated xhtml+css site as they are with a nested-table monster of a site. At the same time, a table layout website can pass as accessible. How is this possible?
Take the following steps to ensure that all of your customers can access your site. You’ll sleep easier at night knowing you won’t be spending development time in court explaining your ignorance of the topic to a jury.
Have proper form
The most non-accessible code seems to come from forms. Accessible forms aren’t too difficult, but there needs to be a little more care taken in how they are laid out. One of the best articles I’ve come across that teaches how to make accessible forms is on this page at WebCredible.co.uk. There’s a rule that I follow: If I can use the form completely without using a mouse then it’s accessible.
I thought we were done with tables!?
The second most iΩaccessible code comes from our old friend the table. Keep in mind that tables are completely valid to use in xhtml+css layouts. In fact they are the preferred choice if you are presenting tabulated data. The problem is that they are very hard to read if you are using a screen reader that’s not coded properly. There are many extra tags you should insert that you may not have ever heard about, but that are necessary for those who are using an alternative browser. My favorite article on accessible tables can be found here on 456 Berea Street. It covers a lot of the basics so you can make accessible tables in no time at all. I would recommend doing some of your own research on more advanced accessible tables.
Know how to use your page tags
Another easy way to assist users who require accessible technology is to use your page tags correctly. Using them correctly will also make them more semantically correct, which will make your site more popular in search engines. I start laying out my sites in pure text before I even touch CSS. This assures me that everything will look right in screen readers and cell phones, as well as older browsers (which I filter out into a nicely formatted text only layout). Visit this page on Mezzoblue for a more complete description of how to correctly use tags within your page.
Can you read my script?
There are other less crucial code styles that can help with accessibility. I urge you to know as much about your site’s coding as possible since you are responsible for what you put on the web. Most Ajax is not accessible, as well as a lot of JavaScript. If you use JavaScript, be sure to include a noscript explaining what is happening to those who can’t use it, or give a link to a place where they can use it (ie. JavaScript iframes).
Minimalists are people too!
Try to keep in mind that some people browse the web with their graphics, css and/or JavaScript OFF. Think about how your page will be viewed if this happens. Also, keep in mind that many people increase their text size in their browser. Try not to use px for your font sizes since that locks the text sizes in IE. Use em (or %) instead, so it will increase with the size increase function within the browsers. You won’t be sued for not having this, but it’s good etiquette for web accessibility.
Help for you in less than 12 steps
Hopefully this will give you a more complete picture of what it means to create an accessible website. Some people seem to be looking for lawsuits these days, so it’s good to have your bases covered. Here are a couple tools that will help you with all this:
- Firefox Web Browser: I doubt there is anybody who doesn’t use this anymore for web development, but if you don’t then download it here.
- Web Developers Toolbar: Once you have Firefox you need to download this toolbar. It’s an absolute must. It’s a good idea to choose CSS > Disable Styles > All Styles. This will allow you to see your page the way it looks with no CSS – which is a setting people often use for slow connections. This also gives a good indication of what screen readers will see. One other great feature is under Information. You can choose to display virtually any tags in your site at a glance without going to your source.
Good luck!
Hidden gem in Developers Toolbar
Friday, July 7th, 2006 by JonathanI found this little gem while surfing for some new CSS information. Did you know that if you press Control + Alt + F (Mac: Apple + Alt + F), a more advanced CSS viewer will show up as a pop-up in Firefox’s Web Developer Extension from Chris Pederick? I still love it and will always use Xyle Scope for most of my CSS information digging, but this is a major tool for finding elements quickly.
Kudos to Content with Style for the tip!
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.
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.
Make your code stand out!
Wednesday, June 14th, 2006 by JonathanThis is a simple one, but makes your code pages stand out and easy to read. Simply add this to your style sheet and you’ve got a nice new look to those code blogs. Note: Make sure your code starts on the line under the code statement, otherwise there will be no top padding.
code {
color: #660000;
background: #FFFFCC url(./images/code.gif) no-repeat 92% 92%;
position: relative;
width: 94%;
margin: 10px 0 0 0;
padding: 0px 10px 11px 10px;
border: 1px dotted #000000;
overflow: auto;
text-align: left;
font-size: 1.2em;
line-height: 1em;
display: block;
}
This is the example we used on this site. The background image is simply a GIF of the word ‘code.’ Try it with a class attached if you would like different ones for HTML, Javascript, etc. If you had a class of .htmlcode then you would just call it as code.htmlcode. Play around with the settings to make it look the way you want.