Posts Tagged corss browser

CSS Hack – Anchored Links IE Fix

IE has a bug when it comes to named anchors and keyboard navigation, if you navigate through the different menu items by hitting the Tab key, and choose the section you want by hitting the Enter key(Retrun key for Mac users), the browser gets sent to the anchor you choose. But if you hit the Tab key again, you don’t get to the next link in the document; instead you get sent back to the menu, that’s because MSIE does not send the keyboard focus to this anchor. (test it out at the demo page here).

IE is so nasty, but some web developers are so talented, many of them found hacks to work around it. One of the easiest and most efficient way(so far as i know) is to nest the anchor in an element that has a defined width.

Below is a demo page, feel free to check it out!

http://www.lab.highub.com/javascript/in-page-navigation/linked-anchor.php

, , , , , , , ,

No Comments

CSS – List Indentation

Different browsers use different methods to indent lists. Mozilla and Netscape 6+ browsers pad a list on the padding, while Internet Explorer and Opera indent a list through the margin of a list. To gain cross-browser effectiveness, you need to set the values for both the left margins and the left padding for the list.

If you want the first line of a list item to begin further to the left than the rest of the list, you can use a negative value for the text-indent property.

Below is demo. Enjoy!

http://www.lab.highub.com/css/css-list-indents.php

, , , , , , , ,

1 Comment

CSS – List Styles

There are totally tweleve cross browser supported list styles. Below is the demo of the complete list. Enjoy!

http://www.lab.highub.com/css/css-list.php

, , , , , ,

No Comments

CSS – List Image

Styling a list using images can improve the look and feel of a list. below is a demo of some techniques I use when styling a list. Enjoy!

http://www.lab.highub.com/css/css-list-image.php

, , , , , ,

No Comments