Designing Without Tables

HTML & CSS
1

I have a design that I think is really cool. I want to use it for my website but I have tried for weeks and then finially gave up because I can’t figure out how to do it without using tables.

I’ve seen a ton of articles on how to do it using DIVs but none of them ever worked for my exact design. I haven’t done anything with this for a few months now, and I’m getting interested again.

Does anyone know how to modify this to use DIVs instead of tables? I’ve been told its simple, but I was never able to get it right.

This one expands when I resize the browser, but even a fixed version that is centered would be fine.

Is this even possible or am I stuck with tables? I would really like to get this website going but I can’t put it out there using tables, it bugs me too much.

There is 16 images I made in Photoshop to make the two boxes, but the images are REALLY tiny, they are 1KB each.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>MrGeeker</title>
    <link href="style/default.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<table class="outer-rounded-box">
        <tr >
            <td  class="outer-top-left"></td>
            <td  class="outer-top"></td>
            <td  class="outer-top-right"></td>
        </tr>
        <tr>
            <td class="outer-left"></td>
            <td class="content">
                <div id="navbar">
                    <a href="#">Home</a>&nbsp;&bull;&nbsp;<a href="#">About</a>&nbsp;&bull;&nbsp;<a href="#">Contact</a>&nbsp;&bull;&nbsp;
                </div>
                <table class="inner-rounded-box">
                    <tr>
                        <td  class="inner-top-left"></td>
                        <td  class="inner-top"></td>
                        <td  class="inner-top-right"></td>
                    </tr>
                    <tr>
                        <td class="inner-left"></td>
                        <td class="content">
                            <div id="logo">
                                <img src="style/images/main-logo.png" alt="MrGeeker Logo" width="350px" height="150px" />
                            </div>
                            Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br />
							Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br />
                        </td>
                        <td class="inner-right"></td>
                    </tr>
                    <tr>
                        <td class="inner-bottom-left"></td>
                        <td class="inner-bottom"></td>
                        <td class="inner-bottom-right"></td>
                    </tr>                
                </table>
                <div id="footer">
                <a href="#">Privacy Statement</a>&nbsp;&bull;&nbsp;<a href="#">Terms of Service</a>
                <br /><br />Copyright © 2009-2010 MrGeeker<br/>
                All Rights Reserved.
                </div>    
            </td>
            <td class="outer-right"></td>
        </tr>
        <tr>
            <td class="outer-bottom-left"></td>
            <td class="outer-bottom"></td>
            <td class="outer-bottom-right"></td>
        </tr>                
    </table>
</body>
</html>



body
{
	font-family: Sans-Serif, Arial, Helvetica;
}

a, a:hover, a:visited
{
	color: #FFFFFF;
	text-decoration: none;
	font-size: 14px;
}

label
{
	margin-left: 20px;	
}

input
{
	margin-left: 20px;
	width: 50%;	
}

input.click-button
{
	width: 35%;
}

textarea
{
	margin-left: 20px;
	height: 150px;
	width: 80%;
}

.required-field
{
	color: #FF0000;	
	font-weight: bold;
}

.header-text
{
	color: #FF6600;
	font-weight: bold;	
}

.content-text
{
	color: #000000;
	padding-left: 18px;
	width: 50%; 	
}

.content-text-alternate
{
	margin-left: 20px;
	color: #2C8FC4;
	font-weight: bold;
}

#logo
{
	text-align: center;
	margin: 8px;
}

#navbar
{
	font-weight: bold;
	text-align: center;
	margin-bottom: 4px;
}

#footer
{
	font-weight: bold;
	text-align: center;
	margin-top: 4px;
	font-size: 12px;
}

table.outer-rounded-box
{
	margin: 1px auto 1px auto;
	border-collapse: collapse;
	background-color: #2C8FC4;
	color: #FFFFFF;
	width: 95%;
	min-width: 500px;
}

table.inner-rounded-box
{
	margin: 1px auto 1px auto;
	border-collapse: collapse;
	background-color: #FFFFFF;
	color: #000000;
	width: 100%;
	min-width: 400px;
}

