Designing Without Tables

HTML & CSS
61

There so much information here its going to take me a long time to go through it all and try to understand it.

I can do most of the basic HTML/CSS stuff. I took some HTML/CSS courses in college but my major was in programming/databases/security stuff. I can design pages just fine but when it comes to knowing all the different browser types, and getting more advanced CSS/Layouts I get lost in it.

The fixed/fluid layout is fine. It works well, I didn’t want to go completely fixed because I wanted it to rezise with the browser, but I have a 42’’ (wide) monitor so I can see multiple programs at once. Using a fluid layout and maximizing the window on that monitor makes the website look like junk.

This layout you used is really nice. It resizes with the window, but it doesn’t get too big or too small.

I was thinking about doing a two-column layout inside the white content area. So I could have a picture on the left or some links, and have text on the right. I’m trying to figure out how to modify the code to do that now, without messing it up completely as I don’t 100% understand it all yet. I thought maybe I can float some stuff, but I’m not sure how that will work. It usually ends up messing stuff up for me. It would be cool if I can get something like <div left> and <div right> and what ever I put in those tags automatically goes into the left or right columns.

I’m still trying to figure out what everything does, thanks for converting it to something better. It took me a really long time to get the table version working but I never did like it. I wanted to do it without tables. I can’t believe there is hardly any HTML at all compared to the complex table stuff I had.

62

thumbs up ds60

63

On to the screen.css

First thing I do in my screen.css is use a reset. The one I use targets just the elements I’m most likely to use and only does margin:0; padding:0; on them, and pulls the border off IMG and FIELDSET. There are larger resets, but those usually waste time setting things I don’t even use or wouldn’t use those values for anyways – and there are smaller resets that wreak havoc in forms. Much like Goldilocks, I find this one to be ‘just right’.

body – I pad body so we get that nice all-around border instead of having to put it into the image. The text-align’s comment says it all - IE 5.x doesn’t obey margin:auto; for centering elements, but incorrectly obeys text-align, so that’s an easy fix that I basically add out of habit at this point.

The font size declaration is in % since that’s what the text-content/page copy should always be in (see the WCAG). We will use PX in a couple places, but when we do it will be on fonts so huge NOBODY is going to complain about them not resizing in IE or adjusting to the system metric.

#outerWrapper – The position:relative makes certain all browsers (mostly opera and IE) will redraw the window properly when resized due to our min-width and max-width values. I set it up as semi-fluid since 100% fluid could be problematic for users to read really long lines of text. I wasn’t sure if you were going for fixed or fluid, so I went semi-fluid. You want fixed, just set a width here and yank the min/max code. The margin:0 auto; is for centering in standards compliant browsers, and of course a little FAC never hurt anyone.

The two values – 720px and 1200px are based off 800 and 1280 friendly. We’ve got 48px padding on body, and need another 32px on average to compensate for the scrollbar (if any) - that’s 80 px total, so 800-80==720, 1280-80==1200.

* html #outerWrapper – IE6/earlier doesn’t know what min-width and max-width are, but we can fake it using the IE specific ‘expression’ property. This lets you use javascript to set a value (I WISH that was adopted into CSS3). Before I run that script I set the 800px wide friendly width of 720px so if javascript is disabled, they get the ‘safest’ width.

#outerWrapper a - and it’s psuedostates – Just set up some pretty appearance on the anchors to work with our background color and images. You’ll notice I don’t just trap :hover - the other two are to make sure keyboard navigation across all browsers trips the hover states.

.borderTop,
.borderBottom - these share so much in common we declare their values together. I set overflow:hidden just in case to wrap the floats, set the height for the same reason. The 1px font-size is to fix a bug where IE won’t allow any element to be shorter than the current font-size; at 24px height this shouldn’t be an issue, but I set the value anyways JUST IN CASE. Finally, we load the background image. If you look at the image:

You can see that our 0 0 position (aka top left) will show the top left of our rounded part. The left 2048px is our rounded corners, I’ve got 1px of separation between the two sides to compensate for FF being a retard when resizing content, so the right 2047px is the other side - this means the maximum dynamic width we’re allowed to let these borders go is 2047px - given I put a max-width on it, I don’t forsee any issues.

