New Indianapolis Web Design Launched!

Indianapolis Web Design Company Dan Finney Design launched a new website for DCL Medical Laboratories today. This website redesign updates the DCL branding to compliment the recently updated print marketing materials.


For more information on this redesign and others, please visit www.danfinney.com

Suckerfish Dropdowns Sticking in IE7

Do you use Suckerfish Dropdowns or Son of Suckerfish Dropdowns in your web design? While going through our usual testing process (which includes Safari/Chrome, FireFox, Internet Explorer 6, and Internet Explorer 7) we noticed an issue with the menu sticking after you click on a flash element or other content on the page. Adding a simple position:static seems to fix the display issue.

#nav li.hover, #nav li:hover {
position:static;
}

Did that solve it for you? Let us know.

Web Design Tips: Text Replacement with Float:Left and Text-Align Right

This week while we were working on a web design project for an Indianapolis client, we ran into a common issue with Image Replacement.

Image Replacement has been covered by several reputable sources on the web. The purpose of this post is not to provide a tutorial on Image Replacement, but to discuss some common issues that can happen while working with the technique.

Our client's Header required a logo on the left and a Title on the right (a pretty common scenario). We decided to use an H1 tag for the logo and an H2 for the title of each page, using Image Replacement for the logo and allowing the title to remain natural text.

Our HTML ended up looking like this:

<div id="Header">
<h1 class="logo">Client Name in Text</h1>
<h2>Welcome to the Client's website</h2>
</div>

In our style sheet (CSS) we set the Header to text-align:right to align the H2 to the right of the page:

#Header {
text-align:right;
}

To get the H1 back to the left, we floated it to the left and then applied our standard Image Replacement techniques.

#Header h1.logo {
float:left;
background:transparent url(images/logo.gif) no-repeat scroll center top;
display:block;
height:68px;
width:78px;
text-indent:-9999px;
}

We found that by using the text-indent method inside of a div that was set to text-align:right caused us some issues. The text did not move off the page, instead it remained over the logo. The next thing we tried was changing the text indent to a right-directional (positive) value instead of a left-directional (negative) value:

#Header h1.logo {
float:left;
background:transparent url(images/logo.gif) no-repeat scroll center top;
display:block;
height:68px;
width:78px;
text-indent:9999px;
}

This caused more issues. While it worked fine in FireFox, Safari, and Chrome it caused Internet Destroyer... (sorry, Internet Explorer) to allow you to scroll right by 9999 pixels until you could see the text that we wanted to hide.

In the end, the solution was very simple. We just set a text-align:left value to our H1 and we were back to a solution that was cross-browser compatible.

#Header h1.logo {
float:left;
background:transparent url(images/logo.gif) no-repeat scroll center top;
display:block;
height:68px;
width:78px;
text-indent:-9999px;
text-align:left;
}

Be sure to set your text-indent value back to negative. Please drop a comment if this article helped you in any way, or if you have tips for how we can improve the format.

Thanks and happy coding! Do you Digg it?

Welcome to the new DanFinney.com Blog

The concept of this blog is to bring you news and tips related to web design and catalog design. Feel free to drop a comment and let me know what information you would like to see here or what would interest you the most. Are you looking for design tips, information on how to pick a web designer, or general information on web technologies such as eCommerce and Content Management?