table.outer-rounded-box td
{
	padding: 0px;	
}

table.inner-rounded-box td
{
	padding: 0px;
}

table.outer-rounded-box td.outer-top-left		{	width: 46px;	height: 47px;	}
table.outer-rounded-box td.outer-top-right		{	width: 46px;	height: 47px;	}
table.outer-rounded-box td.outer-bottom-left	{	width: 46px;	height: 47px;	}
table.outer-rounded-box td.outer-bottom-right	{	width: 46px;	height: 47px;	}
table.outer-rounded-box td.outer-top			{	width: auto;	height: 12px;	}
table.outer-rounded-box td.outer-bottom			{	width: auto; 	height: 12px;	}
table.outer-rounded-box td.outer-left			{	width: 14px;	height: auto;	}
table.outer-rounded-box td.outer-right			{	width: 14px;	height: auto;	}

table.inner-rounded-box td.inner-top-left		{	width: 29px;	height: 32px;	}
table.inner-rounded-box td.inner-top-right		{	width: 29px;	height: 32px;	}
table.inner-rounded-box td.inner-bottom-left	{	width: 29px;	height: 32px;	}
table.inner-rounded-box td.inner-bottom-right	{	width: 29px;	height: 32px;	}
table.inner-rounded-box td.inner-top			{	width: auto;	height: 12px;	}
table.inner-rounded-box td.inner-bottom			{	width: auto; 	height: 12px;	}
table.inner-rounded-box td.inner-left			{	width: 10px;	height: auto;	}
table.inner-rounded-box td.inner-right			{	width: 10px;	height: auto;	} 

.outer-top-left		{	background: url('images/outer-top-left.png') no-repeat top left;			}
.outer-top-right	{	background: url('images/outer-top-right.png') no-repeat top right;			}
.outer-bottom-left	{	background: url('images/outer-bottom-left.png') no-repeat bottom left;		}
.outer-bottom-right	{	background: url('images/outer-bottom-right.png') no-repeat bottom right;	}
.outer-top			{	background: url('images/outer-top.png') repeat-x top;						}
.outer-bottom		{	background: url('images/outer-bottom.png') repeat-x bottom;					}
.outer-left			{	background: url('images/outer-left.png') repeat-y left;						}
.outer-right		{	background: url('images/outer-right.png') repeat-y right;					}

.inner-top-left		{	background: url('images/inner-top-left.png') no-repeat top left;			}
.inner-top-right	{	background: url('images/inner-top-right.png') no-repeat top right;			}
.inner-bottom-left	{	background: url('images/inner-bottom-left.png') no-repeat bottom left;		}
.inner-bottom-right	{	background: url('images/inner-bottom-right.png') no-repeat bottom right;	}
.inner-top			{	background: url('images/inner-top.png') repeat-x top;						}
.inner-bottom		{	background: url('images/inner-bottom.png') repeat-x bottom;					}
.inner-left			{	background: url('images/inner-left.png') repeat-y left;						}
.inner-right		{	background: url('images/inner-right.png') repeat-y right;					}

:frowning:

2

@MrGeeker: If you have any questions still, go on and ask. DS has provided a great foundation for you despite the conflicting opinions and thread confusion. If you need help with further customization, let us know.

3

actually, i’m calling it quits. MrGeeker will no longer suffer from “I’m too confused anymore.”

he’s right. “wow this thread sure got derailed.”

i’m sorry to have dared and criticized your layout, and started my own. that started a personal and useless vendetta. i promise it won’t happen again. :wink: i actually learned some things. thank you deathshadow60.

i’m going to gracefully degrade my self from this thread, as our feuds are not helping MrGeeker (not that he was actually looking for help. as a former teacher i can still spot a freeloader (and no, i wasn’t an html teacher :stuck_out_tongue: but some of my former students are working today at microsoft and other big players. i’ve only started recently into web programming. but still, it’s possible you got graceful degradation from somebody like me, deathshadow60 :p)).

there can be only one. towards a progressive enhancement out! :cool:

4

This should be worth a laugh.