… and even for their ridiculous dimensions (2048x48), the filesize is quite modest (2k) and by only using one image for each border set, we reduce the number of handshakes to the server greatly speeding up the page load. More separate files == BAD. (I generally try to bring a contentless template in under 16 separate files)

.borderBottom – this gets one value change, background-position. Sliding it up 24px reveals the bottom half of the image instead of the top half.

.borderTop div,
.borderBottom div – Again, so much in common we declare them together. Floating them right and making them 24x24 will let us draw the other corner over the parent div’s background. We just slide it over 2024px to reveal the right hand corner. Bam, we’ve got sliding doors.

.borderFirstSide – First is a height:1%; – this is there JUST to trip haslayout making IE7/earlier behave. If you don’t know what haslayout is, Google it, it’s a subject that’s been beat to death. The left padding pushes our next element off so only the left side is shown on our sliding doors.

.borderSecondSide – and this is why the tiled sliding doors HAS to be on the right side of our image. The image has to be aligned top-right since we can’t fix the height of this to say a numeric value for it’s position. The padding is just there to equalize pushing the content in away from the border equally.

That’s most of our border code covered!

#mainMenu,
#footer ul – I styled these the same way jsut because it looked nice and consistent. We’ve got centering already set from our body so we don’t need to play with that, so we just strip bullets and pad the bottom a bit to make it pretty.

#mainMenu li,
#footer li – Set them inline, so we can pretend they don’t exist.

#innerWrapper – Oooh, colors. The white background will be overwritten by our border images, and is provided just for people browsing with images disabled. (like many handheld users do).

#innerWrapper a - and it’s psuedostates – since our background changed, we need to adjust the colors and appearance. Thankfully a child ID trumps the parent when it comes to specificity.

#innerWrapper .borderTop,
#innerWrapper .borderBottom,
#innerWrapper .borderTop div,
#innerWrapper .borderBottom div,
#innerWrapper .borderFirstSide,
#innerWrapper .borderSecondSide – The only thing we need to change on these is what image is used since all the dimensions are the same.

#innerWrapper p – I prefer to use padding on these instead of margin, just because margin collapse around floats (like our borderTop and borderBottom) can drive you nutters cross-browser. 0.5 top/bottom puts 1EM between them, without making the edge facing the bottomBorder div end up too big.

h1 – ok, this gets a little tricky. The h1 is set to position:relative and the full width so that we can use text-align:center to center the span inside it. This is entirely to smack IE5 in line. The 100% width also trips haslayout fixing any absolute positioning bugs we might encounter with the absolute positioned bold tag. The fixed height and overflow:hidden is there to chop off the images-off text should someone still be using a outdated text resizing method like the one FF 2.x uses and 3.x lets you manually select – basically making it behave like the sweetly retarded cousin of Nyetscape 4 that it really is.

h1 span – display:block lets us set a width, the overflow is to chop off the width the same way the h1 does it for height - we have to do these separate if we care about IE6/earlier. The top padding and text-indent are just to make it a bit prettier, and of course our orange color.

h1 span span – the blue text is of course larger, centered, and we have to unset the text-indent to make sure it centers. The negative top margin is there just to slide it up a bit to make it pretty. We could use a shorter line-height, but FF will start chopping off text at that point.

h1 b – finally our image. We absolute position the whole bold tag over our spans, set it to full width and let the background-image centering handle the rest. Now images on you get the image logo, images off you get styled text, CSS off you get a text header. Graceful degradation is the name of the game.

#footer - everything else inside this is already set, so I just add a bit of top padding to pretty it up a little making it space the same as #mainMenu does.

… and that’s it for the CSS.

Hope this helps, and any questions feel free to fire away.

64

Ok, to break down the markup.

Whenever writing a new page, I always start with this baseline template:

http://www.cutcodedown.com/for_others/bareTemplate.html

XHTML Strict doctype - I like XHTML for the structure, and new pages should be written in STRICT. You were using transitional - and tranny is for supporting old/outdated coding techniques and behaviors that we shouldn’t be using in the first place (like target).

You’ll notice I’m rather nutzo on the formatting. To me having each property and value on it’s own line is cleaner/simpler/easier to maintain. YMMV.

