One thing I’ve started doing somewhat recently is adding a unique class name to the We all know Internet Explorer 6 is a regular pain in the neck, right? Fortunately, it’s easy to add IE6-specific style with this selector: For example, the style A site typically has a “bar” of navigational links. Vertically laid out navigation is easy to create and append additional links later.\u00a0Horizontal navigation is sometimes desired instead, but it’s not always as trivial to append and can be a little trickier to achieve.<\/p>\n This tip\u00a0will be focused on horizontal navigation.\u00a0First, you should most definitely use unordered lists (the If you\u00a0find you need to set the width and height of your links, just set the display type of the Well, that’s all for now. Make sure to check back occasionally for more random web tips from your Uncle Kyle!<\/p>\n","protected":false},"excerpt":{"rendered":" How to write page-specific CSS as necessary without creating an extra stylesheet.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[20,61,6,19],"class_list":["post-167","post","type-post","status-publish","format-standard","hentry","category-web-standards","tag-css","tag-tips","tag-web-design","tag-xhtml"],"_links":{"self":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":10,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/posts\/167\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.blizzarddigital.com\/blog\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}body<\/code> element of each page. This allows me to write page-specific CSS as necessary without creating\u00a0an extra stylesheet. Ideally, there should be styles for common elements that make up the site, rather than style for each page, but this can’t always be avoided. One case could be that a particular page needs to have a slightly different layout than the rest of the site. Body<\/code> element class to the rescue!<\/p>\nInternet Explorer 6<\/h3>\n
\n* html [additional selectors...]<\/code><\/p>\n* html p { font-weight: bold; }<\/code> makes all paragraphs bold only in Internet Explorer 6<\/em>.\u00a0 It’s valid, but no other major browser will apply it. This is useful because sometimes the style needed to make things in IE6 look one way is drastically<\/em> different than what is needed to make it look the same in all the other browsers. A simpler solution, though, is to tell your client to upgrade his 8-year-old browser. \ud83d\ude42<\/p>\n“Navbars”<\/h3>\n
ul<\/code> element) to organize your navigation links whether you’re using vertical, horizontal, upside-down, or anything-else-you-can-think of\u00a0navigation. (See the W3’s excellent webmaster tips<\/a> for more on unordered lists and their uses.) Once you’ve marked up your navigational links, jump over to the stylesheet and add a display: inline;<\/code> line to your navigation’s li<\/code> elements. Now take a step back and behold your now-horizontal navigational links!<\/p>\na<\/code> elements to inline-block<\/code>, which I was surprised to find out was actually supported in Internet Explorer 6! Once you’ve set that, your links will behave like block-level elements as far as styling goes,\u00a0but they will remain positioned inline. Sweet!<\/em><\/p>\n