With it’s fatter file size which is why you don’t use .png for everything. 16k at 5% lossy vs. 24k, gee lemme think.

… and it’s even FATTER file size and need to throw scripting hacks at IE6 to even make it work. Let’s see, if we do a black-edge then alpha blend blur that ends up what, 64k just for the logo? Yeah, that’s desirable.

I have rarely seen a website design that NEEDED to WASTE BANDWIDTH on alpha transparency… sometimes palette transparency can do the job (corners on borders) though in many cases all you need to do is precomposite the background or have a second span to apply it – though as a rule if a design NEEDS transparency on something like a logo to function, I throw the design away since that one image will usually end up the size of what I set as the ideal for my ENTIRE TEMPLATE.

Sorry, but that’s a “Oh noes, not that” moment. I think my reaction to transparency is like your reaction to images off… Though you seem to be ignoring my explanations of WHY images off is important. Like when I’m at a friends house 40 miles up the road where 33.6 dialup is a good day… or on the phone where

If you REALLY insist on doing that and don’t give a flying **** about mobile users, bandwidth restricted users, etc – at least use the text-indent version I provided.

Which isn’t needed for this layout.

Which isn’t needed for this layout – and said technique is in fact MORE powerful for doing those since it can result in LESS CSS (put the span in the anchor, set the anchors dimensions fixed and overflow:hidden, move the anchor on hover instead of sliding the background, means you only have to state your background-positions once instead of twice for hover states)… In general that goes way beyond the scope of what MrGeeker was asking for.

You mean garbage artsy crap that blows a megabyte or two on their website making nobody want to visit, right?

… and the option for doing those rounded corners dynamic width? You’re still screwing around in the markup I have yet to see the actual part he needed replaced from the tables out of you. He wanted those rounded corners without using a table – To do that you are either going to nest six div deep, use three sets of sliding doors, or resort to CSS3 which isn’t real world deployable to pull that off.

Well, unless you go into the truly whacko land of abusing a ordered list (so you can try and fail to line up a bullet image)… or the total retard land of using one giant TALL image meaning you can’t have the page taller than a certain height and that you end up blowing half a megabyte on just the one image file.

You need hooks to apply those images – and you’re going to be hard pressed to find them without either adding markup, or using technologies that won’t work in ANY version of IE.

Seriously, implement the rounded borders without CSS3, then say I used “too many div and span” since you are going to find yourself forced to do the same.

You keep using that term and don’t seem to understand I built the site with progressive enhancement – that’s WHY it has graceful degradation. You build it up so that you add technologies (CSS layout, then CSS images and markup hooks for them, then scripting for behaviors) it means that you should end up with graceful degradation as you remove technologies in the opposite direction. One term is no older than the other - land’s sake they are two sides of the same coin.

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.

Oh, and ease up on the bright red, it’s effectively illegible on the white background :wink: WCAG and all that.

5

… and it would, if they all obeyed them consistently. Some use “screen” and turn off images. Some use screen and ignore all CSS except text-align, font-weight/style and colors, some use a mix of “screen” and “handheld”, some just use handheld… and making some simple choices both in the markup and the CSS allows you to deal with that.

Except many handheld browsers turn them off WHILE using the screen CSS. Many users want to have the normal formatting because most websites are not designed to handle having no CSS properly… Images in the CSS (which should be all presentational images) are the easiest first level bandwidth reduction, and there’s NO reason you cannot give them attractive colors and layout just becuase they don’t want the fat-ass images sucking down their pay as you burn bandwidth plans.

Really, is that why the IMG tag has alt text, and the entire reason to put non-content presentational images in the CSS in the first place? Hack my…

BWAHAHA… Turning off images is 'useless to save bandwidth"… Ok, that has to be the funniest thing out of you yet. Given that even on a simple page like say… the board index here at sitepoint images are more than 50% the space after compression (a full quarter before the 200k of bloated javascript for nothing bull is compressed)… and that on most pages images are more than 75% of the bandwidth consumed if the developer doesn’t throw javascript at everything, it’s a time proven technique - hence why Opera’s small screen (aka it’s mobile behavior – NOT to be confused with Mini), Blazer, Omniweb, Nokia’s in-house on the el-cheapo phones all turn off/ignore CSS images while obeying FAC.

