CSS Help needed

[HeroOfPellinor]

Originally posted by: Alone

Originally posted by: HeroOfPellinor
Right click on this page and choose "view source". You are going to see tables being used for the majority of positioning. Yet here you all are blissfully contributing and entertaining yourselves on these forums. Has it detracted form your experience? Not enough to keep you from posting thousands of times.

That is by no means an endorsement of tables over CSS. I think the arguments speak for themselves. I just thought it would be funny to see what the site we're arguing this on uses. It does, however, fly in the face of this implication of yours that tables aren't standard and aren't effective.

FuseTalk was privately developed in 1999, and they haven't updated. The only point you're making is that it was good enough before. Well, this isn't 1999 anymore. Sure, it might still work, but I'm sure if they were to recode the software for whatever reason, they'd choose CSS over flat-out tables.

So it was good enough before? But it isn't any more? Cause later you say "it may still work"? Does it or does it not?

As far as what they've been doing. The forum has been updated with lots of CSS formatting and a little positioning and is now written in ASP.NET and they've adapted it for CFMX. I guess they are just a bunch of slackers stuck in the last century. Recoding the few dozen pages the forum software consists of would be elementary in comparison.

:roll: Come on. This isn't 1999? That's all you got now? Guess what, we're still using GIFS and HTTP and they go back further. Can we all have a nice JPG vs PNG debate now??

 

[bluestrobe]

Originally posted by: Alone

Originally posted by: bluestrobe
I can see why people stick with the old. From my research so far, it would take me almost a week to code what a table does in 20 minutes for my needs.

So can you load more than 2 CSS files into one page? My current menus are CSS and I would like to keep their basic design. Or do I have to add the menu code into the new css layout?

You can have as many stylesheets as you want. You can add your new CSS code into the old menu stylesheet.

I still have to learn how to link the information from the content page to the style sheet. I've found a few examples but it seems pretty hard.

edit: Also looked up on the book "CSS Mastery". That book is way beyond a beginner book on CSS. Any other recommendations?.

 

[HeroOfPellinor]

Originally posted by: sourceninja

News posting sites are one thing. If it all blurs together into one big block of text with line breaks you still get the general drift.

Again, who is Slashdot and Wired going to alienate? Who goes there but nerds? What self respecting nerd doesn't have the lastest version of Firefox running on his Linux partition? If you have a specific audience like that, then go for it......the lost user base will be negligible.

 

[Alone]

Come on. This isn't 1999? That's all you got now? Guess what, we're still using GIFS and HTTP and they go back further. Can we all have a nice JPG vs PNG debate now??

We can have that debate if you want. However, I'm arguing that the use of tables is incorrect in most situations, not simply that it's inefficient.

 

[Atheus]

I could write my pages with tables and HTML attributes, sure, but then how would I do that 'printer friendly' button which switches the entire page to a simpler style with no reload? how could I achieve high accessibility? How could I update the look of thousands of individual pages in only 5 minutes?

 

[HeroOfPellinor]

Originally posted by: Atheus
I could write my pages with tables and HTML attributes, sure, but then how would I do that 'printer friendly' button which switches the entire page to a simpler style with no reload? how could I achieve high accessibility? How could I update the look of thousands of individual pages in only 5 minutes?

For the most part, you're mistaking CSS for formatting and CSS for positioning. And you're forgetting that to use that cool functionality of CSS like changing one style class for hundreds of pages requires a large amount of forsight and planning to be able to pull of effectively and that all eats into development time. As for me, I mostly use server side includes for repeatable elements and there are passable replace functions in most good test editors.

Most pages I know of that are printer friendly are just text and line breaks. But, ya, it wouldn't be any more of a risk to use tables for a printer friendly page than it would CSS if you needed some complex design.

 

[Alone]

Obviously neither of us are willing to budge, so let's find some middle ground. How's this?

1. Using tables to arrange a layout is acceptable and easy, even if that's not the original intention.
2. CSS is more flexible.
3. It's best to learn "the right way" if you're starting from nothing, rather than start with tables and make life complicated when it comes time to change.

Simply put: Use what you want, so long as it works for you. Just know that if you ever plan on getting into professional web design, CSS will be expected, and you will want to learn it and know how to use it in the case someone asks for it.

 

[HeroOfPellinor]

Originally posted by: Alone
Obviously neither of us are willing to budge, so let's find some middle ground. How's this?

