IE Bug

General web design discussion, including HTML, CSS, and JavaScript

IE Bug

Postby laurab » Sun May 08, 2011 3:14 pm

I've created a tabs menu to be aligned to the right side of my layout. It looks fine in all browsers but IE (of course). Each tab seems to just stack on top of each other and I can't figure out how to get it to work.

You can see it at brandaid.cust.magicedit.com and it's created simply as a ul.

Any suggestions? Or does anyone know of a website that might explain how to manage tabs in IE?
Laura Wong
Web Designer
chymeracreations.com
laurab
 
Posts: 2
Joined: Sun May 08, 2011 3:07 pm
Location: Sacramento, CA

Re: IE Bug

Postby dishwasher » Mon May 09, 2011 11:13 am

I see your problem.

You used display: inline-block; on your li. It's not supported on all the browsers, and not the best way to style elements that are meant to be floated.

There are two ways you can make this work.

1. Put a div around the ul and float to the right. Then float all the li to the right also.
Your tabs will float to the right from the top of the stack. You will need to change the order of your tabs from the html to keep the current order. So your "Home" tab should be the last in your html. (This is the easiest way)

<div style="float:right">
<ul>
<li style="float:right">Contact</li>
<li style="float:right">Client List</li>
<li style="float:right">Something</li>
<li style="float:right">Services</li>
<li style="float:right">Home</li>
</ul>
</div>
(You're going to use css to declare the styles, this is just and example.)


2. Another way is to put the div around your tabs and float:right;. Then float all the tabs to the left. You don't need to change the order of your tabs using this method, but you will have to play with the width of the div and test it in IE to make sure there is no surprises.
The safest way is the first one.

I hope it helps. Let me know if it works.
dishwasher
 
Posts: 2
Joined: Tue Apr 12, 2011 2:54 pm

Re: IE Bug

Postby laurab » Mon May 09, 2011 11:19 pm

Thank you!

I went ahead and tried your second method it worked. Thank you so much! :)
Laura Wong
Web Designer
chymeracreations.com
laurab
 
Posts: 2
Joined: Sun May 08, 2011 3:07 pm
Location: Sacramento, CA

Re: IE Bug

Postby dishwasher » Tue May 10, 2011 10:27 pm

I'm glad it worked out for you. Thanks for posting.

If you have any more questions or comments feel free to post.
dishwasher
 
Posts: 2
Joined: Tue Apr 12, 2011 2:54 pm


Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest

cron