Which is why it too should have text fallbacks - said technique being more useful for creating things like rollover effects as well.

Which is why you either pre-composite, add a extra offset wrapper, or use close enough AA around the corners if all the images are is rounded corners for palette transparency.

Alpha transparency is one of the biggest /FAIL/ at web design on bandwidth concerns ALONE, which is why as a rule I don’t use them and don’t recommend others do either. It’s something the PSD jockeys all have a raging chodo for without taking the concerns of the actual technology into consideration.

I didn’t use transparency on those .png - since his example image didn’t need it. If I were to do so, I’d use the absolute positioning method outlined in the VERY FIRST LINK I put in this thread instead of floating the inner div.

Said corners built on an entirely different technique from anything you’ve tried discussing so far, since there’s no text inside them to even be dealing with. Again, you’re harping about the technique used on the h1 (which works just fine) when we still haven’t seen any rounded corner code out of you; and are unlikely to the next three days I would assume?

I have been probably longer than you… since that’s how you GET graceful degradation.

Create the markup with zero concern for layout and every concern for semantics. Create the layout in CSS without images, then go to the goof assed paint program to make the graphics to hang on the layout. At steps two and three you may be forced to add presentational hooks to the markup - just make sure it’s either empty tags so you don’t bloat out the markup with classes, or that you use semantically neutral tags like DIV and SPAN. After all, that’s what they’re FOR.

I’ve been saying that for eight bloody years.

… and if you think you can do dynamic width unlimited dynamic height rounded corners from images without some extra DIV or SPAN in there, you’re deluding yourself. I mean, what are you going to do, use some slow bloated javascript to add them? Use CSS3 that isn’t likely real-world deployable for another decade?

But of course, we have yet to see you even address the actual part MrGeeker came here asking for help with.

6

Guys, take it down a notch, now. When you strip the personal sniping out of this thread, there’s some excellent work in here, but the potshots at one another end here. Thank you.

7

and i thought you’re providing separate css files for treating media such as “handhelds and other devices”, css files that are supposed to resolve issues just like this one :slight_smile: if that, then why you need so desperatelly your old aged (not so) gracefull degradation. this is why you begin constucting the layout to look good without css in the first place :wink:

let me state this again: images are put there by author css. it’s logic not to use it when you are concerned about bandwidht. turning off images it’s a hack for that matter. a useless one for that purpose: to save bandwidth. so stop bringing this up. also, if navigation is graphics, you cannot navigate with your images off. and if you think your image replacement technique helps you there, it doesn’t. it only makes matters worse when using images with transparency, providing a bloated markup and a confused interface to start with, showing text bits under transparent areas of those images. the image replacement technique you’re using for your example only looks good on paper. on a real web site with real graphics (png with transparency, like the ones you’re using for rounded corners) it FAILS/HARD.

progressive enhacement. start preaching that :cool:

8

one would think your image replacement technique it’s 100% full proof. well, i give it 0%. let’s see.

you probably need to come back from 1998, when graceful degradation was a new thing :slight_smile: try progressive enhancement. graceful degradation is the older of the two concepts.

[B][COLOR=“Red”]why? well, back in 1998, you jpeg logo would look just fine. but nowadays we can use png, and even with transparency. guess what happens with your beautiful image replacement technique when you have a logo that has transparency? FAILS/HARD. from the very

  1. Everything ON
    start. take a look at the screen shot below. your web site fails even before it was even born. my image replacement technique it’s better. well, the one i use :slight_smile:
    [/COLOR][/B] i don’t hate to be the one to break it to you :slight_smile: (laugh harder) because you should’ve mention that all along: you can’t use transparency with your image replacement technique. the fair thing to do. not try to push my nose in the ground just for fun, using false arguments and intimidation techniques. so far i’ve a provided better way.

