css

Project type
Sports fan app
user interface
Visit
Fan Together

Improving the User Interface and Experience of FanTogether, Part 1: Some Basics

Lately I’ve been working alongside a few former Strands Fitness guys on a cool, fun web app called Fan Together. Early stages for this project, but that’s what makes it exciting. I’m contributing by doing a bit of user interface design magic, tidying and improving, basically. I thought I’d share a little as we go.

My main goal for Fan Together is to make things easy to use for the audience and easy to build for our developers. I’m not designing too much in advance, mostly winging the changes so as not to overcommit. We’re interested in getting as much feedback as we can as early as we can.

I started with the profile form:

No style, really. Not much more than labels and fields. So I increased the size of the fonts and fields, set the labels to right align, and move a few things around.

Better.

I’m particularly satisfied with the direction of the avatar upload and the drop-down menus, customized via jQuery plugins I’m developing. Taking the opportunity to create a few cross browser solutions for these UI items that I’ve been wanting for a while, particularly for the drop-down menu and Internet Explorer.

However one problem would be a battle visually between an either short or long team list and the basic info options. Furthermore there were other items on the page that would in time make the view very long. I opted for a tabbed layout, with items like “My Teams” separated to their own areas.

At this point the layout has reached a reasonable state. Some fields now are only available when the information is not available via Facebook or Twitter, so there’s less to deal with overall. As a side note, I’m enjoying keeping the labels font-weight: normal except for those related to required fields.

I’ve not yet tweaked the layouts of the other tabs or views, so more on the evolution of Fan Together shortly!

Related Posts:

17
Project type
Art exposé website,
SaaS/CMS apps
Project date
2008

Nude Nite Orlando

Annual Orlando/Tampa area event

Nude Nite needed something distinctive for their “dazzling art event celebrating the beauty of the nude” and their strong personality and wealth of content made conceptualization quick business. This design only took about 3.5 hours and that made me realize that getting a clear vision of the client comes more quickly when they have plenty of assets. Integrating the client’s personality through their own artwork can be the difference between a good website and the right website.

Roles: Design: web, UI, UX. CSS, HTML, Flash, some ASP.NET. Sales and marketing.

Related Posts:

206
Project type
Theatre website,
SaaS/CMS apps
Project date
2008

Mad Cow Theatre

One of Orlando’s most respected professional theatre companies
Mad Cow Theatre

This project was one of the first where I made the logo of the client a major design element, not just a branding touch. Mad Cow Theatre had a very nice logo, but it required a little extra thinking than I was comfortable with hence the spelling out of their name. That provided a great natural horizontal space to string the pitch phrase that runs above.

The client wanted to make sure that their quirkiness came through, so we went around a few times till the center of the home page, the area that displays their upcoming shows, was purposely unbalanced. Fun and a good shake-up for me; I was getting a little too hung up on equaling widths and heights. Seems to me that imbalance can be useful, but one needs to learn first how to balance to know better when not to.

Roles: Design: web, user interface. CSS, HTML, some ASP.NET. Sales and marketing.

Related Posts:

1
Project type
Social network
Project date
2008

Sports Rooster

Social network for high school and amateur athletes

This project was definitely a milestone for me in terms of user experience and project management, not to mention design. Besides creating the public side of a social network for amateur athletes, I also was responsible for designing and leading the development of a comprehensive administrative suite which a nationwide team of writers would use to contribute news articles while another team managing potentially millions of members. The front-end was developed and many pieces of the backend before funding was halted.
It is my understanding that work for Sports Rooster has resumed, but at the moment I’m not connected with the project.

Roles: Project management. Design: web, UX, UI. CSS, HTML, Flash (AS2) for video, some ASP.NET. Sales and marketing.

Related Posts:

9
Project type
Calendar website
Project date
2005-2006

Hooters Calendar

Girls of Hooters: The Website
Hooters Calendar (2005)

Working with the crew at Hooters Calendar was fun; their job by its nature kept things pretty jovial. The design came together fairly quickly, aided in part by their rich collection of photos and distinctive personality. Managing the site, however, was a mountain almost too big to climb and we realized a bit late that a robust content management system should have been a major focal point of the project all along. Since then I only build sites that include a CMS.

