Question about css resets...

2 replies [Last post]

Sat, 2011-01-22 09:12

chisao101

Offline

newbie

Timezone: GMT-5

Joined: 2009-12-29

Posts: 6

Points: 8

Do css resets level the playing field of all browsers, or will they still act somewhat different?

The reason I ask is, I have designed a few different things just to play around and learn css and javascript, but they look different from browser to browser. I usually design in Firefox and then test in Opera, Safari, IE and Chrome (I figure that's enough, but let me know if there are others I should test).
Well, some stuff comes out great in all browsers, some stuff works in all but IE, and some stuff is completely different in every browser.

So far, this is the only reset I've ever used.
*{margin:0; padding:0;}
I have found a multitude of different resets available in the last few days, though.

So, I'm just wondering if I use a css reset that is loaded with all kinds of reset codes, will that allow me to design for one and get pretty much the same result in all the browsers?
I am not talking about css3 stuff, because I know some features are just not supported, and I don't mean designing for IE6 and earlier. I just mean for stuff like positioning, floats, margins, padding and stuff like that in modern browsers.

I really hate that I have to design pages 3 or 4 times before they work right in all the browsers.

Tags:

Sat, 2011-01-22 13:29

chisao101

Offline

newbie

Timezone: GMT-5

Joined: 2009-12-29

Posts: 6

Points: 8

Well, I just tried Eric

Well, I just tried Eric Meyer's Reset CSS on a site I had given up on a few months ago. I made no changes for me at all. In Firefox it looks exactly how I want it to look, but in IE, Safari and Opera it's all messed up.

Keep in mind, I'm self taught and somewhat of a beginner. I'm also lacking in css best practices.

Here's the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Best Free Guitar Lessons</title>
 
<link rel="stylesheet" type="text/css" href="styles.css" />
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
 
<script type="text/javascript">
$(document).ready(function(){
//animation speed
var speed = 600;
$('#navNext').click(function(){
 
//move margin left until in view
//jQuery animate() function makes it smooth 
$('#carousel ul').animate({marginLeft:'-645px'}, speed);
});
$('#navPrev').click(function(){
//back to the start
$('#carousel ul').animate({marginLeft:'1px'}, speed);
});});
</script> 
 
 
</head>
 
<body>
 
<!-- wrap div -->
<div id="wrap">
 
<!-- head div -->
<div id="head">
	<h1>Free Online Guitar Lessons</h1>
    <p>This is your one stop source for the most in depth and technical online guitar lessons available. This site is structured to provide you with all the tools you need to become a great guitar player in a short amount of time. The only thing we don't provide is the guitar and the desire to work hard and achieve your goals!</p> 
    <p>But the absolute best thing about this site...it's 100% free!</p>
</div>
<!-- head div -->
 
<!-- nav div -->
<div id="nav">
	<ul class="navigation">
		<li id="lft_spacer"></li>
    	<li id="btn_home"><p><a href="#">Home</a></p></li>
    	<li id="btn_chords"><a href="#">Chords</a></li>
    	<li id="btn_scales"><a href="#">Scales</a></li>
    	<li id="btn_videos"><a href="#">Videos</a></li>
    	<li id="btn_forum"><a href="#">Forum</a></li>
    	<li id="btn_about"><a href="#">About</a></li>
    	<li id="btn_contact"><a href="#">Contact</a></li>
    	<li id="rt_spacer"></li>
    </ul>
</div>
<!-- nav div -->
 
<!-- top_content div *wrapper* -->
<div id="top_content">
 
<!-- top_lft -->
<div id="top_lft"></div>
<!-- top_lft -->
 
<!-- top_rt -->
<div id="top_rt"></div>
<!-- top_rt -->
 
</div>
<!-- top_content div *wrapper* -->
 
<!-- login_bg -->
<div class="login_bg"></div>
<!-- login_bg -->
 
<!-- login div -->
<div id="login">
	<form class="login_form" action="" method="post">
    	<ul class="input">
        	<li>
    	   	<p class="username">Username: <input class="text" name="username" type="text"  /></p>
            </li>
            <li>
            <p class="password">Password: <input class="text" name="password" type="password" /></p>
            </li>
            <li>
            <p id="remember">Remember Me: <input class="checkbox" name="remember_me" type="checkbox" /></p>
          </li>
            <li>
            <p><input class="btn_submit" name="submit" type="submit" value="Log In" /></p>
            </li>  
            <li id="form_register">
            <p><a href="#">Forgot password?</a></p><br /><p>Not a member?</p><p><a href="#">Register now</a> for access to much more content. Don't worry, it's still FREE!</p>
            </li>          
      </ul>        
    </form>
</div>
<!-- login div -->
 
 
<!-- carousel div -->
<div id="carousel_bg"></div>
 
<div id="carousel_container">
	<!-- btn_prev div -->
    <div class="btn_prev"><span style="cursor:pointer;"><img id="navPrev" src="images/IE_btn_empty.png" width="35" height="120" alt="&lt;&lt;" /></span></div>
    <!-- btn_prev div -->	
        <div id="carousel">
 
        	<ul>
    			<li><img src="images/758176030.jpg" width="100px" height="100px" align="left" alt="7" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/ag-slate-waterfalls-sm-sas.jpg" width="100px" height="100px" alt="8" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/bw-waterfall-fountains-sm-sas.jpg" width="100px" height="100px" alt="1" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/limon-waterfall01s.jpg" width="100px" height="100px" alt="2" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/Nature waterfall jigsaw.png.jpg" width="100px" height="100px" alt="3" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/paw-waterfall-fountains-sm-sas.jpg" width="100px" height="100px" alt="4" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/YA_waterfall_unicornWbmp.jpg" width="100px" height="100px" alt="5" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
                <li><img src="images/YA_Waterfall_WolfWbmp.jpg" width="100px" height="100px" alt="6" /><h4>Title for Item</h4><p>A short decription of the item goes here.</p></li>
    		</ul>
 
   		</div>
   <!-- btn_next div -->     
   <div class="btn_next"><span style="cursor:pointer;"><img id="navNext" style="opacity:0;" src="images/IE_btn_empty.png" width="35" height="120" alt="&gt;&gt;" /></span></div>
   <!-- btn_next div -->
</div>
<!-- carousel div -->
 
 
</div>
<!-- wrap div -->
 
 
</body>
</html>

And here's the css:

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, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
/* reset ends here */
 
/* Page styles start here */
body {
	background:#000;
}
 
p {
	font-family:Verdana, Geneva, sans-serif;
	color:#FFF;	
}
 
a {
	color:#30C;
	text-decoration:none;
}
 
a:hover {
	color:#39F;
	border-bottom:2px solid #39F;
}
 
#wrap {
	width:1000px;
	margin:0 auto;
}
 
 
#head {
	background-image:url(images/header.gif);
	width:100%;
	height:187px;
	text-indent:-9999px;
}
 
 
 