one reason why i chose that image replacement technique over yours, and why you are preaching a broken layout that doesn’t do well in the first place: images with transparency, images for navigation elements using your image replacement technique, will result in an ugly layout to start with. most modern graphic employ the use of pngs and transparency. your techniques dies there.

another reason why your layout it’s from 1998: your are using so many <div>s and <span>s as presentational hooks making your markup a barbaric one. you are preaching about clean markup all over this forum. i have to say you have not provided one in this example. :nono:

that’s why i’ve mentioned progressive enhancement to you earlier in the thread. you better start thinking about it.

9

Well, I believe I did ask some questions on that, and they remain in place - what are you using for a divider (if any)? What’ s the content for the columns, is the background on these columns going to be colored, etc, etc…

Pretty much though any standard two column layout should be able to be placed where the standard content is now after the h1.

Simple left sidebar first for example:


<div id="fauxColumns">
	<div id="sideBar">
		Sidebar stuff here
	<!-- #sideBar --></div>
	
	<div id="content">
		Big column content
	<!-- #content --></div>
<!-- #fauxColumns --></div>

with the CSS:


#fauxColumns {
	overflow:hidden; /* wrap floats */
	width:100&#37;; /* trip haslayout, wrap floats */
	/* if you are going to have a faux-column background image, add it here repeat-y */
}

#sideBar {
	float:left;
	width:192px;
}

#content {
	margin-left:192px;
}

The margin rides UNDER the float, making sure Content doesn’t indent in when the sidebar is shorter… You put your background image (if any) on the float wrapping div#fauxColumns to fake the appearance of both columns stretching. Faux columns typically means a fixed width sidebar - but again with Firefox being a retard about how it rounds off values that’s probably the safer choice anyways.

Another technique involves putting the fluid content column first, but that’s pretty complicated and you should hold off on that until you have a firmer grasp of using DIV and floats.

10

Yeah, and the techniques presented later on that page are even more bloated trash that still provides ZERO images off graceful degradation.

The final technique:


h1#newrepl {
    padding: 35px 0 0 0;
    overflow: hidden;
    background-image: url("hello_world.gif"); 
    background-repeat: no-repeat;
    height: 0px !important; /* for most browsers */
    height /**/:35px; /* for IE5.5's bad box model */
}

Is worse than the original filled with nonsense that not only shows a row of pixels from the top of the text in most browsers (laugh) if lf/120dpi is enabled, and uses non-recommended invalid CSS hacks to do what as I said before, is functionally the same as just using a huge text-indent.


h1#newrepl {
	height:35px;
	text-indent:-999em;
	background:url(hello_world.gif) no-repeat; 
}

Functionally identical and a fraction the code, and JUST as broken. They’re all rubbish techniques that shouldn’t be used because they do not provide full graceful degradation.

Of course you can tell that article was either written a decade ago or by people who don’t know enough about CSS to be opening their mouth on the subject with the non-condensed properties and use of double quotes on elements that don’t need it – much less the convoluted train wreck their final CSS ended up.

No, it’s one of the standard tests for graceful degradation as many handhelds and other devices and many users will browse pages with JUST images disabled since they are the lions share of bandwidth on most sites, and often contain bandwidth wasters that aren’t even part of the actual content.

It’s why properly written gracefully degrading sites test for:

  1. Everything ON

  2. Javascript off, images on, CSS on.

  3. Javascript off, images off, CSS on

  4. Everything off.

If a page doesn’t meet those requirements, it’s probably not very well thought out.

If that’s all you think needs to be tested for, or even is WHY we’re using image replacement instead of a IMG tag, /FAIL/ hard.

11

if you want an “easy” answer, i’m sure deathshadow60 will soon provide you with one. just be careful not to hurt yourself with it :slight_smile: like i’ve said, i think you’re better off searching the web for freeware templates until you find one that suits you. i’m not going to provide you with fast-food coding :slight_smile:

12

I’m too confused anymore. I thought this would be an easy design. I just need to know how to add columns for my content.

13

