Programming Forums > Web Development and Design > HTML / XHTML / CSS

mrynit · May 8th, 2007, 9:13 AM

here is a simple site i made using css box modle with div tags. I am new to css and dont know all the details and different styles. So I would like a code review. I know there is probably spelling and grammer errors but that is not my fucus here; I will correct them on my own time. Also how can i get the two divs to be centered in the screen?

CSS sure makes code clean!

DaWei · May 8th, 2007, 9:48 AM

You're overspecifying when you specify left and right margins and the width. What if that doesn't add up to the width available? Pick which one you want to control, and control it. Let the other adapt.

To center the two divs, put them in an enclosing div. Style that div for margin-left: auto and margin-right: auto. That takes care of compliant browsers. Style it text-align: center to take care of IE. Since you don't want the text centered, then in the two enclosed divs, style text-align: left.

You're much better off using padding than margin, simply because of browser differences.

You can save yourself more typing in situations like this:

(Toggle Plain Text)

	border-color: black;
	border-style: solid;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-top-width: 1px;

That can be done with

(Toggle Plain Text)

        border: 1px solid #000000;

See here for a look at your page after a quick dinking.

You do need to run a spell check and a grammar check. It's worth the investment in time.

EDIT: Move your doc type above the <html> tag. I also recommend using 4.01 strict to avoid throwing IE into quirks mode.

Wizard1988 · May 8th, 2007, 6:36 PM

If your css passes the W3C CSS validation test you are fine. You really can save alot of typing using many different tricks for example you can specify the border values on one like like dawei said. This also applies for other elements such as margins or paddings ect.. However if you are just learning css it makes it easier to understand if you write it the longer way. When you become a css guru you can do the tricky stuff. Or just use some of the css optimizers you can find on the net.

Good luck.

DaWei · May 8th, 2007, 6:44 PM

Passing the W3C CSS validation test does NOT mean that your page will work fine, cross-browser. Sure would be nice if it did.

Wizard1988 · May 8th, 2007, 6:50 PM

Of course it does not test for results across different browsers, but there is a website that can help you with that. You basically submit your page and it takes screenshots for you in browsers that you specify. Then you can see what you need to adjust and stuff. I can't remember the name of the website right now.

But then again is there a point in trying to support browsers which should either be replaced by their newer versions or which are used only a very small percentage of viewers?

DaWei · May 8th, 2007, 8:45 PM

The most non-compliant browsers have the largest share of the market. One need not support them if one isn't in business to make money. The newest version of IE is STILL not compliant in many respects (XHTML being one). Sure, newer browsers are making definite inroads -- among the geeks and technoweenies, in particular. I install Firefox on all my acquaintances systems and tell them they're much better off to use it. Guess what? They use IE, unless they're the tiny minority that have a Mac.

Wizard1988 · May 8th, 2007, 8:54 PM

I understand excacly what you are saying. IE sure is on top of the list, but would you really want to support all the versions of IE?? There has to be a point where it just isn't worth spending time to fix the code so some old browser still displays it properly (unless the client decides that it is needed).

DaWei · May 8th, 2007, 11:55 PM

I don't support all browsers. I support IE back to 5.5 or 6.0, depending on the application, the client, and the marketplace. The commercial world is real and is not inhabited by technoweenies like us. I have a predilection for eating well and blowing money on fun things.

Fall Back Son · May 9th, 2007, 1:28 AM

Out of curiosity, and never having tried HTML myself -- what does the decision to support multiple browsers depend on, exactly (in code)? For example, is there a simple way to make your code recognize what browser is being used, similar to a switch statement in C, and perform certain actions based on that?

aka,

if (MOZILLA)
{

do something ;

}

else if (IE)
{

do something else ;

}

Sorry for the intrusion. Just wondering.

Ghost · May 9th, 2007, 5:24 AM

Fall Back, that would almost make it so you would need to develop a website for every browser. Not fun.

DaWei does what I've seen around to be considered development with a 'gain of salt'. You cant make everything work, but you can logically get the most for your code.

Your best bet is to look to your designed audience for the site, then make it work for them the best.

For example if you just want to provide information on your site to everyone in the world, then you would be smart to not use advanced code that could go wrong or isn't as compatible.

