When designing sites or themes, I currently test and make CSS revisions for six different browsers:

1. Firefox 3
2. IE 7
3. IE 6
4. Safari
5. Chrome
6. Opera

Now that IE 8 has been released, it will have to be added to the list as well. According to this blog, conditional browser statements and style-sheets can be used to set web pages to display as IE 7 pages within IE 8:

http://blogs.msdn.com/ie/archive/2008/03/09/using-the-emulate-ie7-button.aspx

http://blogs.msdn.com/ie/archive/2008/03/07/improved-productivity-through-internet-explorer-8-developer-tools.aspx

I find conditional style sheets the most effective way to manage cross browser issues, and generally create one style-sheet for both IE 6 and IE 7 to address the particular nature of those browsers.

For more information on Conditional Statements for IE Browsers, see:

http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

For some time, I have actually been considering that it may be better to have a conditional style-sheet for every browser. I have been putting off implementing browser specific CSS code such as Mozilla extensions:

https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions

essentially because of principle. Imagine you purchased a calculator. On one calculator, 2 + 2 = 4, on another it is 4.1, on another 3.9, etc. Someone says, well you should run a slightly different set of values on this calculator, and a different set on this one, and you’ll end up with the correct value. That is the same as conditional style-sheets – they shouldn’t be necessary, because this is what the CSS is for – we made an exception for IE because the browsers had so many problems, but the movement should be in the other direction. Either way, I can see little way around them, but I still haven’t found a way to target Opera/Safari exclusively through this method either.

When it comes to cross-browser analysis and testing, I find these tools to be essential:

Firefox Browser:

1. Firebug
2. Web Developer
3. CSS Viewer
4. CSS Validator / W3C CSS Validator
5. HTML Validator

Internet Explorer Browsers:

1. Multiple IEs
2. IE Developer’s Toolbar

Safari:

1. Safari / Web Kit – Web Inspector

Chrome Browser:

1. Chrome / Web Kit – Web Inspector

Opera Browser:

1. Opera Dragonfly

I don’t know any web developer currently that is not using Firebug to inspect the CSS of div elements in a page and making CSS adjustments, it is really indispensable. The ‘Web Developer’ add-on has some powerful tools as well for inspection, div element outlining, CSS and HTML validation. Multiple IEs is great because it allows you to overcome the Windows restriction of only having one Microsoft browser version installed at one time – it even allows you to test as far back as IE 3.0. IE Developer’s Toolbar is not as good as Firebug, or even the Chrome debugging tool which is itself excellent. In fact, the Chrome debugging tool + JavaScript console is a worthy equivalent to Firebug in most areas, once you become accustomed to it. The Safari Toolbar seems basically identical to the Chrome kit. By the time it finally comes to testing in Opera, the Opera web development tools seem promising, but I rarely have the interest in getting involved too much on this platform.

With these tools – conditional style-sheets and browser-specific developer toolbars, you should be able to pull apart your CSS code enough to figure out where and why the small glitches are appearing in the display of web pages in the different browsers. While I would love to be able to write conditional style-sheets for every browser, to ensure pixel-perfect specific margins and details, I will continue to hope for more improvements like we have seen with FF3, IE8, Safari, & Chrome coming closer to a universal rendering of CSS values. Until then, these tools will remain for working out the small bugs and issues with cross browser display.

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Conditional Statements, Cross-Browser Analysis, & Tools Bars for Web Developers

This tutorial goes through the steps of one way to create a custom user login block for Drupal. Best is to disable the original login block in the admin/build/block section, start with a new block with custom code, and then style the details with CSS. The requirements for this project are a rounded corner, blue background block with two custom tabs at the top.

1. in admin/build/blocks – click on the “add new block” tab

2. enter the following code:

<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <?php print ($user->name); ?> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<div id="usertabs">
<span class="utabs1">Log In</span><span class="utabs2"><a href="/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br>
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br>
<span class="utabs3"><a href="/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
<?php endif; ?>

This code originally came from: http://nossdutytask.com/node/240

There are also some nice examples at: http://nossdutytask.com/node/228

I modified the code to add some css IDs, classes, span tags, and also the text/links for the top tabs.