did you even read the full article? that part you’re pointing out IT’S NOT THE TECHNIQUE! it’s just a reminder of an OLD TECHNIQUE! a preamble. that’s what i’ve been trying to tell you but you are busy bashing me :slight_smile: read further down and see the technique. it does not involve any <span>, any visibility:hidden. PLEASE READ THE FULL ARTICLE!

and try out my layout. with and without author style. turning images off it’s a broken way to prove a broken point. how many images are in a page put there by css style, and how many by <img> elements? for an effective image free surf experience you need to turn down author css style!

Opera, view -> images -> No Images NOT :stuck_out_tongue: ! view -> style -> user mode YES! :stuck_out_tongue:

about my broken english: one day you’ll be happy to meet a nice fellow like me that you can ask for directions or help, you being in a country which language you don’t understand or speak, broken or not. and i’ll gladly help any, without making such a big fuss about your lack of knowledge :wink: think you can appreciate this?

14

You are using it when you don’t have to - I was using it where I was forced to through the need for presentational hooks - there’s a difference… and trust me, if CSS3 was real world deployable those DIV would all get kicked to the curb since I could do the same thing with multiple backgrounds and :psuedo elements like :before and :after

HUH? He came here for help getting his layout idea to work without tables - which is what I did in less than 20 minutes coding and dicking with images using standard techniques for doing so. I then documented so he can learn it at his own pace… and it took me longer to do the documentation than the layout. So far, all you’ve done is argue in favor of broken techniques in broken english that isn’t teaching anyone a blasted thing. In fact, you are advocating techniques and methodologies that are some of the worst coding advice I’ve seen this side of a WYSIWYG or stock Adobe template.

Go into Opera, or FF with the web developer toolbar installed… view that image replacement technique in Blazer or Opera Mobile (not mini)… Hey, there’s no text! Guess what, visibility:hidden text is also ignored by google!

That technique is BROKEN. It puts visibility:hidden on it — which means CSS on images off, there’s nothing there!!! What’s so hard about that to understand? I mean, what do you think visibility:hidden does? It HIDES it… whether the image is present as a background or not!

http://www.cutcodedown.com/for_others/noonope/imagesoffNoText.png /FAIL/ HARD.

Opera, view -> images -> No Images

Opera, view -> small screen (also disables CSS images while obeying FAC)

Firefox with web dev toolbar, Images -> disable images -> all images

etc,etc, etc… Very common setting for people on bandwidth restricted connections. VERY common setting on phones… and part of WHY image replacement is used in the first place!

… and screen readers like JAWS and search engines like google will also ignore the text if it’s set to visibility:hidden. In the case of search engines they started tracking things like that in the CSS so as to track down people abusing that for content cloaking.

It’s a very poor technique for image replacement since it doesn’t DO one of the entire reasons to be using such methods in the first place!!!

15

you need to get your story straight at some point :lol:

comments. i told you they are not going to make it to the live page. they are for developers, for me. it helps me, if it doesn’t help you, i’m not forcing it on you. just showed you there is a false problem for you, not using them because of the floats, that’s all :stuck_out_tongue:

divs. you pour down hordes of <div>s for rounded corners, but you crucify the guy that actually use it for some normal content. <div> is for structure. a good thing to remember. and this layout, (header, content, footer), it’s a natural and common one. it allows for future content in a easy way. and yes, his point it’s a false one. there are numerous sites with multiple footer lists menus. and multiple header lists menus. he was just picking on me to make you happy :nono: and your excuse that this is MrGeeker layout makes me smile out loud. he came here for you to change his layout, right.

images. image replacement technique that i’m using never NEVER hides the text. actually, the text is ALWAYS THERE. so your point it’s a false one. you better read it again. i believe you’ve skipped some parts, with all this excitement of nailing me to the ground :slight_smile: most of the images are served today by css styles. so if one wants to navigate without images, first thing to do is to disable author css style. one will not disable just images, as the page would look like the surface of the moon. he/she would not know where and what to press. you need to try the layout like you should: with author css style and without author css style. you’ll see what i mean.

and could you please refrain in further attacking me and focus on attacking my code more, please. thank you :cool: i’ve been nothing but civilised to you :slight_smile:

