Question

I’ve been trying to troubleshoot the navigation on my website. (sequoiawaste.com) The problem arises with iPhones and Internet Explorer 7. I’ve used the display:table-cell; CSS property to keep the tabs in a single line. However, there seems to be 2 issues:

1) on mobile devices (iPhones in particular, but not iPads), the row extends past the blue background, and awkwardly hides the search function of my page.

2) on IE 7, it disregards the display:table-cell; and actually orients the links vertically, similar to what a table-row would create.

to my knowledge, there are only a handful of properties defining #globalnavin the enhanced.CSS file that could cause the issue.

Something I’ve noticed is that the display values vary depending on state – from Table, to Table-cell, then to Block. Changing any of them (or all of them to the same display) has only made my problem worse.

Does anyone have some pointers on what to do here? I dont think it is an exceedingly difficult problem, I’m just hitting a wall here.

** Update **

I started using float:left, but that has been a double edged sword – It looks better, but to get similar formatting i’ve had to set each anchor to a specific width. Now, when you click on my search bar, it does not dynamically resize the anchors.

Hrmm. Any tips?

Answer 1

Try float: left instead – this has much better cross-browser support. You’ll also need to set the widths of each item, and maybe a few other properties to make it look good again.

---

Edit: yes, using float: left will cause your navigation elements to stop resizing individually. That may be difficult to do without using the browser’s table layout algorithms. There are several other approaches you could try:

• When you animate the search bar width, also animate the width of all the navigation items at the same time (but this may be slow)
• Actually use a table (this isn’t great separation of markup and presentation, but sometimes CSS is limited)
• Use conditional comments to “trick” IE into rendering a table (see https://stackoverflow.com/a/4193681/106302) for details (but this doesn’t address issues with mobile devices)

Depending on the approach you choose, you will probably still need to provide special rules for mobile devices. I like the effect, but it may be more practical to go with a different design.