1. Using tables to arrange a layout is acceptable and easy, even if that's not the original intention.
2. CSS is more flexible.
3. It's best to learn "the right way" if you're starting from nothing, rather than start with tables and make life complicated when it comes time to change.

Simply put: Use what you want, so long as it works for you. Just know that if you ever plan on getting into professional web design, CSS will be expected, and you will want to learn it and know how to use it in the case someone asks for it.

I'll sign off on that so long as there is an addendum to #1 which mentions the fact that tables are more broadly supported.

I think the best compormise is what you will see on most high profile sites and that is tables for the core positioning and CSS for formatting. You get the best of both worlds....granular control over appearances and quick and effective positioning with maximum compatibility for the least effort.

So, yes, learn them both. If you are designing a site that needs to conform or appeal to a wide audience, then go with tables. If the goal is not for profit or you have a tech-literate target audience then pure CSS for everything would be fine.

 

[Alone]

I think the major compatibility problem with CSS is that IE doesn't support it exactly as Firefox/etc do. Tables have been right, simple and easy to implement properly across all browsers. So yeah, there would be more compatibility with tables, but that's not a flaw in CSS, it's a flaw in IE (which I assume is only a matter of time before it is corrected). Of course tables are important to learn (easy, anyways).

 

[troytime]

Originally posted by: Alone

Originally posted by: HeroOfPellinor
Right click on this page and choose "view source". You are going to see tables being used for the majority of positioning. Yet here you all are blissfully contributing and entertaining yourselves on these forums. Has it detracted form your experience? Not enough to keep you from posting thousands of times.

That is by no means an endorsement of tables over CSS. I think the arguments speak for themselves. I just thought it would be funny to see what the site we're arguing this on uses. It does, however, fly in the face of this implication of yours that tables aren't standard and aren't effective.

FuseTalk was privately developed in 1999, and they haven't updated. The only point you're making is that it was good enough before. Well, this isn't 1999 anymore. Sure, it might still work, but I'm sure if they were to recode the software for whatever reason, they'd choose CSS over flat-out tables.

they've redone it several times, even converting it to aspx (from cold fusion) a couple years ago.

 

[sourceninja]

Originally posted by: Alone
I think the major compatibility problem with CSS is that IE doesn't support it exactly as Firefox/etc do. Tables have been right, simple and easy to implement properly across all browsers. So yeah, there would be more compatibility with tables, but that's not a flaw in CSS, it's a flaw in IE (which I assume is only a matter of time before it is corrected). Of course tables are important to learn (easy, anyways).

You people repeat the same misinformation. Across all browsers...what about my cell phone? What about blind people? What about my text only browser? Tables are only easier to make to people who do not know css. Thats like saying windows is easier then linux/mac/etc. It's only easier because you know it. In terms of support css support covers every browser from IE6 and up.

Everyone acts like it takes major work to make pages look the same in IE6, firefox, opera, etc. I find this simply to be untrue. It takes more work for me to make a table layout then it does to make a css layout and fix the little problems (which are small, if you have done it once you can do it again without any effort).

None of my clients have ever had complaints, none of my friends clients have ever had complaints. We are not talking about some little website either, we are talking about major company. Microsoft.com, Bayer.com, wired.com, aol.com, espn.com, cnn.com, slashdot.net, amazon.com (partially tables and css for layout), google.com, apple.com (has a couple tables, but mostly css the tables make sense), buy.com, ebay.com (again both are a mix, but mostly css), yahoo.com, youtube.com (uses tables to display data that should be in a table), blogspot.com, newegg.com, sears.com, target.com, walmart.com, whitehouse.gov, webmd.com, nd.edu (major college), salesforce.com, wired.com, etc.

I could keep going, but the fact is real modern web designs use CSS. Tables for layout is left to people who can't learn new things and want to target a smaller audience as cell phone web browsers grow and new ways of accessing the internet appear. The future is CSS, deal with it, and learn it if you want to keep making real websites.

 

[Alone]

Originally posted by: sourceninja
You people repeat the same misinformation. Across all browsers...what about my cell phone? What about blind people? What about my text only browser? Tables are only easier to make to people who do not know css. Thats like saying windows is easier then linux/mac/etc. It's only easier because you know it. In terms of support css support covers every browser from IE6 and up.

I'm the one debating for CSS over tables. I've never designed for cellphones or blind people, so I wouldn't really know. Plus, I haven't used tables in a while, so I'm not aware of how screwed up they are in those cases.

 

[mulletgut]