While working on HootersCalendar.com, I also did a mockup for the Hooters Casino, which was just opening at the time. I don’t believe the Casino folks ever saw it, but it was a pretty good design for where I was as a designer.

Roles: Design: web. CSS, HTML. Sales and marketing.

Related Posts:

815
Project type
Coffee chain
website
Project date
2004

Volcano’s Coffee Bar

Volcano's Coffee Bar

The Volcano’s Coffee Bar website was one of my favorite and best design’s for a long time. Unfortunately I don’t believe the chain exists now and it took a while to reassemble the original site – thank you Wayback Machine!

My favorite part of this design is probably the Flash menu. It was a challenge working with the round logo, so it occurred to me we could be a little unconventional and center it. The extension menu then could be divided up into categories, each with options that are revealed on hover. I loved it, the client loved it, and it worked well for them for a long time.

Roles: CSS, HTML, Flash

Related Posts:

179
Project type
Theatre website,
SaaS/CMS apps
Project date
2008

Orlando Repertory Theatre

Professional theatre for family audiences

The website for the Orlando Repertory Theatre was a lot of fun to design. I was able to use quite a bit from their print collateral, including the background curves which continue to flow visually through the front of the design. This was a breakthrough idea for me and from then on I’ve tried to make backgrounds more supportive of the foreground, not just something to fill up space.

Roles: Design: web, UI. Flash, CSS, HTML, some ASP.NET. Sales and marketing.

Related Posts:

81
Project type
Music industry
website
Project date
2011

Tony Michaelides

After months of life and business getting in the way, we finally launched tonymichaelides.com. Went a few wrong roads, but finally realized what we needed was simple and with Tony clearly in focus. It is all about him, his experiences, and what he’s got to say.

Roles: Design: web. CSS, HTML, some PHP.

Related Posts:

2
Experiment results
Week 27 (2011)
Lab ideas?
Have ideas for experiments?
Tell me!

Results: Experiments for Week 27

Lots of successful experiments during week 27. My focus was across the board: productivity, coding, mental fitness, etc. Here are the results:

  1. Announce new missions and experiments [Success]
    This was pretty easy. Start the week posting what I plan to work on, work on it, then post results. Starting the second week now and it feels like something that might stick.
  2. Start my day with a coffee + meditation + brainstorming session [Success]
    Major success, actually. Thrilled with the benefits of starting my day by getting everything out, thinking through things I want to change, and drinking a little Java. My mind is clearer and I feel more relaxed and together.
  3. Play with typography of math formulas with CSS [Success]
    Created some pretty compelling solutions for displaying math in HTML without using images, but not sure yet if these solutions are as elegant as they could be.

    Demo: Displaying Math/Equations with HTML and CSS.

  4. Print my lists: next actions and projects [Success]
    This worked out great. For some reason, paper lists seemed to want to be taken more seriously than digital. Perhaps because printing makes tasks tangible?
  5. Sharper button edges [Failure]
    I’m still getting fuzzy edges in Photoshop and what I want is perfection. Will turn to Illustrator next.
  6. “Prototyping for Website Design” [Unknown]
    I wasn’t able to work on this and my interest is now elsewhere.

In addition to these, I spent some time experimenting with using jQuery and CSS for inline measurement unit switching/recalculating and duplicating the look and functions of the iTunes smart playlist form.

I’ll be posting my planned experiments for Week 28 in a little while, but your suggestions and ideas are always welcome!

Related Posts:

2
Project type
Experiment with
jQuery, CSS3
w/Blueprint
Opinion?
Leave a comment!

Duplicating the iTunes Smart Playlist Form with jQuery & CSS3

Okay, so this might rank up there as one of the strangest things I’ve wanted to want to experiment with, but I thought I’d take a crack at duplicating the Smart Playlist in iTunes using jQuery, CSS3, and Blueprint. But I’m doing it and so far, so good.

Didn’t take very long to get the basic’s down, though there’s more to go to make things really polished. Plus/Minus buttons are working; Expand (if that’s what it’s called) does nothing for now. Hopefully I’ll have more updates soon. Feel free to chime in.

Here’s the JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
/* -----------------------------------------------
 
iTunes Smart Playlist (functions)
an experiment by Weszt @ Hanami Design 
weszt@hanamidesign.com
 
 -----------------------------------------------*/
 
