Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Geek Culture / Switch from tables to css

Author
Message
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 14th Nov 2008 07:21
Im used to using tables for layout, and i just tried to learn css, but tbh im not sure if its worth the hastle. Yes you can position everything in anyway you want, but how the hell does one center the whole website for example?

Ive tried making a main DIV which is centered in the site perfectly. Then i try making a div inside of the main div, which also centers fine. But as soon as i try to position the child DIV, it totaly ignores the parent DIV, so its just positioned from 0, 0px. Its a nighmare so far, i hope someone can help.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 14th Nov 2008 08:01
Ok, ive worked out the centering problem.
Now theres a little thing which is annoying me. Whenever i position a DIV, it positions to the center, not the upper left corner. How do i change this?

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

BatVink
Moderator
22
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 14th Nov 2008 10:24
The easiest way to learn css is to see how other people have done it. Use Firefox + the Firebug plugin, or Google Chrome's element inspector tool. Both of these show you the css, and highlight the relevant part of the page as you hover over it.

It is worth it, I started using css elements rather than tables in the newsletter and it is so much more manageable. It already used CSS, and I was using tables for anyhting out of the ordinary - it never felt right.

Lazlazlaz 1
19
Years of Service
User Offline
Joined: 18th Sep 2005
Location: England
Posted: 14th Nov 2008 17:47
Quick tip, to centre your whole website, put this in the css for your div containing everything.



As with most people I jump around which projects I work on and which I drop for a while.
Currently I'm back working on Sioux, a Hollywood Western RTS.
JoelJ
21
Years of Service
User Offline
Joined: 8th Sep 2003
Location: UTAH
Posted: 14th Nov 2008 20:16
hint: stackoverflow for all your programming needs

ask a programming related question and you'll get an answer within hours


[email protected] RAM-NVIDIA Quadro FX 570M-Windows Vista Business 32bit
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 14th Nov 2008 20:35
Ok thanks dudes. Why is it whenever i do something, in dreamweaver and firefox, its looks precisely as it should, but as soon as its put into internet explorer, its just a jumble of crap?

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Omega gamer 89
17
Years of Service
User Offline
Joined: 10th Sep 2007
Location: Pittsburgh, PA
Posted: 14th Nov 2008 20:40
Welcome to the browser wars. Your problem is because FF and IE are made by different companies, and therefore have are structured differently. You can never get every little thing to look right in every browser. You just have to find a happy place where FF and IE will agree on how it should look.


www.threeswordsproductions.com
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 14th Nov 2008 20:45
Well in internet explorer, if i have the following code in a div tag



It displayes like this in firefox, and dreamweaver:
"
Email Address:
Password:
"
Which is how i want it to display.

However for some redicuolous reason, in ie it displays liek this:
"
Email Address:

Password:
"

With a space in the middle for no reason whatsoever.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

bitJericho
22
Years of Service
User Offline
Joined: 9th Oct 2002
Location: United States
Posted: 14th Nov 2008 21:05 Edited at: 14th Nov 2008 21:05
First off, you should be using <br />, second, that's weird. Have you tried putting the text around <p> brackets instead?


It's not just for BYOND you know!
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 14th Nov 2008 21:15
Ok, thanks. Tbh atm i cant find a single reason to use CSS over tables. Can someone shed some light on the advantages? Ive had nothing but trouble with css. Im just trying to get a registration form layed out properly using css+div, but its taking ages, i can do the same thing using tables in about 10 mins.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Lazlazlaz 1
19
Years of Service
User Offline
Joined: 18th Sep 2005
Location: England
Posted: 15th Nov 2008 01:59 Edited at: 15th Nov 2008 02:01
You really should only use <br /> if you are declaring your files as xhtml. If you are declaring them as transitional or strict html 4.01 then you should use <br>.

I wouldn't recommend using xhtml, it is not really being taken up and strict 4.01 is the better (in my opinion). In xhtml, to make it valid (check here > http://validator.w3.org/) you have to include every single attribute for all your tags, even if you are not using them and they have a null value. Which is annoying and makes it harder to read.


edit: the main reason css is better than tables is loading speed. To load a page with tables first the browser has to read the file to find the structure of the table, then read it again to load the contents.
With css it can all be done there and then. CSS also lends itself nicer to dynamic pages and easier reading for mobile handset browsers.

As with most people I jump around which projects I work on and which I drop for a while.
Currently I'm back working on Sioux, a Hollywood Western RTS.
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 16th Nov 2008 01:37
I made the switch from tables to CSS a few years ago and I went through the same hassle. People don't like tables because its more code which means larger file size and messier looking code. IMO, its still easier to use tables for layouts, and you have the comfort of knowing it'll appear the same in all browsers without any special hacks, unlike trying to use DIVs with CSS. Still, I stopped using tables because someone else signs my paychecks.


