7 Replies - 787 Views - Last Post: 19 March 2010 - 04:03 PM

#1 guyfromri  Icon User is online

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 827
  • Joined: 16-September 09

Why is my CSS different in different browsers?!?!?!

Posted 16 March 2010 - 03:54 PM

This is probably going to come off as sounding 'dumb' but I don't get it. Why is it that my CSS that works fine in Explorer doesn't function correctly (or worse, at all) in Chrome? Does anyone have a reference or site I can use as a guideline to make sure that I'm learning this correctly. I understand the concept of deprecated functions and I have checked to make sure that mine are current, they are. This is killing me. As a new developer I can't seem to find one simple set of rule or guidelines to follow and set a basis to learn on. If I haven't thrown this computer out the window before I get any reply's then Thanks in advance! :)

Is This A Good Question/Topic? 0
  • +

Replies To: Why is my CSS different in different browsers?!?!?!

#2 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1383
  • View blog
  • Posts: 3,514
  • Joined: 28-November 09

Re: Why is my CSS different in different browsers?!?!?!

Posted 16 March 2010 - 04:14 PM

Post your code, it's rather hard to say without seeing what it is.
Was This Post Helpful? 0
  • +
  • -

#3 guyfromri  Icon User is online

  • D.I.C Addict

Reputation: 46
  • View blog
  • Posts: 827
  • Joined: 16-September 09

Re: Why is my CSS different in different browsers?!?!?!

Posted 16 March 2010 - 05:34 PM

I suppose that would help..lol no picking on it though...I'm learning :)


<html>
<head>
  <style type="text/css">
   /*This all needs to be inserted in to an external sheet pre-live*/
    h1
      {
      position:fixed;     /*keep the header at the top of the page*/
      margin-left:200px;
      color:blue;
      font:50px;
      }
    #sub1
      {
      background-color:rgb(50,50,50);
      color:rgb(200,200,100)
      }
     #sup1
      {
      background-color:rgb(200,200,100);
      color:rgb(50,50,50);
      }
    ul
      {
      list-style-type:none;
      margin:0;
      padding:0;
      overflow:hidden;
      }
    li
      {
      float:left;
      }
    #nav1:link,#nav1:visited
      {
      display:block;
      width:250px;
      font-weight:bold;
      color:#FFFFFF;
      background-color:blue;
      text-align:center;
      text-decoration:none;
      text-transform:uppercase;
      }
    #nav1:hover
      {
      color:blue;
      background-color=white;
      text-decoration:underline;
      }  
    #nav1:active
      {
      margin-top:2px;
      color:white;
      background-color:blue;
      }
    #s1
      {
      float:left;
      font:40px;
      color:rgb(244,5,89);
      }
    #w1
      {
      text-align:center;
      font:22px;
      color:rgb(255,0,0);
      }
    
  </style>

<body>
<table>
<tbody>
<tr>
<!--Table row 1...This is where we put the header-->
<td>
<h1>
<sub id="sub1">www.</sub>
MyPage
<sup id="sup1">.com</sup>

</h1>
</td>
</tr>
<tr><td>
<a id="w1">If this site doesn't look right to you, please try reopening it in Internet Explorer</a>
</td>
</tr>
<tr>
<td>
<ul>
<li><a id="nav1" href="http://">The Grid</a></li>
<li><a id="nav1" href="http://">About</a></li>
<li><a id="nav1" href="http://">Get Yours Now!</a></li>
<li><a id="nav1" href="http://">Contact Us</a></li>
</ul>
</td>
</tr>
<tr>
<td><br />
<p id="s1">MyPage is currently undergoing the final steps of the build process to 
         be completely ready for it's public. Please expect to be using MyPage
         starting 3/1/10. In the meantime, check back to see what is changing daily.</p>
</td>
<td>If you have any questions please contact <a href="mailto:ceo@MyPage.com">here</a></td>
</tr>
<tr><td>
<img src="C:\Users\jim\Desktop\MyPage\beta\the_grid.png">
</table>
</body>
</html>




In Explorer it shows the head how I want it with different colors in sub and sup script but in google it either shows the nav bar first or doesn't show the colors and sub & sup scripts on the head. Is there a way to 'generalize' this code and get the results that I want? Thanks again

This post has been edited by guyfromri: 16 March 2010 - 05:35 PM
Reason for edit:: Fixed code tags

Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1383
  • View blog
  • Posts: 3,514
  • Joined: 28-November 09

Re: Why is my CSS different in different browsers?!?!?!

Posted 16 March 2010 - 08:59 PM

I'm going to go ahead and just fix your code, give me a few minutes. I'll explain afterwards

<html>
<head>
  <style type="text/css">
    #container{
		width:800px;
		margin:0 auto;
		text-align:center;
		padding:0;
		background:#EEE;
	}
	
	#header{
		margin:0;
		padding:0;
	}
	
	#content{
		text-align:left;
		margin:50px 20px;
		padding:10px 50px;
		font:#F00 1em/2em;
	}
	
	#footer{
		text-align:center;
		margin:50px 20px;
		padding:10px 50px;
	}
	
	h1{
		text-align:center;
		font:50px #00F;
	}
	  
    #menu ul{
		margin:0;
		padding:0;
		overflow:hidden;
    }
	
	#menu li{
		list-style:none; 
		display:inline; 
	}
	
	#menu a{
		padding:5px 15px;
	}
	
    #menu a:link,a:visited{
		width:250px;
		font-weight:bold;
		color:#FFF;
		background:#00F;
		text-align:center;
		text-decoration:none;
		text-transform:uppercase;
    }
	  
    #menu a:hover{
		color:#00F;
		background:#FFF;
		text-decoration:underline;
    } 
	  
    #menu a:active{
		margin-top:2px;
		color:#FFF;
		background-color:#00F;
    }
	  
    #s1{
		float:left;
		font:40px;
		color:#F0A;
    }
	  
    #w1{
		text-align:center;
		font:22px;
		color:#F00;
    }
    
  </style>

  <title>My Page</title>
  