3. Select PHP code for the input and save the block.

4. From the main blocks page, click on “configure” for the block you just created. I selected to show this block only for “anonymous user” because I did not need the simplified display after the user has been logged in. The code generates a block that can also be customized to show the site status for authenticated users, but usually the navigation menu does this sufficiently. Enable the block and position it where you like in the display.

5. The rest is basically CSS – setting the image as the background for the login area and the tabs, positioning the text elements and fields. This example is based on a 250px wide column with a two column layout. It includes bold text on the display and overrides the default styling of the Drupal user login form elements.

There is a vertical-alignment fix to standardize the display in IE, and a 1px addition to the lower input field so that the form will align evenly on both ends. Add the following CSS to your theme in style.css, blocks.css, or wherever fits best.

#block-block-4 {
color: #fff;
}
#block-block-4 a {
color: #fff;
}
#umain {
font-weight: bold;
height: 127px;
width: 250px;
background: transparent url("../img/login_bg.jpg") no-repeat top left;
padding-top: 20px;
vertical-align: middle;
}
#usertabs {
height: 23px;
width: 250px;
background: transparent url("../img/tabs1.jpg") no-repeat top left;
}
#usertabs a {
color: #333;
}
.utabs1 {
font-weight: bold;
float: left;
padding-top: 4px;
padding-left: 25px;
}
.utabs2 {
font-weight: bold;
float: right;
color: #333;
padding-top: 4px;
padding-right: 60px;
}
.utabs3 {
font-weight: bold;
float: left;
padding-left: 25px;
padding-top: 4px;
}
#umain #edit-name {
margin-bottom: 5px;
width: 147px;
}
#umain #edit-pass {
margin-bottom: 10px;
width: 148px;
}

Note: the “block-block-4” value will be contingent on the name of the block that was created to input the custom PHP code of the login form.

IMAGES:

Upload to your theme’s “image” folder (in this case named ‘img’):

Tabs Background image: tabs1.jpg:

tabs1.jpg

Login Background image: login_bg.jpg

login_bg.jpg

7. To add a custom button, also upload and add this CSS:

#umain #edit-submit {
float: right;
margin-right: 20px;
background-color: transparent;
color: #333;
border: none;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
font-weight: bold;
background-image: url("../img/button1.jpg");
background-repeat: no-repeat;
height: 24px;
width: 58px;
cursor: pointer;
}

BUTTON IMAGE:

button1.jpg

button1.jpg

FINAL RESULT:

screenshot-login.jpg

Hopefully, this will save some people a lot of time and is also a good base for doing further customization with the background images and CSS.

FURTHER REFERENCES:

http://drupal.org/node/134319
http://drupal.org/node/19855
http://drupal.org/node/92657
http://drupal.org/node/84724

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

Styling the Drupal User Login Block – PHP Code & CSS

While working on a design for a client’s site the other day, I had the need to make a background image a clickable link. Their logo was being used as a background image in the site’s header, and we wanted it to act as a link to the home page – like any good website should.

It’s simple to turn a regular image into a clickable link, but in some situations, it’s just not possible to use a regular image – so how do you turn a background image into a clickable link? First let’s take a look at my original markup (I’ve removed unnecessary elements for sake of simplicity):

<div id="header"></div>

#header {
  background: #fff url(images/header.png) no-repeat;
  height: 101px;
  width: 800px;
}

So, how can we make our background image a clickable link? It turns out it can be done with a clever CSS trick. All we have to do is add the link markup between our header div tags, and apply the above markup to the link instead. All we have to add to the CSS is display: block to force the link to fill the entire space.

To handle browsers that don’t support CSS (those things are still around?), we should also add a span containing link text that we will hide with our CSS. Here’s what we end up with:

<div id="header"><a href="http://mysite.com"><span>MySite.com</span></a></div>

#header a {
  background: #fff url(images/header.png) no-repeat;
  display: block;
  height: 101px;
  width: 800px;
}
#header a span {
  visibility: hidden;
}

And there you have it – a quick CSS trick that turns your background images into clickable links.

This is a post from Web Dev News, a site brought to you by Xavisys Web Development.

CSS Trick: Turning a background image into a clickable link