Extra tags for CSS

HTML & CSS
1

Personally, I don’t consider it to be “divitis” if tags are added as NECESSARY hooks for CSS with goals of: achieving a CSS effect, cross browser compatibility ( it would all be simpler if IE had played nice from the begging), and proper validation.

A simplified example, in a “menu” list with sliding door effect buttons the simplest correct way SHOULD have been : <li><a href=“#”>item</a></li>, where part oft he css would be applied to the LI the rest to the A , thus utilizing every tag and not adding code for the sake of effect. However, IE versions would not like this; we could then theorize that the could could still be kept minimal , sensible , and “somewhat” semantic :<a href=“#”><li>item</li></a>. This, of course, will not validate. so we are left with only with the choice to add the extra tag and get : <li><a href=“#”><span>item</span></a></li>. It IS undeniably mark up for the sake of style… but there is no other way of doing it… thus why I dont call it “divitis”.

OK, that was pretty straight forward. but there are “gray situations” in which I cant tell if it’s my noobie skills, or if have once more been back into a corner.

Example 1:
I think clearfix css is the most brilliant CSS idea known to man. In a list with floated items, it would have been great to take care of it all with CSS with something like UL:after{ display:block; content:“”; clear:both} or such. Unfortunately it doesn’t work with IE (earlier than IE8, at least so IE still guilty). So I have been using a <span class=“clearer”> after the last <LI> where .clearer{display:block; clear:both}. Ok, I added an extra tag for the sake of IE. I hope Bill is happy. BUT WAIT… this doesnt validate ( not to mention it messes up something serious if you provide ti as a component for a client who useas a WYSIWYG editor that doesn’t close the LI tags… damn… and what do you know, validation DOES serve a purpose)
It doesn’t validate or work, because the UL expects only LI as children. There is another option ( manually find the last LI in each list and add a class to stop/clear the float…), but this is very clumsy an in essence adding TRULLY linking style to content; at least with the span method you could alter the list back and forth and not worry about affecting the layout.

So, since the UL is GOING to collapse, am left with the choice to add another (div) tag as a wrapper, migrate the style from the UL to the wrapper, and move the clearing span outside the UL. You have added 2 extra tags now, and cant even get the added benefit of having the look of the container being “sliding door expandable” since the UL box is collapsed, thus essentially useless…

Am I missing a better practice out there? Or is this a normal compromise to make?

Similarly, let say you wanted to do some simple list typography. you want the bullet outside a list so that it doesn’t indent the text in the list item, when you hover over the list item you want the background to change color, maybe have a fade… simple … except that since the bullet is out side the LI the background doesn’t include it. The way I have achieved this effect is to have list-style:none and wrap extra tags again for multiple bg images, as such:

<li><a href=“#”><span>item</span></a></li>

the <A> is mostly for IE :hover, but it also holds a non repeating bullet image… I will admit bg images are easier to control that bullets… but an extra tag for this???
<span> would have the indent (padding-left) for the text and the background color and image.

so essentially, two tags again used as hooks for css… is it divitis? Or am I ok?

2

Divs were created with the point of making divisions in the page. Using them for extra elements could cause you to catch the sniffles :wink:

A simplified example, in a “menu” list with sliding door effect buttons the simplest correct way SHOULD have been : <li><a href=“#”>item</a></li>, where part oft he css would be applied to the LI the rest to the A , thus utilizing every tag and not adding code for the sake of effect. However, IE versions would not like this; we could then theorize that the could could still be kept minimal , sensible , and “somewhat” semantic :<a href=“#”><li>item</li></a>. This, of course, will not validate. so we are left with only with the choice to add the extra tag and get : <li><a href=“#”><span>item</span></a></li>. It IS undeniably mark up for the sake of style… but there is no other way of doing it… thus why I dont call it “divitis”.

If it’s neccessary to add elements to pull something off then no it’s not divitis :slight_smile:

\
Example 1:
I think clearfix css is the most brilliant CSS idea known to man. In a list with floated items, it would have been great to take care of it all with CSS with something like UL:after{ display:block; content:“”; clear:both} or such. Unfortunately it doesn’t work with IE (earlier than IE8, at least so IE still guilty). So I have been using a <span class=“clearer”> after the last <LI> where .clearer{display:block; clear:both}. Ok, I added an extra tag for the sake of IE. I hope Bill is happy. BUT WAIT… this doesnt validate

Why wouldnit it validate? Plus, in order for IE to behave (as noted on the PIE site) IE just needs haslayout to contain the floats which they give the ability to via their conditional comment setting zoom:1; for all .clearfix elements :slight_smile:

( not to mention it messes up something serious if you provide ti as a component for a client who useas a WYSIWYG editor that doesn’t close the LI tags… damn… and what do you know, validation DOES serve a purpose)
It doesn’t validate or work, because the UL expects only LI as children. There is another option ( manually find the last LI in each list and add a class to stop/clear the float…), but this is very clumsy an in essence adding TRULLY linking style to content; at least with the span method you could alter the list back and forth and not worry about affecting the layout.

All of htis is not needed had the clearfix been done properly ;).

So, since the UL is GOING to collapse, am left with the choice to add another (div) tag as a wrapper, migrate the style from the UL to the wrapper, and move the clearing span outside the UL. You have added 2 extra tags now, and cant even get the added benefit of having the look of the container being “sliding door expandable” since the UL box is collapsed, thus essentially useless…

Am I missing a better practice out there? Or is this a normal compromise to make?

Well there are multiple ways to contain floats.
Clearfix
Empty clearing div
overflow:hidden/auto
Set a new block context (display:table etc)