JoelJ
21
Years of Service
User Offline
Joined: 8th Sep 2003
Location: UTAH
Posted: 16th Nov 2008 05:43
the advantage is that using tables isn't necessarily standard compliant. You're SUPPOSED to use CSS. And the reason it displays properly in FF and Dreamweaver and not IE is because IE is not standard compliant. It'll also look almost the same in Opera, Chrome, and Safari. They're fixing that in the next version of IE, but the beta still struggles with compliance to the standards.

I was told by one person that the new version of CSS lets you use CSS in a way to layout your page similar to the way tables work. Has anyone else heard this? If so, I can't wait until browsers start using the new version of CSS (is it version 4?)


[email protected] RAM-NVIDIA Quadro FX 570M-Windows Vista Business 32bit
Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 16th Nov 2008 11:27
Your keyword there was "almost" the same. Even Opera, FF, and Safari have some differences because no browser is 100%.... yet. (they're getting very close)

In my opinion, until a browser reaches 100% compliance, none of them are any better than IE. In truth, every browser falls short of standards. To me, its a pass or fail test, so I could care less who's higher at the moment, they're all failures.


General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 16th Nov 2008 11:48
Well firefox seems to come close to most standards, but ie seems to miss out so much. Also ie is so clunky and resource hungry compared to firefox.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Phaelax
DBPro Master
22
Years of Service
User Offline
Joined: 16th Apr 2003
Location: Metropia
Posted: 16th Nov 2008 15:07
Since when did FF start using less memory than IE? (maybe compared to IE8, in which case everything wins in comparison)


General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 16th Nov 2008 15:41
Erm, i just did a test. I open both browsers, stacked them, opened google.co.uk on both, one tab open per browser. Here are the memory usage results:

Internet explorer: 36,729K
Firefox: 16,311K

So yes, IE takes a lot more memory than firefox, as it always has done. Remember its microsoft, you cant actualy expect them to make a quality product FOR FREE. lol

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 16th Nov 2008 15:45
Here i did a more accurate test.
Each browser had 3 tabs open, both with "www.thegamecreators.com" open (The home page).

Heres a shot:


CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Tom J
19
Years of Service
User Offline
Joined: 4th Aug 2005
Location: Essex, England
Posted: 16th Nov 2008 17:05
When I tried your test, Firefox took up more memory than IE.
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 16th Nov 2008 17:07
What versions are you using. You have seen the screenshot.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Tom J
19
Years of Service
User Offline
Joined: 4th Aug 2005
Location: Essex, England
Posted: 16th Nov 2008 17:10
Oh, I just realised you're using FF3, I've still got FF2, that could be it
JoelJ
21
Years of Service
User Offline
Joined: 8th Sep 2003
Location: UTAH
Posted: 16th Nov 2008 22:52
Phaelax: agreed to an extent. But the problem with IE not complying is that it's so far off, while the other 3 major browsers are so close to each other. So developers have to always double check everything in IE and almost never have to worry about the others.


[email protected] RAM-NVIDIA Quadro FX 570M-Windows Vista Business 32bit
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 16th Nov 2008 22:56
@Tom J - Lol ok. You should get ff3, unlike IE firefox just gets better.

@JoelJ - Agreed. It is highly annoying. Internet explorer is what everyone refers to as "The Default Browser". I.e whenever you think of an internet browesr, you think IE first. So why dont they put the effort in to be standardized properly. Its annoying.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

JoelJ
21
Years of Service
User Offline
Joined: 8th Sep 2003
Location: UTAH
Posted: 17th Nov 2008 01:42
Quote: "You should get ff3, unlike IE firefox just gets better.
"

maybe the memory usage isn't getting better, but I think IE is.


[email protected] RAM-NVIDIA Quadro FX 570M-Windows Vista Business 32bit
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 17th Nov 2008 09:10
Yes IE is very slowly getting better. Firefox already seems to be up to most standards tho. Whenever i do something in html/php/javascript it always looks exactly as i intended in firefox, opera, even chrome (Which is new). In IE 9/10 it looks diffrent, which is very annoying.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Sid Sinister
19
Years of Service
User Offline
Joined: 10th Jul 2005
Location:
Posted: 17th Nov 2008 09:42
How I view it is that Firefox is the hip new kid on the block that is into all the current trends, while IE tries to be professional. How professionalism equates to IE, and not FF, I have no idea. I guess that's what you get after being in the business for so long. You can slap microsoft on even the crappiest of products and it becomes industry approved just because of name sake.

"If I have seen a little further it is by standing on the shoulders of Giants" - Isaac Newton
-Computer Animation Major @Baker.edu-
General Reed
19
Years of Service
User Offline
Joined: 24th Feb 2006
Location:
Posted: 17th Nov 2008 10:04
Lol, you do realise that Microsoft, being the profit machine it is, will end up buying firefox, and bundling it with windows, to:

1. Increace the "attractiveness" of windows.
2. Get rid of the competition.
3. Muck it up.

CPU: AMD X2 6000+ 3.0ghz GFX: NVIDIA BFG Geforce 8800GTS 640MB OC-550mhz core RAM: 2048mb

Login to post a reply

Server time is: 2025-06-08 09:53:53
Your offset time is: 2025-06-08 09:53:53