On the LINK that includes the CSS, notice I included the MEDIA attribute. Screen, projection and TV generally all can work off the same stylesheet and that covers most of your visual bases. I call it ‘screen’ so I know WHICH one it is, rather than the more vague “style” – which is just SO descriptive. Handhelds that don’t read screen get the CSS off appearance, which if you use semantic markup is fine. You MAY want to include a handheld.css containing nothing but FAC (fonts and colors) and some text-aligns… and a print.css to remove elements like all the borders and hide the menus to save people ink, but that’s up to you.

Also you can see I put the > from HTML and <head> on the same line, and condense </head><body> and </body></html> to single lines. This isn’t to save a few characters, but a reminder to myself and others that NOTHING should EVER go in-between those tags.

If you scroll down into the base template I also want you to take notice of my commenting style. Because I use verbose classnames there is NO reason for me to have a ‘start’ comment… and since we know what /div means we don’t need to say ‘end’ we just need to say WHAT’s ending. The comments are placed BEFORE the closing tag for a reason – IE can actually have two VERY nasty render bugs rear their ugly heads if comments end up between floats or positioned elements - the first of these, ‘double render’ is as it says, your test will magically appear twice on the page, sometimes only a snippet of it mis-rendered. The other, ‘dissapearing content’ is aptly named as well “Hey, where did all my text go?” – putting the closing comment BEFORE the closing tag prevents this bug from ever showing up… while still letting us say WHAT is being closed making the code clear as crystal.

Now, on to the ‘real’ markup.

div#outerWrapper – This outer div is used to set width constraints and as a hook to apply some styling to elements like anchors.

.borderTop and it’s nested DIV – the classname says it all. It’s the top border. The outer div of this is the left side, the nested one is the right side.

.borderFirstSide, .borderSecondSide – again, pretty clear in their meaning. I tend not to say left and right for the name because at some future point I may have some styling that switches which div is which.

#mainMenu - that top menu. I put the bullets in manually for now, but I’d consider using a class on the last one instead with padding and a image to get that out of the markup.

#innerWrapper - this is pretty much just a hook to apply the white background for images off, and so that we can once again use the exact same…

.borderTop and it’s nested DIV – hey look, this guy again. Same class because so many properties (like dimensions) are shared between them. In the CSS we can use the ID to override background-image giving us the different appearance.

h1 and it’s children To me, your logo image is the first heading on the page, and likely the only element that would be on every page suitable for all other headings to be subsections of… so no IMG tag. It’s also a presentational affectation to that text, so we WANT the text in there. The spans are there to apply styling to the text very akin to the image, so that when images are turned off you still get a pretty page. The empty bold tag is the image replacement element, which will be absolute positioned over the text hiding it. This technique is called “gilder-levin image replacement”. View the site with images off to see what I’m talking about.

p - do I need to explain that? I think not.

We close out the two border sides, and we come to:

.borderBottom and it’s nested DIV – same as top.

close #innerWrapper

#footer - big deal. You’ll notice I did change the copyright © to just © – They mean the same thing so that’s redundant, say one or the other, not both :wink:

#footer ul - the bottom menu.

.borderBottom and it’s nested DIV – huh, these guys again.

From there we just close out the #outerWrapper… and that’s it for the markup. In my next post I’ll break down the CSS choices I made so hopefully you’ll be able to grasp the techniques.

65

Excellent idea, noonope. I would consider posting that as a new thread, with “rounded corners” in the title in some way, with a link back to either this thread or the specific post by Jason where the layout you’re starting with was first presented.

66

@deathshadow60:

MrGeeker has showed no further interest in pursuing this matter. as such, i don’t see the point of going over a new layout. i’m not implying your layout is bad and i could do a better layout, i don’t want us to go that path again (not so soon, anyway :slight_smile: ). but as you said, the question remains: how was i going to do rounded corners.

if i have your permission, i would like to start from the layout you kindly offered for download, and make some modifications to it, to demonstrate how i consider to be a slightly different way of tackling the rounded corners technique.

whichever your response may be, thank you in advance, even if only for your source code, if nothing else. :cool: i’m not gonna hide the fact that there were at least a few good things i learned from it.

67

Wow, that example looks good. I haven’t looked real close, or read all the posts yet.

I have some homework for Javascript I need to finish before I can work on a personal project, so I will look at this later today and post back tonight or tomorrow morning with an update.

Thanks! - I’ll post back later.

68

could you fix that link, I’m curious. Thanks

69