</head>
<body>

<div id="container">

<div id="header">
	<h1>www.MyPage.com</h1>
</div>

<ul id="menu">
	<li><a href="#">The Grid</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Get Yours Now!</a></li>
	<li><a href="#">Contact Us</a></li>
</ul>

<div id="content">
	<p>MyPage is currently undergoing the final steps of the build process to be completely ready for it's public. Please expect to be using MyPage starting 3/1/10. In the meantime, check back to see what is changing daily.
	</p>
</div>

<div id="footer">
	<p>If you have any questions please contact <a href="mailto:ceo@MyPage.com">here</a></p>
	<img src="C:\Users\jim\Desktop\MyPage\beta\the_grid.png" />
</div>

</div>

</body>

</html>



Now then, what I changed was I got rid of all tables in the layout, there's no need and you should be learning css to position elements. I don't intend to get into a rant about this but do NOT use tables for design, it'll save you quite a few nightmares later.

As far as everything else use hex codes for colors, it's a more widely accepted standard. You'll notice some of the ones I use are shorthand but I'd go the full 6 digits on them. This is how Hex works:

# Red Red Green Green Blue Blue

Like #FFFFFF is white and #000000 is black. Other common ones:
Red #FF0000 or #F00
Green #00FF00 or #0F0
Blue #0000FF or #00F
Yellow #FFFF00 or #FF0
Cyan #00FFFF or #0FF
Magenta #FF00FF or #F0F

The hex system is base 16, using 1 2 3 4 5 6 7 8 9 A B C D E F for numbers, A being 10 and so on, look up Hex for more on that.

On the Div tags, I added a light gray background to show you the area on purpose, you can change the width in the CSS easily.

A Class is an element that can be used multiple times, denoted like .Classname and an ID is a one-shot such as #IDname. It's a standard practice to wrap main areas in div tags such as header, navigation, content, and footer. (Though Navigation it would be best to ad an ID to the UL or OL tag)

If you want to style a p tag the best way is #ID p{something} rather than another class for it.

You may want to look over w3Schools and brush up on some skills to get a better grasp on html and CSS.

As far as the sub and sup they were discarded because they served no real purpose. Tested and working in FF3.x, IE8, Chrome3.x, Lunascape, Opera, Safari.

EDIT- fixed inline tags

This post has been edited by Lemur: 17 March 2010 - 02:41 PM

Was This Post Helpful? 0
  • +
  • -

#5 Shane Hudson  Icon User is offline

  • D.I.C Technophile
  • member icon

Reputation: 343
  • View blog
  • Posts: 1,286
  • Joined: 06-December 09

Re: Why is my CSS different in different browsers?!?!?!

Posted 17 March 2010 - 02:30 PM

I have two things to add.

Firstly, it is not very important but it is more common to use relative paths rather than the absolute that you are currently using. One of the main reasons for this is that if you move your website to a different domain name (or in your case, to the internet) you will need to change all the links!

So, instead of C:\Users\jim\Desktop\MyPage\beta\the_grid.png try changing it to the_grid.png. Or if you want to be even more organised (and I recommend it!) put all your images into an images folder so it would be images/the_grid.png.

Secondly... Brandon, I had never heard of Lunascape before but I have taken a look at it and am very impressed! Will be using it (it has a portable install!!!) at college tomorrow instead of the portable Opera we are currently using to replace IE6.

This post has been edited by Shane Hudson: 17 March 2010 - 02:31 PM

Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1383
  • View blog
  • Posts: 3,514
  • Joined: 28-November 09

Re: Why is my CSS different in different browsers?!?!?!

Posted 17 March 2010 - 02:43 PM

Lunascape being a multiple engine browser that's great for testing, check it out.

Though, I would prefer you use my screenname instead, and for those that didn't catch it:

Lemur == Brandon Weaver
Was This Post Helpful? 0
  • +
  • -

#7 Nykc  Icon User is offline

  • Gentleman of Leisure
  • member icon

Reputation: 731
  • View blog
  • Posts: 8,644
  • Joined: 14-September 07

Re: Why is my CSS different in different browsers?!?!?!

Posted 18 March 2010 - 07:36 AM

I never heard of this Lunascape either and I am impressed. My only complaint.... Not X-platform :(
Was This Post Helpful? 0
  • +
  • -

#8 Dannyboy997  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 64
  • View blog
  • Posts: 258
  • Joined: 17-April 09

Re: Why is my CSS different in different browsers?!?!?!

Posted 19 March 2010 - 04:03 PM

For the css, I did the same as you: I embedded the css right into the html. And for some reason chrome doesn't detect that css code.

Use:
<link rel="stylesheet" href="path_to_your_css_folder/your_css_file_here.css" type="text/css" />



Use this Method Instead!


Also you mentioned in your code that it might be in a seperate style sheet, but always put css in an external stylesheet, even for testing purposes.



Hope this Helps.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1