I'm at my wit's end. I had the CSS all done for an index page, and then when I began trying to make it work in MSIE, I screwed up the CSS in the stylesheet, and can't figure out how to get it back. (It had worked perfectly in Firefox, and was both HTML and CSS validated.)

I need to place one or two separate 80px-wide graphics, which are each links, on the right-hand side of some of the article titles, which is also a link.

The background of each block element containing the title is yellow with a border. The title link background turns white on hover, and returns to the same yellow on visited, with the addition of a left-hand checkmark background image. (None of the links work currently, as they point to files at a different URL.)

The two "cat-tab" (category tab) graphics (which I need to have in the page and not as background graphics for accessibility reasons) won't stay inside the containing element. They either appear with only the top 30% of the graphic visible and the rest disappearing below the containing title block; or when there are two of them, they stack one above the other. I REALLY need them to appear floated right within the yellow background of the block element, but, because they are also links, not within the HREF of the title text.

You can see examples of both broken placements here: http://www.snowtao.com/cave/CSS-gstindex.htm

I've tried using a span to contain the two graphics, absolute positioning within a relative container, assigning each graphic a different class to place them next to each other -- nothing works. I tried putting a clearing div between the titles, it didn't work. Tried using lists, divs, and paragraphs containers. Help?!

Thanks,
Elenor