I have to say Ralph, I HATE that corner technique… Between the absurdly deep nesting for nothing, vague/meaningless single letter classnames, and that for some weird reason every time you switch between tabs in both FF and Opera the border disappears, then re-appears five seconds later like it’s reloading the image… Not exactly blowing my skirt up. In fact, I’ve been wondering where this horrid technique had been coming from since it’s one of those “dark alley” moments.

All that needs to be done for those rounded corners is a trio of sliding doors… You put one before, one around, one after. DONE. I call the technique eight corners under one roof

Which I have a [url=]more modern example of as well showing it doing rounded corners (because you always get some ignoramus who goes “they were asking about rounded corners not shadows”).

The markup I’d use there would probably go something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Template Design CSS
</title>

</head><body>

<div id="outerWrapper">

	<div class="borderTop"><div></div></div>
	<div class="borderFirstSide"><div class="borderSecondSide">

	<ul id="mainMenu">
		<li><a href="home">Home</a> &bull;</li>
		<li><a href="about">About</a> &bull;</li>
		<li><a href="contact">Contact</a></li>
	</ul>

	<div id="innerWrapper">

		<div class="borderTop"><div></div></div>
		<div class="borderFirstSide"><div class="borderSecondSide">

			<h1>
				Mr <span>Geeker</span>
				<b></b>
			</h1>

			<p>
				Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah<br />
				Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
			</p>

		<!-- .borderSecondSide, .borderFirstSide --></div></div>
		<div class="borderBottom"><div></div></div>

	<!-- #innerWrapper --></div>


	<div id="footer"><hr />
		<a href="#">Privacy Statement</a> &bull;
		<a href="#">Terms of Service</a><br /><br />
		&copy; 2009-2010 MrGeeker<br/>
		All Rights Reserved.
	<!-- #footer --></div>

<!-- #outerWrapper --></div>

</body></html>

Markup’s the easy part :wink:

Gimme a bit to wake up, get some coffee in me on this fine day off, and I’ll belt out how I’d handle that for the CSS and remaster the border images to work with what you had in your demo pics.

70

Huh, dunno what happened to that second link; Past the edit limit so here ya go:

http://battletech.hopto.org/html_tutorials/eightcorners/corners2/template.html

Which shows it used as rounded corners…

@MrGeeker - In any case, I’ve written a version based on your pictures:

http://www.cutcodedown.com/for_others/mrGeeker/template.html

Went together nice and quick. Tested working on not just every modern browser, but also all the way back to IE 5.01 – and yes, it works perfectly fine in IE 5.01

Valid XHTML 1.0 Strict, would be Valid CSS 2.1 if not for a few properties like behavior which are IE specific… There’s no excuse for invalid markup, but invalid CSS is a reality we have to suck up and deal with if you care about working cross browser as simply as possible.

As with all my examples the directory:

http://www.cutcodedown.com/for_others/mrGeeker

is unlocked for ease of access to the bits and pieces.

I know the code for this is going to be a lot to take in all at once, so I’m going to do up a section-by-section breakdown of the markup and CSS to explain it to you. Gimme a bit to write those up.

71

I guess I don’t mind the square corners on this design. I tried adding the other box on the inside but it doesn’t show up.

I’m really good and programming languages, but I’m not as good at designing the layout of the page, so I don’t know what I’m doing wrong.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css"> 
* {
margin:0;
padding:0;
}
body {
background:#ccc;
padding:30px 0;
}
h1, h2, h3 {
text-align:center;
margin:0 0 10px;
}
p {
margin:20px;
}
#wrap {
overflow:hidden; /* haslayout fix for IE7 */
text-align:justify;
border:1px solid #333;
background:#fff;
}
#shadow { /* move width and margins from #wrap to #shadow */
width:80%;
max-width:1500px; /* width of shadow */
margin:30px auto 0;
position:relative;
padding-top:22px;
padding-left:22px;
}
#shadow #a {
position:absolute;
right:0;
top:0;
width:22px;
height:22px;
background:url(shadow2.png) right top no-repeat;
}
#shadow #b {
position:absolute;
left:0;
bottom:0;
width:22px;
height:22px;
background:url(shadow2.png) left bottom no-repeat;
}
#shadow #c {
background:url(shadow2.png) right bottom no-repeat;
}
#shadow #d {
position:relative;
left:-22px;
top:-22px;
background:url(shadow2.png) left top no-repeat;
}
#shadow #e {
position:relative;
left:11px;
top:11px;
}
* html #shadow #a, * html #shadow #b, * html #shadow #c, * html #shadow #d {
background:none;
}
</style> 
</head>
<body>

