Hello, guys.I've got a serious problem. I need to create a website for my band. I was counting every pixel, it was perfect in Firefox and IE but then my friend opened it in Chrome and it was all crooked... In Safari it was less crooked but still, it was... As I am almost completely disappointed, I decided to try asking people if someone can help me... I would appreciate that.

That's the website: http://www.attitudeband.com/

 

One person asked me for what reasons I used tables to make the design. I should have used CSS. The problem is that I don't really know how to build the site with CSS so I am looking for solution how to fix my tables.

Web browsers automatically apply their own custom CSS to webpages, to counter this, web developers use CSS resets to remove the prestyles of web browsers and vastly increasing cross-browser compatibility; because you coded your website without CSS, adding a reset shouldn't be too much hassle, try putting this before you close your head...

 

<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
</style>

 

Let me know if it helps at all.

Also, it's good practice to test your website on all popular web browsers after each coding milestone so you can spot compatibility issues and be able pin-point them to a particular section of code.

also i have seen there is no doctypes in your html?

 

fix these errors

 

also dont use tables in your page unless u need it learn to code with div and css

 

 

see here

Edited February 3, 201313 yr by sash_oo7

To Alluziion:

Thank you very much. It works but not for everything. Some things doesn't react at all. After yours, I have tried a few more of those 'reset' codes but they refused to fix some of the problems as well. I guess I will have to remake my website... ah... and this time with css, so I think I'll have to learn it.

Edited February 3, 201313 yr by BruceJustice