I think I just saw the easter bunny.................................
#bunny {
colour: white;
border: black;
eggs: many;
love: much;
peace: to-all;
}

 

[Alone]

Originally posted by: mulletgut
I think I just saw the easter bunny.................................
#bunny {
colour: white;
border: black;
eggs: many;
love: much;
peace: to-all;
}

:laugh:

 

[bluestrobe]

http://www.policeposers.com/test/

This is what I've been playing with for a bit. One thing I can't figure out is how to get everything to line up. It seems now matter what I do there is at least one cell overlapping the other or a small gap between them. This is the basic layout I want with a center, header, and two sides for adding menus, counters, ads, ect. The menus are a carry over from my old site design until I find a suitable replacement although I did tweak them a bit. How do I line them up based on percentages rather than pixel which is what it lining things up now. Also can you make the cells work together with positioning rather than trying to work with 4 indivual cells and dealing with thier placement?

 

[Alone]

Try this and tell me if it's what you're after. Is this what you want?

#leftcontent {
position: absolute;
left:8px;
top:144px;
width:200px;
background:#fff;
border:1px solid #000;
}

#rightcontent {
position: absolute;
right:8px;
top:144px;
width:200px;
background:#fff;
border:1px solid #000;

 

[bluestrobe]

Originally posted by: Alone
Try this and tell me if it's what you're after. Is this what you want?

Thats the look I'm after. However, I checked it in IE7 and it was worse than before. Something that's probably not avoidable.

 

[Alone]

Originally posted by: bluestrobe

Originally posted by: Alone
Try this and tell me if it's what you're after. Is this what you want?

Thats the look I'm after. However, I checked it in IE7 and it was worse than before. Something that's probably not avoidable.

I don't have much time right now, but in the morning I'll try to get it sorted out. I don't have IE7 for testing, but I might be able to get it going anyways. The best solution at this time would be to use CSS hacks for IE.

An example of such:

#header {margin-bottom: 3em;}
html>body #header {margin-bottom: 1em;}

Since IE doesn't understand html>body, it'll ignore it and use the first rule. Firefox will use the second (last). So, if you need a padding of 10 in IE, and a padding of 5 in FF, you'd do something like this...

#header {padding-left: 10px;}
html>body #header {padding-left: 5px;}

Another, simpler way to achieve the same effect:

#header {padding-left: 10px;}
/* Hide from IE-Mac \*/
#header {padding-left: 5px;}
/* End hide */

Firefox doesn't let you comment CSS quite the same as IE does, so IE will ignore it, but FF won't.

Another one:

<!--[if IE]>
do something
<![endif]-->

So,

#header{padding-left: 5px;}
<!--[if IE]>
#header{padding-left: 10px;}
<![endif]-->

EDIT: Mind you, some of these may not work in IE7, so you'll have to test a few of them out first.

 

[HeroOfPellinor]

Wow, this really IS the better way to handle page layout.

 

[Alone]

Originally posted by: HeroOfPellinor
Wow, this really IS the better way to handle page layout.

Hopefully that wasn't sarcasm.

 

[kingtas]

Hey guys. I use html tables because of different screen sizes and resolutions. I can make a table say 900 wide and align it center, so no matter what it displays in the center.

I have played with css a little. How would I accomplish the same thing changing this code? Thanks for the help.

#section1 {POSITION: absolute; Margin: 10; TOP: 10px; LEFT: 10px; height: 300px; width: 200px; BACKGROUND-COLOR: #ffd700; PADDING: 5px; BORDER-STYLE: solid}

 

[bluestrobe]

I'm starting to understand but my two keys things are getting the cells to work together and trying to make it look half way decent on other browsers.

 

[Alone]

Originally posted by: bluestrobe
I'm starting to understand but my two keys things are getting the cslls to work together and trying to make it look half way decent on other browsers.

Then use the CSS hacks I mentioned. You can make IE do one thing and everything else do the other.

 

[txrandom]

Originally posted by: Alone
It's like using <p> tags to create line breaks instead of <br />. Tables are for tabular data, hence the name. Any other use is wrong.

So using tables to format a graphical layout is the wrong way to do it?

 

[Alone]

Originally posted by: txrandom

Originally posted by: Alone
It's like using <p> tags to create line breaks instead of <br />. Tables are for tabular data, hence the name. Any other use is wrong.

So using tables to format a graphical layout is the wrong way to do it?

It works, but by definition, that's not what tables are for.