#nav {
	text-indent:-9999px;
}
 
.navigation {
	list-style-type:none;
}
 
.navigation a {
	display:block;
	outline:0;
}
 
#lft_spacer {
	background-image:url(images/lft_spacer.gif);
	width:233px;
	height:27px;
	float:left;
}
 
#btn_home {
	background-image:url(images/btn_home.gif);
	width:71px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_home:hover {
	background-image:url(images/btn_home_f2.gif);
	width:71px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_chords {
	background-image:url(images/btn_chords.gif);
	width:80px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_chords:hover {
	background-image:url(images/btn_chords_f2.gif);
	width:80px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_scales {
	background-image:url(images/btn_scales.gif);
	width:71px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_scales:hover {
	background-image:url(images/btn_scales_f2.gif);
	width:71px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_videos {
	background-image:url(images/btn_videos.gif);
	width:74px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_videos:hover {
	background-image:url(images/btn_videos_f2.gif);
	width:74px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_forum {
	background-image:url(images/btn_forum.gif);
	width:77px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_forum:hover {
	background-image:url(images/btn_forum_f2.gif);
	width:77px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_about {
	background-image:url(images/btn_about.gif);
	width:72px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_about:hover {
	background-image:url(images/btn_about_f2.gif);
	width:72px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_contact {
	display:block;
	background-image:url(images/btn_contact.gif);
	width:86px;
	height:27px;
	float:left;
	position:relative;
}
 
#btn_contact:hover {
	background-image:url(images/btn_contact_f2.gif);
	width:86px;
	height:27px;
	float:left;
	position:relative;
}
 
#rt_spacer {
	background-image:url(images/rt_spacer.gif);
	width:236px;
	height:27px;
	float:right;
	position:relative;
}
 
#top_content {
	background-image:url(images/top_content.gif);
	width:100%;
	height:164px;
	position:relative;
	top:27px;
	left:0px;
}
 
.login_bg{
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-box-shadow:0px 0px 40px #F00;
	-webkit-box-shadow:0px 0px 40px #F00;
	box-shadow:0px 0px 40px #F00;
	background-color:#000;
	width:180px;
	height:170px;
	opacity:.5;
	border:2px solid #F00;
	position:relative;
	top:-170px;
	right:-780px;
}
 
#login {
	font-family:Verdana, Geneva, sans-serif;
	font-size:9px;
	color:#FFF;
	width:180px;
	height:50px;
	position:relative;
	top:-340px;
	right:-785px;
}
 
#form_register {
	position:relative;
	top:-50px;
}
 
.input {
	list-style-type:none;
	display:inline;
}
 
.input li {
	padding:8px;
}
 
.username {
}
 
.password {
	position:relative;
	right:-3px;
	top:-5px;
}
 
.text {
	font-size:10px;
}
 
.btn_submit {
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	font-size:9px;
	color:#FFF;
	background-color:#333;
	border:.5px solid #F00;
	position:relative;
	top:-42px;
	right:-98px;
	width:60px;
	padding:1px;
}
 
.btn_submit:hover {
	background-color:#666;
}
 
#remember {
	position:relative;
	top:-10px;
}
 
#carousel_bg {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0px 0px 40px #F00;
	-webkit-box-shadow:0px 0px 40px #F00;
	box-shadow:0px 0px 40px #F00;
	background-color:#000;
	width:730px;
	height:135px;
	opacity:.5;
	border:2px solid #F00;
	position:relative;
	top:-358px;
	right:-40px;
}
 
#carousel_container {
	height:120px;
	width:645px;
	position:relative;
	top:-490px;
	right:-47px;
}
 
#carousel {	
	width:645px;
	height:120px;
	overflow:hidden;
}
 
#carousel ul {
	list-style-type:none;
	margin-top:8px;
	width:4000px;
	margin-left:0; 
	left:0;
	padding-left:1px;
}
 
#carousel li {
	width:211px;
	height:120px;
	display:inline-block;
}
 
 
#carousel ul li img {
	width:100px;
	height:100px;
	float:left;
	padding-right:4px;
}
 