Similarly, let say you wanted to do some simple list typography. you want the bullet outside a list so that it doesn’t indent the text in the list item, when you hover over the list item you want the background to change color, maybe have a fade… simple … except that since the bullet is out side the LI the background doesn’t include it. The way I have achieved this effect is to have list-style:none and wrap extra tags again for multiple bg images, as such:

You could simply set the padding/margin as a lower value on the <ul>/<ol> (or give the <li> a negative text indent).

Your way sounds unneccessarily complicated lol :stuck_out_tongue:

3

I am not sure , why it wouldn’t validate,. i think it because the span was directly inside the UL:

<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<span class=“clrf”></span>
</ul>

I also note that some WYSGYG ( yes, WE hate those, but clients believe that that IS web design…) will not close LI tags ( or maybe I just don’t know how to get them to do it). which mean the <span> ends up being inside the last LI( at which point it DOES validate, but it doesn’t clear the float, lol)…

in order for IE to behave (as noted on the PIE site) IE just needs haslayout to contain the floats which they give the ability to via their conditional comment setting zoom:1; for all .clearfix elements

Wait… you are saying IE ( prior to IE8)can handle :after pseudo class?

BTW I am not saying I cant do this, it just that it DOES require extra tags in the mark up specifically for the CSS

Well there are multiple ways to contain floats.
Clearfix
Empty clearing div
overflow:hidden/auto
Set a new block context (display:table etc)

  • Clearfix: requires “:after” which means it is not IE friendly.
  • Empty Clearing Div is part what I was doing before, and part of the divitis I am talking about… a tag used entirely for the sake of css.
  • Overflow:hidden/auto … I knew about hidden, but not auto… I will have to experiment with that, I just thought auto put scrollers and required a fixed width and/ or height… I think this might be something for me to try… Thanks Ryan
  • Set a new block context (display:table etc): do you mean on the container? Hmmm, it seems to function… and I suppose display:table would not have side effects on the container or it’s children… I will have to experiment with it on IE and other browsers

Setting the text-indent… i will have to fine tune that… but I think I see what you mean.

Thanks again for the insight, Ryan.

4

I misunderstood the structure you were trying to describe :blush:

I also note that some WYSGYG ( yes, WE hate those, but clients believe that that IS web design…) will not close LI tags ( or maybe I just don’t know how to get them to do it). which mean the <span> ends up being inside the last LI( at which point it DOES validate, but it doesn’t clear the float, lol)…

Dreamweaver will auto close tags, and that’s just about the most used one there is (I know there are others yes)

Wait… you are saying IE ( prior to IE8)can handle :after pseudo class?

Nope. The full clearfix is this

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

Notice the conditional comment? That makes the clearfix work in IE7 down

BTW I am not saying I cant do this, it just that it DOES require extra tags in the mark up specifically for the CSS

[UL]
[LI]Clearfix: requires “:after” which means it is not IE friendly.[/LI]
[LI]Empty Clearing Div is part what I was doing before, and part of the divitis I am talking about… a tag used entirely for the sake of css.[/LI]
[LI]Overflow:hidden/auto … I knew about hidden, but not auto… I will have to experiment with that, I just thought auto put scrollers and required a fixed width and/ or height… I think this might be something for me to try… Thanks Ryan[/LI]

It’s technically any value other then visible (default) for the overflow to work.

overflow:auto was the first value used, however IE would sometimes put scrollbars and that was quite annoying. Overflow:hidden is now the preferred choice (unless you need something hanging out of the container) because no scrollbars appear :slight_smile:

[LI]Set a new block context (display:table etc): do you mean on the container? Hmmm, it seems to function… and I suppose display:table would not have side effects on the container or it’s children… I will have to experiment with it on IE and other browsers [/LI]

IE7 down don’t support display:table and I don’t neccessarily recommend it because of that fact, and plus there are much other better options :slight_smile:

Setting the text-indent… i will have to fine tune that… but I think I see what you mean.

Thanks again for the insight, Ryan.

I just mean (assuming the <ul> or <ol> have padding or margin) setting the <li> to have text-indent:-2em; or whatever lol :))

5

wow, thats an in depth clearfix.

what I meant by setting text indent was relative values.

	li, ul { margin:0; padding:0}
	#container{background: pink;width:10em}
	li {padding:10px; padding-left:2em; text-indent:  -1.25em}
	li:hover{background: cyan}
	ul { list-style-position: inside}

<div id=“container”>

&lt;ul&gt;
		&lt;li&gt; M Something bla blah blah and stuff
		&lt;li&gt; something bla blah blah and stuff
		&lt;li&gt; something bla blah blah and stuff
		&lt;li&gt; something bla blah blah and stuff
		&lt;li&gt; something bla blah blah and stuff
		&lt;li&gt; something bla blah blah and stuff

&lt;/ul&gt;

</div>

thats your method working perfectly ( on FF/ safari at least). I am just trying to figure WHY/ HOW I arrived tho the values=>padding-left:2em; text-indent: -1.25em.

:slight_smile:

6

Well if the padding(or margin) set on the <ul> or <ol> is 2em. You could set a text-indent:-2em, however, you have to account that the bullets take up room as well.

PS-The bullets are covered with a b ackground (the <li>'s backgrounbd) in your code.

Post your example of the background “not being in the <ul>” :slight_smile:

7

are the bullets not showing in the PCs side? ( am on a mac and it works as I wanted, the LIs stretch the width of the UL – its a pink bg but when you hover on a LI its a cyan rectangle which encompasses BOTH the bullet AND the text. This, btw is exactly the behavior i wanted with that minimal markup.

My previous Q, which you answered, was just about the web-math : TEXT INDENT= -1 x (padding-left - estimated width of bullet). :slight_smile: YAY math!

8

The bullets are showing…I thought you meant…gah…I needa sleep some more…

I hate math…but I’m glad it’s helping you out.

If you have everything answered now I’ll take my leave :).