i wish i was a yoda… but if you think transition habits from table layouts to non-table layouts are done in 10-20 minutes, history is proving you wrong. i will eventually get there, columns and all, but i thought MrGeeker wants to learn, not to score an exam off on our backs. and i’ve seize the opportunity to learn me something new. i’m not ashamed. are you?

16

Which he too thinks is a really stupid reason to have a comment. As if that indent after and having six characters preceeding it instead of four is magically harder to read. <div means start, id=" gives you the name, what the devil do you need the comment for. Much like saying “end” when you have </div> - no, really? It’s dumbing it down to being ridiculously redundant. You were complaining about wasteful code in my CSS, when you’ve got all these trash comments in the file that doesn’t cache across pages?

(re: only UL likely to be in #header)

Because that’s the layout MrGeeker had? :rofl:

Which would inherit to Content which we don’t want. Your code is radically different from mine due to that extra DIV around #mainMenu that I didn’t waste my time on even having. If you are planning on using that div just as a presentational hook for the borders, it should probably have a class or id that says it’s just there to be the border… otherwise, what is it even there for?

Though I think that’s what I should have said originally - why even have that DIV? I see people do that all the time and go “what the hell are you doing?”. There’s no styling being applied that warrants that extra div – but then I almost never have a #header div since usually I’ve got plenty of semantic tags I can hook onto in the first place like the H1 and then put the ID on the one element that needs it. I never understand when you look at most people’s code and see nonsense like


<div id="header">
	<div id="logo"><img src="images/logo.png" alt="company name"/></div>
	<ul id="nav">
		<li>Some item</li>
	</ul>
</div>

When in most cases that could simply be:


<h1>Company Name<span></span></h1>
<ul id="mainMenu">
	<li>Some item</li>
</ul>

Without the extra wasted div. IF your going to be slapping classes or ID on each and every item in the first place, what the devil does one even need the wrapping element for? Part of why I’m not a fan of the ‘header’ tag in HTML 5 since the only legitimate reason for it is justifying the people who want that extra tag for Moses knows what reason. I keep thinking “header – don’t we already have perfectly good tag called numbered headings for that job?” DUH.

I do have to agree on this one. Right now apart from some dummy content I don’t even see anything that warrents the use of P or other block level containers, but that’s because I don’t consider anything that would go in the layout outside Content on my version to even qualify as stuff that goes inside a P – which is what I’m assuming c2uk was referring to doing. The fragmented text in the footer is not a grammatical/structural paragraph, nothing above the h1 qualifies as a paragraph… It’s all just fragmented non-content flow crap. Hell, the only reason I have a P in the placeholder text was just to test the spacing for when real content ends up in there.

Nothing wrong with line-breaks when you aren’t trying to apply extra meaning to the text.

Though I think that opinion comes from my using P in the grammatical sense on my pages and not the typographical - if using it as a semantic tag that means structure/grammar – NOT typography since that’s presentation… and presentation is supposed to have no place in the markup, or if forced to put presentation in the markup use a semantically neutral tag like DIV or SPAN to pull it off.

No, disappearing content and double render also plague IE7, and no display:inline on the floats does NOT fix it. The ONLY thing display:inline fixes is going to be

You add the floated two columns mrGeeker mentioned wanting (which I was going to add to my example today) your commenting style WILL depending on screen width (odd/even) and OS/IE version combo make the content of one of the columns either disappear, partially render, or worse have a block of the text render a second time in some bizzare spot.

Don’t know who told that website you linked to that IE7 doesn’t do that, because it’s bull.

In either case though, it’s stupid to be wasting hacking around a bug that can be avoided by not using a redundant comment in the first place… you know, less wasteful markup? :rofl: (seriously, complaining about waste in my CSS and then does this in the markup? Whiskey tango foxtrot)

…and is complete broken useless crap since it doesn’t work when images are disabled, AND makes the text ignored by search engines like google and screen readers that ignore text set to visibility:hidden. So far as they are concerned you would now have a empty h1.

Elegant – NOT. Turn off images, hey look, there’s nothing there. You might as well skip using the span and use text indent:


h1 {
	text-indent:-999em;
	height:35px;
	background:url(images/h1Logo.png) top center no-repeat;
}

<h1>Some text</h1>

Nearly identical to the article you linked to except that first the search engine and screen readers will actually see the text… and just like that article completely useless since it doesn’t show the text images off/CSS on…

Sure did, and I’m starting to laugh at it occurring over a 10-20 minute layout… that two days later “Yoda” there still hasn’t shown anything more than partial markup.

17

ok MrGeeker, second little step.

images in web pages. there are a number of reasons these are not always welcome. some people choose to surf without styles and/or images. let’s respect that. some have no other way. let’s respect that also.

we are going to show the image for logo only when author css style is on. that way we get rid of that ugly placeholder. and we can use text to better explain our content (for accessibility reasons), text that will be replaced by images when visitors decide they want that. to achieve this, we use the background style for the element, <h1 id=“logo”>MrGeeker</h1> in our case.

there are a number of techniques for replacing the text with an image. i’m going to use here one that i like and i find it’s very elegant. it’s not using any additional <span> elements, nor does it employ the use of negative margins.

the code looks now like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
	<link href="screen.css" rel="stylesheet" type="text/css" media="screen">
    <title>MrGeeker</title>
</head>
<body>
<!-- header start --> <div id="header">
    <ul id="nav-header"><li>
		<a href="#">Home</a></li><li>
		<a href="#">About</a></li><li>
		<a href="#">Contact</a></li>
    </ul>
<!-- header end --> </div>
 
<!-- content start --> <div id="content"><hr>
    <h1 id="logo">MrGeeker</h1>
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah <br>
<!-- content end --> </div>
 
<!-- footer start --> <div id="footer"><hr>
    <ul id="nav-footer"><li>
		<a href="#">Privacy Statement</a></li><li>
		<a href="#">Terms of Service</a></li>
    </ul>
    Copyright &copy; 2009-2010 MrGeeker<br>
    All Rights Reserved.
<!-- footer end --> </div>
</body>
</html>

#logo {
    padding: 155px 0 0 0;
    overflow: hidden;
    background-image: url("h1Logo.png");
    background-repeat: no-repeat;}