(I've taken out the link refs to save space here.)
The HTML
<ul class="index">
<li><a href=".htm">The uncertainty of science</a></li>
<li><a href=".htm">A mercury risk the regulators are more worried about than the community</a></li>
<li><a href=".htm">Evaluating risk communication</a></li>
<li><a href=".htm">The dangers of excessive warnings … and of over-reassurance</a> <a href="index-PA.htm" title="Go to Precaution Advocacy Index"><img src="art/cat-PA.gif" width="80" height="15" class="cat-tab" alt="link to Precaution Advocacy index"></a> <a href="index-infec.htm" title="Go to Pandemic/Infectious Diseases Index"><img src="art/cat-inf.gif" width="80" height="15" class="cat-tab" alt="link to Pandemic and Other Infectious Diseases index"></a></li>
<li><a href=".htm">Risk communication is a type; outbreak communication is a subtype</a></li>
<li><a href=".htm">How should the public cope with outrage and uncertainty – and how do I cope?</a></li></ul>


The CSS
.index {
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
position: relative;
padding: 0.1em;
margin-top: 0.2em;
}

.index li {
padding: 0.1em;
margin-top: 0.2em;
background-color: #fffacd;
border: 1px solid #ffe4c4;
clear: both;
}

.index a:link, .index a:visited {
display: block;
text-decoration: none;
margin: 0;
padding-left: 0.9em;
background-color: #fffacd;
color: #0000cd;
line-height: 1.1;
}

.index a:visited {
text-decoration: none;
color: #000000;
line-height: 1.1;
margin: 0;
padding-left: 0.9em;
background: #fffacd url(../art/checkmark1.gif) no-repeat left center;
}

.index a:hover {
display: block;
text-decoration: none;
background-color: #ffffff;
line-height: 1.1;
margin: 0;
padding: 0;
padding-left: 0.9em;
}

.cat-tab {
float: right;
margin: 0;
padding: 0;
margin-right: 3px;
height: 17px;
width: 80px;
border: none;
text-decoration: none;
border: none;
text-decoration: none;
background-color: none;
}

.cat-tab a:link, .cat-tab a:visited, .cat-tab a:hover {
border: none;
text-decoration: none;
background-color: none;
}

Well, you still have thirteen validation errors, for one. You have a lot of dropped tags, and your markup more resembles XHTML Transitional than HTML Strict. Second, you have clear:both; as a rule for your li items, which is unnecessary. Text-align your text left, float your buttons right, then clear the floats after each one you've put buttons in on. You can do that with a div with a class that has clear:both; or a br, same thing.

tim

Thanks so much, Tim! (Yeah, I HAD it all validated before I tried to hack it for MSIE.) {sigh} I HATE MSIE!! The dropped tags are from when I was trying everything to make it work... If I can just get the first bit to work, then I'll redo the rest...

your markup more resembles XHTML Transitional than HTML Strict.

Um... How? Can you give me an example? I'm trying to do straight HTML cause I don't know any XHTML. Do I need to change something?

Second, you have clear:both; as a rule for your li items, which is unnecessary. Text-align your text left, float your buttons right, then clear the floats after each one you've put buttons in on. You can do that with a div with a class that has clear:both; or a br, same thing.

?? I added {text-align: left} to the <li> in the stylesheet, and I added this: <div class="clear"></div> after the <li> that contains the graphics -- but they still float below the yellow title. (I used a div cause the br will add an extra line, won't it?)

I also tried adding the clear div inside the <li>, which made the yellow container drop down to contain the graphics, but they still sit a line below the title (thus making the container two-lines high).


And oh so confusing: I did the second five with the clear div -- the first one the clear div is inside the </li>. The graphics stay within the container, but on a second line.
The second clear-div is outside the </li>. The graphic is mostly below the yellow container, but that only shows because the next title has dropped down (clearing the floats, I guess).
The third one is inside the </li> again -- but that graphic appears outside the yellow title container.

Any further suggestions to try? (I have not tried to fix any below the first two sets of five.)

Elenor

Originally Posted by SnowTao

Thanks so much, Tim! (Yeah, I HAD it all validated before I tried to hack it for MSIE.) {sigh} I HATE MSIE!! The dropped tags are from when I was trying everything to make it work... If I can just get the first bit to work, then I'll redo the rest...

Cleaning up and validating the code is the first step. Make sure you do that first.

Originally Posted by SnowTao

Um... How? Can you give me an example? I'm trying to do straight HTML cause I don't know any XHTML. Do I need to change something?

Because you're closing all your tags, for one. Check w3schools to see an example of something written in XHTML Transitional to see what I mean.

Originally Posted by SnowTao

?? I added {text-align: left} to the <li> in the stylesheet, and I added this: <div class="clear"></div> after the <li> that contains the graphics -- but they still float below the yellow title. (I used a div cause the br will add an extra line, won't it?)

Take clear:both out of the li. After you close the li, put something in like <div style="clear:both;"></div> or <div class="clear"></div> and .clear{clear:both;} in your stylesheet.

Originally Posted by SnowTao

I also tried adding the clear div inside the <li>, which made the yellow container drop down to contain the graphics, but they still sit a line below the title (thus making the container two-lines high).

As would be expected.

Originally Posted by SnowTao

Any further suggestions to try? (I have not tried to fix any below the first two sets of five.)

Elenor

Already given. Let me know how things work out. I'll check back periodically.

tim

I'll make another couple of suggestions/comments..

IE6 and below doesn't support min/max width/height. You'll have to set a fixed width in a separate CSS file just for IE and call it using conditional comments. The ONLY thing in this 'iefixes' file should be just those rules you need to kick IE into shape.

You can clean up some extraneous code - this is unnecessary:

<a name="2008"></a>
<h2>2008</h2>

All you need there is this: <h2 id="2008">2008</h2> - it works exactly the same way as the antiquated anchor method. Same goes for the "top" anchor, just put an ID of "top" on an element and the anchor link will work just fine.

You don't need these: <p class="smalldivider"></p>, just use top and/or bottom margins on your UL's to space things out. You're just adding extra code you don't need.

You also don't need the width: 100% on #page - its' going to take up the full width of #wrapper anyway.

G'morning Tim, Thanks for your quick answer.

I've redone all of the 2008 titles per your suggestion; the CSS validates, and the HTML validates except for the search bar in the header (which I'll deal with at some future time).

Originally Posted by Tim

Take clear:both out of the li. After you close the li, put something in like <div style="clear:both;"></div> or <div class="clear"></div> and .clear{clear:both;} in your stylesheet.

Did so, the current page at the link (http://www.snowtao.com/cave/CSS-gstindex.htm) is coded that way -- with the <div class="clear"> tried both inside and outside the </li>. Neither works; the graphic is still down a line from the title.

I really need the graphics to appear on the same line as the title. If {display:inline} won't do it -- what might? ( {Display: inline-block} doesn't do it either.)


The (new) CSS for the cat-tab graphics
.cat-tab {
display: inline;
float: right;
margin: 0;
padding: 0;
margin-right: 3px;
height: 17px;
width: 80px;
border: none;
text-decoration: none;
background: none;
}

.cat-tab a:link, .cat-tab a:visited, .cat-tab a:hover {
display: inline;
border: none;
text-decoration: none;
background: none;
}

The CSS for the containing list
.index {
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
position: relative;
padding: 0.1em;
margin-top: 0.2em;
}

.index li {
text-align: left;
padding: 0.1em;
margin-top: 0.2em;
background-color: #fffacd;
border: 1px solid #ffe4c4;
}

.index a:link, .index a:visited {
display: block;
text-decoration: none;
margin: 0;
padding-left: 0.9em;
background-color: #fffacd;
color: #0000cd;
line-height: 1.1;
}

.index a:visited {
text-decoration: none;
color: #000000;
line-height: 1.1;
margin: 0;
padding-left: 0.9em;
background: #fffacd url(../art/checkmark1.gif) no-repeat left center;
}

.index a:hover {
display: block;
text-decoration: none;
background-color: #ffffff;
line-height: 1.1;
margin: 0;
padding: 0;
padding-left: 0.9em;
}


And the HTML
<ul class="index">
<li><a href="gst2008.htm#science">The uncertainty of science</a></li>
<li><a href="gst2008.htm#mercury">A mercury risk the regulators are more worried about than the community</a></li>
<li><a href="gst2008.htm#evaluation">Evaluating risk communication</a></li>
<li><a href="gst2008.htm#fatigue">The dangers of excessive warnings … and of over-reassurance</a> <a href="index-PA.htm" title="Go to Precaution Advocacy Index"><img src="art/cat-PA.gif" width="80" height="15" class="cat-tab" alt="link to Precaution Advocacy index"></a><a href="index-infec.htm" title="Go to Pandemic/Infectious Diseases Index"><img src="art/cat-inf.gif" width="80" height="15" class="cat-tab" alt="link to Pandemic and Other Infectious Diseases index"></a><div class="clear"></div></li>
<li><a href="gst2008.htm#categories">Risk communication is a type; outbreak communication is a subtype</a></li>
<li><a href="gst2008.htm#advice">How should the public cope with outrage and uncertainty – and how do I cope?</a></li></ul>

Originally Posted by LadynRed

IE6 and below doesn't support min/max width/height. You'll have to set a fixed width in a separate CSS file just for IE and call it using conditional comments. The ONLY thing in this 'iefixes' file should be just those rules you need to kick IE into shape.

Right now, I'm only trying to get it working right in Firefox (again) -- if I can get it correct by the standards, I'll try again to make it work in MSIE (that's what broke it this time {sigh}).

For this file, I have a global and a 'page-type-specific' stylesheet plus the MSIE one that is over-ruling the good stylesheets as needed to make the page(s) suit MSIE. But when I began trying to suit MSIE6, I wasn't quite careful enough and somehow made some changes to the global or specific style sheet, and now I can't get it right in Firefox... (I've used {max-width} in the 'real' style sheet, and just {width} in the MSIE "corrections".... {sigh}).

All you need there is this: <h2 id="2008">2008</h2> - it works exactly the same way as the antiquated anchor method. Same goes for the "top" anchor, just put an ID of "top" on an element and the anchor link will work just fine.

That's GREAT to know! Thanks so much!

You don't need these: <p class="smalldivider"></p>, just use top and/or bottom margins on your UL's to space things out. You're just adding extra code you don't need.

Thanks, they're left over from when it was first paras and then divs -- I have tried both trying to get the titles to work again...

You also don't need the width: 100% on #page - its' going to take up the full width of #wrapper anyway.

I 'll put that on my list of things yet to do!

Ok, the problem is NOT with the clearing, though you do need that, the problem is the ORDER of your code. The floated elements HAVE to be first in the code. So, given that, the first list with the floated images would have to be like this:

<li><a href="http://www.snowtao.com/cave/index-PA.htm" title="Go to Precaution Advocacy Index"><img src="CSS-gstindex_files/cat-PA.gif" class="cat-tab" alt="link to Precaution Advocacy index" height="15" width="80"></a><a href="http://www.snowtao.com/cave/index-infec.htm" title="Go to Pandemic/Infectious Diseases Index"><img src="CSS-gstindex_files/cat-inf.gif" class="cat-tab" alt="link to Pandemic and Other Infectious Diseases index" height="15" width="80"></a><a href="http://www.snowtao.com/cave/gst2008.htm#fatigue">The dangers of excessive warnings … and of over-reassurance</a> </li>

That will put the images where you want them - on the same line and on the right.

The clearing <div> inside the LI is just wrong, it cannot be there. The clearing element can go after the closing </ul> and before the next one. I use this method:

.brclear{
clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}

Then <br class="brclear"> in the HTML.
All this works in your code, I tested it

Originally Posted by LadynRed

The floated elements HAVE to be first in the code.

Oh! You are INDEED a web goddess!] And I now worship you! (Er... well, not exactly, but I am extremely grateful for your help!)

Thank you VERY much!

Elenor

LOL.. you're welcome

Ah, Diane, you're just too quick for me. Glad you got it straight, Elenor.

tim

Thanks Tim.
Now all I have to do is figure out how to make it work in MSIE 6 and 7!

In the head of your document, after your link to your regular stylesheet, you will put in a conditional comment link to the fixes for IE 7 and 6.
Such as:

<!--[if lte IE 7]>
<link href="../cssfolder/iefixes.css" rel="stylesheet" type="text/css" />
<![endif]-->

lte means less than or equal to, so also covers IE6. If it's just for IE7, leave the lte out, then do another link href for IE6 (leave lte in for that one). You're linking to a separate stylesheet, but you're only creating different style rules where necessary to make IE behave.

You can reference positioniseverything.net for common IE bugs, or feel free to post your specific problems here. LadynRed is THE authority 'round here for IE bugs. And ALL of us have beaten our heads against the proverbial brick wall and uttered copious words of curse thanks to our friends at Microsoft.

tim

Thanks, Tim
I'm using conditional comments to cover MSIE6, I'm pretty much relying on (but checking) MSIE7 to handle most things well -- it's a very low-tech site (mainly a document repository), and so far so good!)

Originally Posted by serandfae/Tim

You can reference positioniseverything.net for common IE bugs, or feel free to post your specific problems here. LadynRed is THE authority 'round here for IE bugs. And ALL of us have beaten our heads against the proverbial brick wall and uttered copious words of curse thanks to our friends at Microsoft.

{sigh} Yeah, I've been working (and working) on the guestbook index page, with little success in MSIE6... I work at it for 3-4 hours and then shut it down and go away (it's that or punch my monitor).

I've got the little graphical links floating beautifully in Firefox and Opera (one after the other, hard against the right border of the LI); they even seem to float:right correctly in MSIE7. (Thank you, LadynRed)

In MSIE6? (ARGH!) Each "display:inline, float:right" graphic/link takes its own line -- and despite being classed very hard to show NOTHING -- they were picking up the checkmark of their parent (title/link LI). I have finally gotten the "visited" checkmark that belongs to the parent to go away for the graphical tabs, but each tab is still on a separate line. The encompassing/parent LI is tagged "index"; and each one or two graphical links is tagged "cat-tab" (for category tab). I really need MSIE6 to display the graphical tab/links on the same line within the LI that they are coded into. (Like Firefox does!)

The HTML (top section of long list)
<ul class="index">
<li><a href="#science">The uncertainty of science</a></li>
<li><a href="#mercury">A mercury risk the regulators...</a></li>
<li><a href="#evaluation">Evaluating risk communication</a></li>
<li><a href="__.htm" title="Go to Precaution Advocacy Index"><img src="art/cat-PA.gif" width="80" height="15" class="cat-tab" alt="link to Precaution Advocacy index"></a><a href="__.htm" title="Go to Pandemic/Infectious Diseases Index"><img src="art/cat-inf.gif" width="80" height="15" class="cat-tab" alt="link to Pandemic and Other Infectious Diseases index"></a> <a href="#fatigue">The dangers of excessive warnings...</a></li>
<li><a href="#categories">Risk communication is a type;...</a></li>
<li><a href="#advice">How should the public cope ...</a></li></ul>

The CSS: standards-compliant stylesheet
.index {
position: relative;
list-style-type: none;
text-align: left;
padding: 0;
margin: 0;
padding: 0.1em;
margin-top: 0.5em;
}

.index li {
text-align: left;
padding: 0.1em;
margin-top: 0.2em;
background-color: #fffacd;
border: 1px solid #ffe4c4;
}

.index a:link {
display: block;
text-decoration: none;
line-height: 1.1;
margin: 0;
padding-left: 0.9em;
background-color: #fffacd;
color: #0000cd;
}

.index a:visited {
display: block;
text-decoration: none;
color: #000000;
line-height: 1.1;
margin: 0;
padding-left: 0.9em;
background: #fffacd url(../art/checkmark1.gif) no-repeat left center;
}

.index a:hover {
display: block;
text-decoration: none;
background-color: #ffffff;
background-image: none;
line-height: 1.1;
margin: 0;
padding-left: 0.9em;
}

.cat-tab {
float: right;
margin: 0;
padding: 0;
padding-top: 2px;
margin-right: 3px;
margin-left: 3px;
height: 17px;
width: 80px;
border: none;
text-decoration: none;
background: none;
}


The CSS: MSIE lte 6 stylesheet

.cat-tab { /* over-rides global to remove borders and checkmark */
float: right;
background-image: none;
border: none;
text-decoration: none;
}

.cat-tab a:link { /* over-rides global to remove borders and checkmark */
float: right;
border: none;
text-decoration: none;
background: none;
}

.cat-tab a:visited { /* over-rides global to remove borders and checkmark */
float: right;
border: none;
text-decoration: none;
background: none;
}

.cat-tab a:hover {
float: right;
border: none;
text-decoration: none;
background: none;
}



And yes, I will, once I get the idiot thing working, use shorthand for the coding -- right now, I keep them all split out so I can change and change and change and try and MAYBE find something that works!