$(function() {
 
	var counter = 0;
 
	checkChildCount()
 
	$('.rule').live( 'click', function(e){		
 
		switch($(e.target).attr("class")){
 
			case 'plus':
 
				counter++;						
 
				var newItem = $(this).clone();			
				newItem.insertAfter(this).attr('id', 'rule' + counter);
				$(':input','#rule' + counter)
				 .not(':button, :submit, :reset, :hidden')
				 .val('')
				 .removeAttr('checked')
				 .removeAttr('selected');
 
				break;
 
			case 'minus':
 
				$(this).remove();	
 
				break;	
 
			case 'minus disabled':
 
				break;
 
			case 'expand':
 
 
 
				break;		
		}
			checkChildCount();
		}
 
	);
 
	function checkChildCount(){
 
		if($("#rule-group").children().size() >= 2){
			$("#rule-group .rule .minus").removeClass("disabled");
		} else {
			$("#rule-group .rule .minus").addClass("disabled");
		}
	}
 
 
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/* -----------------------------------------------
 
iTunes Smart Playlist 
an experiment by Weszt @ Hanami Design 
weszt@hanamidesign.com
 
 -----------------------------------------------*/
 
/* wrapper */
 
#smart-playlist {-moz-border-radius:4px 4px 0 0;-moz-box-shadow:0px 4px 10px #999;-webkit-border-radius:4px 4px 0 0;-webkit-box-shadow:0px 4px 10px #999;background:#ededed;border:1px solid #98999c;border-radius:4px 4px 0 0;box-shadow:0px 4px 10px #999;font-family: "HelveticaNeue", Helvetica, Arial, Sans-serif;font-size:110%;margin-bottom:1em;}
 
#rule-header {background: #a8a8a8;background: -moz-linear-gradient(top, #a8a8a8 0%, #d8d8d8 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8a8a8), color-stop(100%,#d8d8d8));background: -webkit-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);background: -o-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);background: -ms-linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8a8a8', endColorstr='#d8d8d8',GradientType=0 );background: linear-gradient(top, #a8a8a8 0%,#d8d8d8 100%);border-bottom:1px solid #515151;font-weight:500;padding:.2em;text-align:center;text-shadow:1px 1px 1px #ddd;}
 
#rule-group {-moz-box-shadow:inset 0px 0px 4px #999;-webkit-box-shadow:inset 0px 0px 4px #999;background:#e5e5e5;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0px 0px 4px #999;margin:1em;}
 
#rule-group input,
#rule-group select {width:13em;}
 
#rule-group .plus,
#rule-group .minus,
#rule-group .expand {background:url(../../../images/iTunes-buttons.png) 0 0 no-repeat;display:inline-block;font-size:0;height:23px;margin:-4px 2px 0;width:22px;vertical-align:middle;text-indent:-9999px;}
 
/*
#rule-group .plus {background-position:-34px -3px;}
#rule-group .minus {background-position:-34px -3px;}
#rule-group .expand {background-position:-34px -3px;}
*/
 
#rule-group .plus {background-position:-34px -37px;}
#rule-group .minus {background-position:-4px -37px;}
#rule-group .minus.disabled {background-position:-4px -3px;}
#rule-group .expand {background-position:-63px -37px;}
 
.minus.disabled {color:#999;cursor:default;}
.rule {padding:.75em;position:relative;}
 
	.rule a,
	.rule input,
	.rule select {margin:0 .5em}
 
	.rule a {text-decoration:none;}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="smart-playlist">
        <div id="rule-header"> Smart Playlist </div>
        <form>
          <div id="rule-group">
            <div class="rule" id="rule">
              <select id="select">
                <option value="Album">Album</option>
                <option value="Album Artist">Album Artist</option>
              </select>
              <select id="select">
                <option value="contains">contains</option>
                <option value="does not contain">does not contain</option>
                <option value="is">is</option>
                <option value="is not">is not</option>
              </select>
              <input type="text" id="text" />
              <a href="#" class="minus">Minus</a> <a href="#" class="plus">Plus</a> <a href="#" class="expand">Expand</a> </div>
          </div>
        </form>
      </div>
    </div>

Related Posts:

94
Project type
Experiment with
CSS and equations
Lab ideas?
Have ideas for experiments?
Tell me!

Displaying Math/Equations with CSS and HTML

Not that I spend much time browsing Calculus websites, but I have noticed there aren’t many that attempt to show math with anything other than images. Must require an awful lot of time in Photoshop. This experiment (and possibly project) is to see what it would take to do the same thing with HTML and CSS alone.

My hope is to establish a simple system for others to use, but these are early stages and I’ve not tested much across older browsers. Also my knowledge of higher level math fairly stinks. However I’ve got some fairly complicated equations looking pretty good in at least Chrome/Firefox/Safari.

Related Posts:

174
Text-indent?
Can be used
for styling or
hiding text

Solved: IE7 Negative Text-Indent CSS Bug

Negative text indents can be really useful for hiding text from the viewer while keeping text visible to search engines or text-to-speech applications. Sometimes they’re used simply for style-sake. However IE7 gets a little wonky sometimes when text-indents are negative.

To get IE7 to play nice with negative text indents, add this to your CSS:

text-transform:capitalize

For some unknown reason, IE7 wakes up and plays nice. Alternatively you can do this:

font-size: 0;
line-height: 0;
text-indent: none

Don’t bother trying text-indent:inherit. IE7 doesn’t support “inherit”.

Related Posts:

853
Using Borders
For spacing and
negative margins
(kind of)
Visit
CSS Border

Highlights

  • Subtract from "faked" space
  • Expand backgrounds with transparent borders

CSS Trick: Using Transparent Borders for Spacing (and Faking Negative Margins)

More to borders than just pretty little lines?

Borders are interesting because they are kind of like padding (they can inherit a boxes background color) and kind of like margins (they occupy space outside of the box). This cross-padding-margin behavior opens up some interesting spacing possibilities.

If you need a box to appear wider, you can’t change padding or width, and you want to reserve the option to use a visible border later, transparent borders may do the trick (see the demo).

border-right:1px solid transparent

In older browsers (cough… Internet Explorer… cough), negative margins can sometimes be troublesome, but they can be more or less faked by using transparent borders to create space from which we can later subtract.

I’ve not yet come up with satisfactory demo to demonstrate negative margin faking, because I’m not sure that one is really necessary. However since I spent so much time replicating the original situation that led me to using transparent borders for the first time, here you go.

The original situation went like this:

  • Menu built with an unordered list (right aligned)
  • No negative margins
  • No additional padding
  • No images
  • Hover state must have 1 pixel black border, a background color, and expand beyond the menu item’s space

As always, I hope you find this tip useful!

Related Posts:

182
Project focus
Prototyping the
user experience

From Prototype to Design

This series follows the development of a web/mobile application from beginning to final design. Started May 2011.

Series: [ 1 2 ]

LegendList: Rapid Prototyping a Web and Mobile Web Application with Blueprint and jQuery (1)

Early stage prototypes of a travel site

I love prototyping. I love thinking through user experiences and flows, making sure things are working right before they’re looking right. It’s confidence building and makes for a better product in the end.

I thought it might be fun to record the development of LegendList from the earliest stages, so we’re starting just a little past the sketch pad. LegendList is a soon-to-be-cool, activity-centric travel site.

To get to the final product faster, we’re prototyping the web and mobile web versions simultaneously and using actual code. I’m using Blueprint for the basic CSS framework, jQuery and the jQuery’s UI library for JavaScript and custom form element needs, plus as much HTML5 and CSS3 as I can justify.

First pass was pretty generic and felt a bit too much like a prototype, so I added a few labels, spread out the fields, and some CSS3 spice (shadows, rounded corners). I also began to suspect that the drop-down lists for the autocompletes could turn out to be unreasonably long.

At this point I’m happier with the layout and certain that the drop-down lists would be too long to be helpful. After a little thought and experimentation, I decided to try creating a main navigation bar (which I wasn’t sure if we wanted yet on our home page) with a drop-down menu. This seemed more right.

Now we’re talking. Best of both worlds without those worlds colliding together.

At this point I feel the basics of the landing/search page are solid enough. Next I’d like to tackle a mobile home page, followed by search results, an activity page, and a bit of code cleanup.

Related Posts:

114
Project type
Stock market
style user
interface
Project date
2010

Highlights

  • Data visualization
  • CSS + Tables
  • Stock market UI

Stock Market Style User Interface

Squeezing a lot of data into a very small space

Perhaps I’m a geek, but I adore data visualization, especially on stock market websites. All the little bits of data just seem so terribly cool. So maybe it isn’t a surprise that when I was given the task of redesigning the permalinks for Strands Fitness, some of that interest got woven in. Carried the model forward into routes and statistics pages.

However getting things to stay looking as they should no matter what the situation was a major challenge.

The problems were:

  • Wrapping had to be avoided
  • Data width could vary greatly
  • Would be localized in English, Spanish, French, and Finnish (no kidding)
  • JavaScript could not be used
  • Had to be compatible with everything back to IE7

The results are so nice they betray the complexity within. I turned to tables, ultimately, when CSS alone wasn’t cutting it and for tabular results, I consider this okay. Getting things to work wasn’t at all easy, but sometimes that makes projects like this so much more satisfying.

Related Posts:

120
Solution
Fixing IE8 in
Compatibility View
Visit
IE Blog

Using Conditional Comments + CSS Hacks to Target IE8 Compatibility View

First of all, I don’t normally condone CSS hacks. Between conditional comments and good CSS, you shouldn’t need much else. However I recently ran into a problem where a hack was necessary. My problem was that I needed to target only the Compatibility View in IE8.

Due to the extensive use of display:inline-block for buttons in a project, the IE7 style sheet (loaded by a conditional comment) needed the display:inline + zoom:1 treatment. However when Internet Explorer 8 was set to Compat View, anything using this workaround would break. A significant number of visitors to the site were using this View (how they got to be using it is another question entirely) so a solution needed to be found.

The answer? Put CSS hacks that only work for IE8 in the IE7 file, which itself is loaded by a conditional comment.

Conditional comment

<!--[if IE 7]>
<link href="stylesheets/ie7.css" media="screen" rel="stylesheet" type="text/css">
<![endif]-->

IE7 CSS with hack

.button {display:inline;zoom:1}
html>/**/body .button {display:inline-block;} /* this will not be read by IE7 */

Basically that’s it, but why does this work?

In IE8 Compat View, IE8 is acting like IE7. So it loads the IE7 stylesheet. However Microsoft fixed a number of CSS bugs in IE8, so the fixes we’ve been using to make IE7 display CSS correctly may in fact cause problems in IE8 Compat View. Make sense? Hopefully ’cause this made my head spin.

Related Posts:

182
Project type
Ecommerce site
Project date
2008

TShirtToday

TShirtToday

TShirtToday is an ecommerce site that creates one of a kind t-shirt designs with short shelf lives. I designed the site and the logo and am still pretty happy with it. Very focused around the purpose: today’s t-shirt.

Roles: Design: e-commerce, user interface, user experience. Sales and marketing. CSS, HTML, ASP.NET.

Related Posts:

2
Project type
Fitness app
Project date
2011

Strands Fitness

Rebranding and user experience overhaul
Strands Fitness

This web application was in desperate need of a diet. Too much… well… everything. Above all, it was a nightmare for first time users to learn and use. Reducing distraction was in order and we had to do it fast – our deadlines were ambitious.

Fewer elements, fresher aesthetics, and a heavy emphasis on the task at hand, the final “Dum Dum” design (as it’s called internally), is my favorite redesign project and the first at Strands where I’ve been solely directing the creativity. Everything is simplified and, if I get my wish, will be increasingly optimized to be the speed demon a fitness site should be.

Roles: Design: web, UI, UX. CSS, HTML, JavaScript (jQuery). some Ruby on Rails.

Related Posts:

3
Inline-block support?
Quirks Mode has a
great chart outlining
how browsers support
the display
declaration.
Hate using floats?
Try using display:inline-block!

Highlights

  • Make Inline-Block work
  • Removing extra spacing in Safari
  • Inline-Block for Internet Explorer 6/7
  • Alternative to using float

Display:Inline-Block (Cross-Browser Solutions)

Creating a cross-browser grid of variable heights using CSS.

Display:inline-block is a useful – though sometimes troublesome – CSS property/value for when you need something to act like a box, but stay inline. I’ve found all kinds of great uses for this, though getting it to play nice can sometimes take extra effort.

What is display:inline-block good for?

  • Perfectly aligned gallery layouts without floats and fixed heights
  • Right aligned or centered horizontal menus using unordered lists
  • Inline custom drop-down menus
  • Adding margins to an inline item
  • Rows of variably sized buttons
  • and more!

Browser support

Display:inline-block is supported by all modern browsers, though support can be a little uneven especially in earlier incarnations of Internet Explorer and Firefox.

WebKit (Safari, Chrome, etc)

In Safari, display:inline-block will often add unwanted spacing that you will likely need to remove by making setting the word spacing of the parent container to something negative and resetting the word spacing on the children.

HTML
<div class="parent">
<div class="child">
</div>
</div>

CSS
.parent{letter-spacing:-1em;word-spacing:-1em}
.child{letter-spacing:normal;word-spacing:normal}
Internet Explorer 6/7

With a little nudging, you can get IE 6/7 to remember that they’re supposed to know what inline-block means by setting display to inline and triggering hasLayout. This is best done in separate CSS files, loaded via conditional comments.

.button{display:inline;zoom:1}

As mentioned elsewhere, I prefer to use zoom:1 instead of other hasLayout solutions because it leaves more frequently used styles available.

If by chance you happen to use inline-block on a horizontal unordered list and align that list to the right, you might notice a mysterious horizontal scrollbar in your browser. This won’t always happen, but I’ve seen in happen, and unless you take a different route and punt the <ul> approach, you may have to set overflow-x:hidden somewhere (hopefully not your the whole body). Not recommended and please only add this (if you must) to your IE style sheet.

Firefox 2

At this point, I’d be a little surprised if many are still using Firefox 2, but it’s worth mentioning that this browser needs a little special attention in order to make inline-block work. You need to use some propriety CSS code (ugh).

display: -moz-inline-stack;
display: inline-block;

Vertical alignment

Depending on your situation, you may need to adjust the vertical alignment to get inline-block to look correct. This is especially true if you’re constructing a gallery view, much like what Ryan Doherty described at Mozilla WebDev.

vertical-align:top

Where I use inline-block the most

User interface elements in an internationalized web application, must be flexible. Labels, drop-downs, tables – these all must stay readable, usable, and visually correct no matter what language the user chooses. I’ve found inline-block to be an indispensable tool in minimizing the width of buttons while retaining all the benefits of being in the document flow.

References

Related Posts:

75
Goal
Get a complicated
social network to
look perfect in IE7
Inspriation
Another long battle getting IE7 to play nice

Highlights

  • Major IE7 issues in CSS
  • Typical solutions
  • Further info

How to solve most Internet Explorer 7 CSS problems with a few lines of code

This is a great subtitle

I’ve learned the hard way that Internet Explorer 7, despite being a vast improvement over IE6, can still be a monster when it comes to CSS. Fortunately most of it’s problems seem to be solved (or at least aided) by a few select declarations. To be clear, I’m not saying that all IE7 CSS related issues can be solved with these, but when in doubt, these usually get the job done.

zoom:1

This is handy for the super annoying, often unpredictable hasLayout bug, which seems to crop up pretty regularly. Position:relative, width or height when anything other than “auto”, or a slew of other solutions can do the trick, zoom:1 sets layout while leaving you the option to use any of the other styles.

position:relative

Is a <div> appearing then disappearing? Something not showing up at all? Might be the peekaboo bug, so try adding position:relative. Is the position already relative? Try removing it to see if it makes difference.

z-index

Situations where an element mysteriously sits beneath something that it obviously shouldn’t… well, let’s just say this irks me more than just about anything else in IE7. Setting a higher z-index by itself is usually not enough. No, no. You often need to set a descendent, perhaps much further back than the parent, to a higher z-index than whatever is appearing on top. Trial and error and a handful of aspirin.

overflow-x

Every once in a while, IE7 will display a mysterious horizontal scrollbar. Nothing may be too wide, but IE doesn’t like it anyway, especially in situations using floats. You can turn off this bar (be cautious one doing so) with a CSS3 property change of overflow-x:hidden. Please note this will invalidate your code, so try and reserve it for your IE7 file.

font-size:0

Using a div with a no contents? Is it too tall? Try making the font size zero (0).

References

Related Posts:

23