i’ve taken the liberty to “steal” the logo from deathshadow60’s example directory :slight_smile: thank you.

you’ll notice that i’ve removed css hacks that were used to target ie5/5.5. these, along with others, will be added in a separate css file, when the time comes.

also, i’ve been doing something different with the coding style. let’s see what people think of it.

18

why is that? we’re getting there. on each little step is bound that some issues will appear. you need to address them.

after picking up the real content in your table design, next we’re going to gradually add css style to it, to achieve your goal. after that, cross browser inconsistencies issues. i said it will be a longer journey, didn’t i? but hey, you are free to use a freeware template you can find all over the web. but that will teach you nothing. thanks to deathshadow60 and Stevie D i’m also learning new things doing this :slight_smile:

if there aren’t any more objections, next on the agenda: logo image.

19

wow this thread sure got derailed.

20

i’ve looked into what you’re saying about comments and floats. it only applies to ie6, and only when comments are between floats. which is not the case here.

however, i found out that it’s not really a problem,

This bug occurs only in IE6 and has been fixed in IE7
and it only takes a ie5/6 fix, something you should already be using, to address the IE5/6 Doubled Float-Margin Bug. as soon as you’ve patched that, [URL=“http://www.positioniseverything.net/explorer/dup-characters.html”]your comments screwing your floats bug also disappears.
Simply placing {display: inline;} on the float is all that is needed!
simple.

this one goes into the ie hacks category which you already have partially covered in your css. adding it, one way or another, will not change anything, but instead, will fix along some other bugs.

and since this bad behaviour only appears when css is applied, at this stage of my layout it’s a little premature to worry about it. i started this layout simple, targeting a compliant browser. different aspects of cross browser inconsistencies will be added later on. this is why i choose to also start my css code clean, and then add hacks and fixes separately. one day they’ll go into the garbage disposal unit.