Hey, I am trying to create my website, just messing around with different skills I have picked up and learnt over my college courses. I am stuck at trying to get them to look the same on all browsers, for example - firefox and chromium!

 

When I coded my website, I used percentages to make it flexible, viewing it on firefox it looked fine and was perfect. Then I went onto chromium and noticed that the percentages didn't work the same way and were way off scale. Is there anyway I could fix this?

 

( I did find a way around but I don't think it is the proper way, just want to ask someone who knows how to do it properly )

 

This is the way -

 

/* 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;
}

.header {
	background-image: url(images/header_background_1920px.png);
	background-repeat: no-repeat;
	width: 100%;
	height: 400px;
}

#logoholder {
	width: 100%;
	height: 150px;
	position: absolute;
	margin-top: 65px;
}
#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
	height: 150px;
	width: auto;
}

#title {
    
	font-size: 18px;
	font-family: sans-serif;
	color: white;

	position: absolute;
	width: 100%;
	height: 18px;
	margin-top: 217px ;
	text-align: center;

}

#slogan {
	font-size: 25px;
	font-family: sans-serif;
	color: white;

	position: absolute;
	width: 100%;
	height: 25px;
	margin-top: 236px;
	text-align: center;
}

@media only screen and (max-width : 480px),
only screen and (max-device-width : 480px) {
	
#logoholder {
	height: 150px;
	margin-top: 25px;
}
#logo {
	height: 150px;
}

#title {
    
	font-size: 18px;
	height: 18px;
	margin-top: 132px ;
	text-align: center;

}

#slogan {
	font-size: 25px;
	color: white;

	position: absolute;
	width: 100%;
	height: 25px;
	margin-top: 236px;
	text-align: center;
}

Firefox -

 

Chromium -

 

Any help would be appreciated, thanks.

 

 

It may be my eyes but the two screenshots look identical, the only difference is the text which differs across browsers and I'd expect that anyway because Firefox and Chrome present text slightly differently to each other.

It may be my eyes but the two screenshots look identical, the only difference is the text which differs across browsers and I'd expect that anyway because Firefox and Chrome present text slightly differently to each other.

 

Yes the two images are near enough the same, because the code that I posted is the code I have updated too, should of mentioned it in the actual post. Was just wondering would that be the right way about going to get them to look the same in all browsers? By using more divs? or should i go for -webkit- ?

What exactly are you asking? We can only see one version of your CSS so we don't know what you've changed in the HTML or CSS!

 

The screenshots seem identical except the different font in each browser. Your small screen CSS duplicates some of your main CSS.

It don't matter, I've figured out how to do it. The question in my head wasn't entirely there as I was trying to figure out what exactly was wrong.

 

But thank-you for trying to help

all browsers have a set of styles that they implement to sites websites meaning that they sometimes don't appear the same.

 

Be sure to add a master reset into the CSS to make all the browsers the same and then the sizes, fonts, etc should be the same