Topic: Pesky Non-Semantic Markup. (Page 1 of 1)

I'm still working on my end-all be-all website =) I'm trying to do everything right, meaning liquid layout. CSS Image replacement for buttons and headers so that old non-css browsers will see text while modern browsers will hide the text and show an image. I'm using a list for a menu and what not.... yada yada yada. However, there are a few design elements on my page which require totally non-semantic structures etc. stuff like:

<div id="topborder">
	<img src="images/TLpiece.gif" width="21" height="21" alt="" class="leftcorner" />
	<img src="images/TRpiece.gif" width="21" height="21" alt="" class="rightcorner" />
</div>

I do this because I need a line with the left image on the left end and likewise for the right one. An hr would work swell here semantically, but I cannot style them the same way. I can give a background image to an hr but it wouldn't be liquid like my non-semantic construct.

So my question is, whats the best way to get rid of this crap?!

hmm, I'm not totally sure of what you exactly want, but have you considered The sliding doors of CSS? The example given is for lists, but this can be applyed to divs just as well, I've used it in the past for liquid layouts and it works fine.

Hope this helps!

Cheers,

generally when you have "crap", you use divs or spans with background images - without CSS they disappear into thin air

not sure exactly what you are trying to do but see if this may lend a hand.

Later,

C:\