On the other hand if you are designing a site for a unique group of users, such as a a FireFox Addon site (I'm just using this cause it makes this simple) then you'd want to make sure your site worked ebst in FireFox vs the other browsers.

May 8th, 2007, 9:48 AM	#2
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	You're overspecifying when you specify left and right margins and the width. What if that doesn't add up to the width available? Pick which one you want to control, and control it. Let the other adapt. To center the two divs, put them in an enclosing div. Style that div for margin-left: auto and margin-right: auto. That takes care of compliant browsers. Style it text-align: center to take care of IE. Since you don't want the text centered, then in the two enclosed divs, style text-align: left. You're much better off using padding than margin, simply because of browser differences. You can save yourself more typing in situations like this: (Toggle Plain Text) border-color: black; border-style: solid; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-width: 1px; border-color: black; border-style: solid; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-top-width: 1px; That can be done with (Toggle Plain Text) border: 1px solid #000000; border: 1px solid #000000; See here for a look at your page after a quick dinking. You do need to run a spell check and a grammar check. It's worth the investment in time. EDIT: Move your doc type above the <html> tag. I also recommend using 4.01 strict to avoid throwing IE into quirks mode. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers Last edited by DaWei; May 8th, 2007 at 10:03 AM.

May 8th, 2007, 6:36 PM	#3
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 416 Rep Power: 3	If your css passes the W3C CSS validation test you are fine. You really can save alot of typing using many different tricks for example you can specify the border values on one like like dawei said. This also applies for other elements such as margins or paddings ect.. However if you are just learning css it makes it easier to understand if you write it the longer way. When you become a css guru you can do the tricky stuff. Or just use some of the css optimizers you can find on the net. Good luck. __________________ JG-Webdesign

May 8th, 2007, 6:44 PM	#4
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Passing the W3C CSS validation test does NOT mean that your page will work fine, cross-browser. Sure would be nice if it did. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

May 8th, 2007, 6:50 PM	#5
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 416 Rep Power: 3	Of course it does not test for results across different browsers, but there is a website that can help you with that. You basically submit your page and it takes screenshots for you in browsers that you specify. Then you can see what you need to adjust and stuff. I can't remember the name of the website right now. But then again is there a point in trying to support browsers which should either be replaced by their newer versions or which are used only a very small percentage of viewers? __________________ JG-Webdesign

May 8th, 2007, 8:45 PM	#6
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	The most non-compliant browsers have the largest share of the market. One need not support them if one isn't in business to make money. The newest version of IE is STILL not compliant in many respects (XHTML being one). Sure, newer browsers are making definite inroads -- among the geeks and technoweenies, in particular. I install Firefox on all my acquaintances systems and tell them they're much better off to use it. Guess what? They use IE, unless they're the tiny minority that have a Mac. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

May 8th, 2007, 8:54 PM	#7
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 416 Rep Power: 3	I understand excacly what you are saying. IE sure is on top of the list, but would you really want to support all the versions of IE?? There has to be a point where it just isn't worth spending time to fix the code so some old browser still displays it properly (unless the client decides that it is needed). __________________ JG-Webdesign

May 8th, 2007, 11:55 PM	#8
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	I don't support all browsers. I support IE back to 5.5 or 6.0, depending on the application, the client, and the marketplace. The commercial world is real and is not inhabited by technoweenies like us. I have a predilection for eating well and blowing money on fun things. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

May 9th, 2007, 1:28 AM	#9
Fall Back Son Hobbyist Programmer Join Date: Oct 2006 Posts: 203 Rep Power: 2	Out of curiosity, and never having tried HTML myself -- what does the decision to support multiple browsers depend on, exactly (in code)? For example, is there a simple way to make your code recognize what browser is being used, similar to a switch statement in C, and perform certain actions based on that? aka, if (MOZILLA) { do something ; } else if (IE) { do something else ; } Sorry for the intrusion. Just wondering.

May 9th, 2007, 5:24 AM	#10
Ghost Man Bear Pig Hunter Join Date: Jul 2005 Location: NorCal, USA Posts: 290 Rep Power: 4	Fall Back, that would almost make it so you would need to develop a website for every browser. Not fun. DaWei does what I've seen around to be considered development with a 'gain of salt'. You cant make everything work, but you can logically get the most for your code. Your best bet is to look to your designed audience for the site, then make it work for them the best. For example if you just want to provide information on your site to everyone in the world, then you would be smart to not use advanced code that could go wrong or isn't as compatible. On the other hand if you are designing a site for a unique group of users, such as a a FireFox Addon site (I'm just using this cause it makes this simple) then you'd want to make sure your site worked ebst in FireFox vs the other browsers. __________________ People who click "images" that end with .exe shouldn't have computers.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Programming Forums > Web Development and Design > HTML / XHTML / CSS

review site and help