<div id="shadow"><div id="a"></div><div id="b"></div><div id="c"><div id="d"><div id="e">
   <div id="wrap">
   <div id="wrap">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat.</p>
	</div>
   </div>
</div></div></div></div>
 
</body>
</html>
72

I must agree that the technique advised by DS is preferable in comparison to that described by ralph.

I too would like to see that link.

73
Off Topic:

I’d like to take this post to award deathshadow60 with the Alex’s Internet Forum Poster of the Day Award. :smiley:

So comprehensive! Nice freakin’ posts, man!

74

Hi Mr G! That kind of layout is much easier to do without tables.

But at what point are you stuck? Ideally, make a start and post a link that we can help you with.

The first step is to create a wrapping div. That’s as simple as

#wrapper {
  width: 900px;
  margin: 20px auto;
}

That will center the wrapper and leave a top and bottom margin of 20px. Of course, you could make the wrapper fluid by using a % width.

You could than do the same with another div to create the inner white div.

As for the rounded corners and shadows, there are various ways to do that as well.

Here is a handy example of doing that that a fellow SitePointer posted not so long ago:

Demo: http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow-demo.php

Tutorial: http://www.visibilityinherit.com/code/four-sided-plug-n-play-shadow.php

Hope that helps you to get started. :slight_smile:

75

There’s NO transparency on that .png - just because it’s a .png doesn’t mean it has transparency. PNG gave the smaller filesize in this case because the borders are low color depth (usually they are) - JPEG gives the smaller image on the logo because of it’s high color depth. Simple rational decision REAL developers make on choosing their image format; Right tool for the right job!

You do understand color encoding and the difference between encoding engines and which ones are optimal for what types of images right? Apparently not.

But of course the ‘real’ reason you are giving up is obvious - to do 99% of the stuff he wanted would contradict most every one of your posts.

Seriously, how were you planning on doing those rounded corners without extra hooks like DIV and SPAN in the markup? Oh wait, you weren’t… You’re such a know it all hotshot, let’s at least see how you’d do that! It’s been four days now, you should at least have SOMETHING for that.

76

you’ll do just about anything, do you? :nono: . where did i even wrote that? why are you inventing stuff just to be right? :nono:

the lack of interest from MrGeeker has stopped me from further develop the layout. i was expecting feedback and questions from him also. but i think he only needs a job done. :confused: i’m not going to address a steal need.

i must apologize, but you seem to read only what’s bright and red…:cool:

My first stage markup had nothing but the outer wrapping div from my baseline template, the first UL, the h1, the dummy content, the footer div, it’s ul, and the text. I then set up the basic layout imageless to match his desired design as closely as possible, THEN I went in adding the hooks needed to hang his graphics on that layout. That’s building using progressive enhancement and why it works at EVERY level of graceful degradation.

you need to recheck your knowledge about graceful degradation. i would love to duel with you more, but you may look like you know stuff, but…

The strategy [of progressive enhancement] is an attempt to subvert the traditional web design strategy known as “graceful degradation”

maybe you use terms you don’t fully understand? :cool: you perhaps gave us graceful degradation by mistake?

finally, about images off. images off only will not help save bandwidth. please visit this flash site and tell me how would your images off hack help with your bandwidth. then try my way, author css style off and you’ll probably, but not willingly, learn something new. :wink:

oh, and i was stuned to hear nobody ever uses pngs and tranparency… except maybe you, for this example.

.borderBottom {
	overflow:hidden; /* wrap floats */
	height:24px; /* trips haslayout, wraps floats */
	font-size:1px; /* prevent IE bug */
	background:url(images/outerBorder.png) 0 0 no-repeat;}

in any documented example i’ve come across that uses the image replacement technique you’re using it’s clearly specified about the problem it has with transparency. you should’ve mention it just to be on the safe side. you’ve documented pretty much everything else and rushed to attack my way. biased.

i also choose not to comment on unrelated and intentionally misinterpreted stuff. it’s never going to end with you, no matter how wrong or right. :slight_smile: