CSS Help

How do I keep track of menu states in CSS

Firstly, you should be using standard HTML markup for your menu items like this:

<ul id="nav">
<li id="t-menu1"><a href="../index.html">home</a></li>
<li id="t-menu2"><a href="../about_us.html">what we do </a></li>
<li id="t-menu3"><a href="../contact_us.html">contact us </a></li>
</ul>

Then add the following attribute to the <body> tag of each page, ensuring each attribute value on each different page is unique:
i.e. menu1, menu2 etc

<body id="menu1">

To do this with Dreamweaver Templates, you'll have to use Editable Attributes:

In your template, select the <body> tag, and Modify -> Templates -> Make attribute editable

In the dialog box, add Attribute: ID, check the "Make attributes editable" box, Label: "Menu state", Type: text and Default: menu1.

Now when you create a new page from the template, go Modify -> Template Properties, select "Menu state", and change the value to menu2 etc.

Now add your CSS. This is the clever bit.

#body#menu1 #t-menu1 a, body#menu2 #t-menu2 a, body#menu3 #t-menu3 a
, body#menu4 #t-menu4 a, body#menu5 #t-menu5 a, body#menu6 #t-menu6 a
, body#menu1 #t-menu9 a, body#menu9 #t-menu9 a, body#menu9 #t-menu9 a{
color: #9C113A;
font-weight: bold;
}

By using descendant selectors, we are able to target specific menu items based on their parent elements. i.e. A page with the "menu2" attribute in the body tag will automatically assign this rule to the #t-menu2 a menu item.

Key words: CSS, track, Menu, state, descendant, selector, list, dreamweaver template, Editable Attributes

 

My CSS borders are too thin in IE

If you find a discrepancy in the thickness of the border around CSS elements between Internet Explorer and other browsers like Firefox:

Instead of using:

.box{ border: solid thin#7BCBEF; }

Use:

.box{ border: solid 1px #7BCBEF; }

Key words: Too thin, too thick, CSS, difference, border, thickness, IE, Firefox, div, box