#carousel ul li p {
	font-size:10px;
	padding:4px;
}
 
#carousel ul li h3, h4, h5 {
	color:#FFF;
}
 
.btn_prev {
	background:url(images/btn_prev.png) no-repeat;
	border:2px solid #F00;
	-moz-border-radius: 10px 0px 0px 10px;
	-webkit-border-radius: 10px 0px 0px 10px;
	border-radius: 10px 0px 0px 10px;
	width:32px;
	height:120px;
	position:relative;
	float:left;
	padding-right:4px;
	cursor:pointer;
}
 
.btn_prev:hover {
	background:url(images/btn_prev_ro.png) no-repeat;
	-moz-box-shadow:inset 0px 0px 15px #FF0;
	-webkit-box-shadow:inset 0px 0px 15px #FF0;
	box-shadow:inset 0px 0px 15px #FF0;
}
 
#navPrev {
	margin-top:43px;
	padding:2px;
}
 
.btn_next {
	background:url(images/btn_next.png) no-repeat;
	border:2px solid #F00;
	-moz-border-radius: 0px 10px 10px 0px;
	-webkit-border-radius: 0px 10px 10px 0px;
	border-radius: 0px 10px 10px 0px;
	width:35px;
	height:120px;
	position:relative;
	top:-120px;
	right:-75px;
	float:right;
	cursor:pointer;
}
 
.btn_next:hover {
	background:url(images/btn_next_ro.png) no-repeat;
	-moz-box-shadow:inset 0px 0px 15px #FF0;
	-webkit-box-shadow:inset 0px 0px 15px #FF0;
	box-shadow:inset 0px 0px 15px #FF0;
}
#navNext {
	margin-top:43px;
	padding:2px;
 
}

Obviously, you cannot see the images I'm using, but if you like, you can go to

http://centerline-computers.co.cc/guitar

and see what I'm working with. This is a personal project I'm working on. It's eventually going to be a php site, but for the base design, I'm just using html and css. I will break it up into includes later, after the design comes together. Also, the images I'm using for the carousel are just placeholders for now. I eventually will have video links in there.

Any help will be appreciated.

Sat, 2011-01-22 13:42

Verschwindende

Offline

Guru

Timezone: GMT-5

Joined: 2009-10-09

Posts: 2037

Points: 2256

It's been discussed here

It's been discussed here before. Check this very informative thread: http://csscreator.com/node/34411

yet again.

Question about css resets...

Well, I just tried Eric

It's been discussed here

New forum topics

User login

Navigation