Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

My website look very different?

kclimson

kclimson

macrumors newbie
Original poster
Aug 15, 2011
28
0
Canada
My website www.macview.ca looks great on Safari, and Google Chrome. But on Firefox the main social icons are positioned very high up. And the transition for the links only work for the first word (not the last word?).
I am using the 960 grid system if that helps. Pleasee help .

Code: 
/*
---------------------------------------------------
Theme Name: Macview Theme
Theme URI: [url]http://www.macview.ca/[/url]
Description: The tech blog template
Author: Kiril Climson
Author URI: [url]http://www.macview.ca/[/url]
Version: 1.0
.
General comments/License Statement if any.
© 2012 by MacView. All rights reserved.
---------------------------------------------------

		/*		     		//Dear future me. Please forgive me.			*/
		/*					//I can't even begin to express how sorry I am  */
		
	
		
p {
	font-size: 12px;
	line-height: 18px;
	font-size: Verdana, helvetica, arial, sans-serif;
}

h1,h2,h4,h5,h6 {
	font-family: myriad-pro, helvetica, arial, sans-serif;
	font-weight: normal;
}

h3 {
	font-weight:normal;
	color: #FFFFFF;
	text-shadow: 0 -1px 6px #444
	font-size: 24px;
	line-height: 24px;
	font-family: 'Helvetica';
}

h6 {
	font-weight:normal;
	line-height: 24px;
	font-family: 'Helvetica';	
}

p {
	line-height: 20px;
	text-indent: 20px;
}

header, section, article, footer {display: block;}



ul {overflow: hidden;}


li {list-style:none;
    margin-left: 0;}





.container_24 {
	
	padding-right: 5px;
	padding-left: 5px;
	position: relative;

}

a {
	text-decoration: none;
	color: black;
}

a:hover {text-decoration: underline;}


/* Logo and Links
----------------------------------------------------------------------------------------------------*/


header nav {
	position: absolute;
	overflow: hidden;
	margin-top: 5px;
	display: inline;
	float: right;
	height: 193px;
	line-height: 193px;
}
	

header logo {
	position: abosolute;
	float: right;
	margin-top: 50px;
	margin-left: 50px;
}

		header nav li {
			
				float: left;
				margin-left: 10px;
				margin-right: 22px;
				border-bottom: solid 154px #BD8100;		
				}


						header nav a {
							font-size: 17px;
							color: #2E2E2E;
							padding: 6px;
							
						}
						
header nav a:hover, nav .selected {
	background: #E9EFFF;
	background-color: background: #E9EFFF;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #fccc85;
	border-bottom-style: none;
		margin-right: -2px;
	-webkit-transition: background .1s;
		-moz-transition: background .1s;
			-o-transition: background .1s;
				-transition: background .1s;
}





/* Social Icons
----------------------------------------------------------------------------------------------------*/

#headSocial {
	position: absolute;
	float: right;
	top: -13px;
	right: 26px;
}

#headSocial li{
	display:inline;
}

		#headSocial img { 
		float: right;
		margin-left: 14px;
		-webkit-transition: all .5;
		-moz-transition: all .5s;
		-o-transition: all .5s;
		transition: all .5s;
		}
					
					
						#headSocial img:hover {
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		margin-top: -1px;
		
						}
							
						




/* Search Bar
----------------------------------------------------------------------------------------------------*/

header form {
	position: absolute;
	float: right;
	top: -11px;
	right: 270px;
}

	header form p {
		font-weight: bold;
		text-transform: uppercase;
		text-shadow: 0 -1px 0 black;
		margin-bottom: 0;
		position: relative;
	}
	
	header input {
		background: #247083;
		background: url(../img/searchIcon.png) 98% 48% no-repeat, -webkit-gradient(
			linear, 
			left top, left bottom, 
			from(#DAE2EA), to(#FFFFFF));
	    padding: 5px 20px;
		border: 1px solid #206577;
		color: #000000;
		margin-left: 5px;
	}
	

		
		


	/* Class
----------------------------------------------------------------------------------------------------*/






.imgpadding {
	margin-top: 64px;
	margin-left: 30px;	
} 

#Orange {
        postion: relative;	
	float: right;
	margin-top: 133px;
        margin-right: 10px;
	}
	

/* Grids */
.grid_8 {
	background-color:#CFD9EF;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	min-height: 900px;
	position: relative;
	
}
	
	/* The Article and Sidebar
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/	

#main {
	padding-top: 50px;
	padding-bottom: 40px;
	overflow: hidden;
}

#primary {
	margin-top: -21px;
	margin-bottom: 10px;
}



#main article {
		padding-right: 50px;
	}
	
		#main article img {
			margin: 0 0 10px;
		}
		
		article h2 {
			margin-bottom: 0;
			font-weight: normal;
		}
		

		
		article h2 a:hover {
			text-decoration: none;
			font-weight: bold;
		}
		
		#main p a {
			color: #247184;
			font-weight: bold;
		}
		
#secondary h3 {
	text-transform: none; 
	background: #426694;
	text-decoration: none;
	padding: 10px 50px;
    margin-right: 20px;
 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	
	border-radius: 5px;  
    border-top-right-radius: 1px;
	border-bottom-left-radius: 1px;
	
	
	border-bottom-style: none;
	margin-right: 0px;
	position: absolute;
	left: 0;
	margin-top: -12px;
	margin-bottom: 20px;
	
}

article h3 a {
color: #FFF;	
}

article h3 {
	width: 585px;
}

article h6{
	width: 585px;
	z-index: 1;
}
/* Main Articles */
#primary h3 {
	text-transform: none; 
	background: #426694;
	text-decoration: none;

 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
	
	border-radius: 3px;  
    border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	
	margin-top: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 5px;

}
	
#primary h6 {	
    text-transform: none; 
	background: #CCCCCC;
	text-decoration: none;

 	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	
	border-radius: 5px;  
    border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	margin-top: -18px;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-left: 5px;

}
	
#primary p {
	font-size: 14px;
	font-family: "helvetica";
	padding-left: 5px;
}
	/* Suggestive Articles */
.post{
	background-color:#D7E2EF;
	margin-top: 15px;
	margin-bottom: 10px;
	Padding-bottom: 10px;
	
	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	border-radius: 5px;  
}

.InformationBar{
	width: 590px;
	min-height: 20px;
	background-color:#DAE2EA;
	-webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	border-radius: 5px;  
	
}

.TopNews
{
padding-top: 10px;
padding-bottom: 5px;
padding-left: 10px;
color: #001;
font-size: 18px;
	
}
/* Footer */
#footer {
   position:relative;
   bottom:-10px;
   width:100%;
   height:30px;  
   -webkit-border-radius: 5px;
 	-moz-border-radius: 5px;
	border-radius: 5px;  
	 /* Height of the footer */
   background:#6E6876;
}

/* Footer Font */


#footer p {
	color: #EEE;
	font-size: 15px;
	padding-top:
}


/* Wordpress Styles */

.alignright {
	float: right
}

.alignleft {
	float: left;
}

.wp-caption {
      padding-top: 5px;
      border: 4px solid #e2e2e2;
      text-align: center;
      background-color: #fff;
      margin: 10px;
}
   .wp-caption img {
      margin: 0;
      padding: 0;
      border: 0 none;
   }
   .wp-caption p.wp-caption-text {
      font-size: 11px;
      line-height: 17px;
      padding: 0 4px 5px;
	  margin: 0; 
	  }
	  
	  header .current_page_item a, header .current_page_item a:visited {
		  background: #E9EFFF;
	text-decoration: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-border-radius: 3px;
	border-radius: 3px;
	border: 1px solid #fccc85;
	border-bottom-style: none;
	margin-right: -2px;
	-webkit-transition: background .1s;
		-moz-transition: background .1s;
			-o-transition: background .1s;
				-transition: background .1s;
}
		  


	/* End */
	
	/* I'm so sorry *troll face* */
	
	
	/*
  960 Grid System ~ Core CSS.
  Learn more ~ [url]http://960.gs/[/url]

  Licensed under GPL and MIT.
*/

/*
  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
*/

body {
  min-width: 960px;
}

/* `Container
----------------------------------------------------------------------------------------------------*/

.container_24 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}

/* `Grid >> Global
----------------------------------------------------------------------------------------------------*/

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12,
.grid_13,
.grid_14,
.grid_15,
.grid_16,
.grid_17,
.grid_18,
.grid_19,
.grid_20,
.grid_21,
.grid_22,
.grid_23,
.grid_24 {
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
}

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12,
.push_13, .pull_13,
.push_14, .pull_14,
.push_15, .pull_15,
.push_16, .pull_16,
.push_17, .pull_17,
.push_18, .pull_18,
.push_19, .pull_19,
.push_20, .pull_20,
.push_21, .pull_21,
.push_22, .pull_22,
.push_23, .pull_23 {
  position: relative;
}

/* `Grid >> Children (Alpha ~ First, Omega ~ Last)
----------------------------------------------------------------------------------------------------*/

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* `Grid >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .grid_1 {
  width: 30px;
}

.container_24 .grid_2 {
  width: 70px;
}

.container_24 .grid_3 {
  width: 110px;
}

.container_24 .grid_4 {
  width: 150px;
}

.container_24 .grid_5 {
  width: 190px;
}

.container_24 .grid_6 {
  width: 230px;
}

.container_24 .grid_7 {
  width: 270px;
}

.container_24 .grid_8 {
  width: 310px;
}

.container_24 .grid_9 {
  width: 350px;
}

.container_24 .grid_10 {
  width: 390px;
}

.container_24 .grid_11 {
  width: 430px;
}

.container_24 .grid_12 {
  width: 470px;
}

.container_24 .grid_13 {
  width: 510px;
}

.container_24 .grid_14 {
  width: 550px;
}

.container_24 .grid_15 {
  width: 590px;
}

.container_24 .grid_16 {
  width: 630px;
}

.container_24 .grid_17 {
  width: 670px;
}

.container_24 .grid_18 {
  width: 710px;
}

.container_24 .grid_19 {
  width: 750px;
}

.container_24 .grid_20 {
  width: 790px;
}

.container_24 .grid_21 {
  width: 830px;
}

.container_24 .grid_22 {
  width: 870px;
}

.container_24 .grid_23 {
  width: 910px;
}

.container_24 .grid_24 {
  width: 950px;
}

/* `Prefix Extra Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .prefix_1 {
  padding-left: 40px;
}

.container_24 .prefix_2 {
  padding-left: 80px;
}

.container_24 .prefix_3 {
  padding-left: 120px;
}

.container_24 .prefix_4 {
  padding-left: 160px;
}

.container_24 .prefix_5 {
  padding-left: 200px;
}

.container_24 .prefix_6 {
  padding-left: 240px;
}

.container_24 .prefix_7 {
  padding-left: 280px;
}

.container_24 .prefix_8 {
  padding-left: 320px;
}

.container_24 .prefix_9 {
  padding-left: 360px;
}

.container_24 .prefix_10 {
  padding-left: 400px;
}

.container_24 .prefix_11 {
  padding-left: 440px;
}

.container_24 .prefix_12 {
  padding-left: 480px;
}

.container_24 .prefix_13 {
  padding-left: 520px;
}

.container_24 .prefix_14 {
  padding-left: 560px;
}

.container_24 .prefix_15 {
  padding-left: 600px;
}

.container_24 .prefix_16 {
  padding-left: 640px;
}

.container_24 .prefix_17 {
  padding-left: 680px;
}

.container_24 .prefix_18 {
  padding-left: 720px;
}

.container_24 .prefix_19 {
  padding-left: 760px;
}

.container_24 .prefix_20 {
  padding-left: 800px;
}

.container_24 .prefix_21 {
  padding-left: 840px;
}

.container_24 .prefix_22 {
  padding-left: 880px;
}

.container_24 .prefix_23 {
  padding-left: 920px;
}

/* `Suffix Extra Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .suffix_1 {
  padding-right: 40px;
}

.container_24 .suffix_2 {
  padding-right: 80px;
}

.container_24 .suffix_3 {
  padding-right: 120px;
}

.container_24 .suffix_4 {
  padding-right: 160px;
}

.container_24 .suffix_5 {
  padding-right: 200px;
}

.container_24 .suffix_6 {
  padding-right: 240px;
}

.container_24 .suffix_7 {
  padding-right: 280px;
}

.container_24 .suffix_8 {
  padding-right: 320px;
}

.container_24 .suffix_9 {
  padding-right: 360px;
}

.container_24 .suffix_10 {
  padding-right: 400px;
}

.container_24 .suffix_11 {
  padding-right: 440px;
}

.container_24 .suffix_12 {
  padding-right: 480px;
}

.container_24 .suffix_13 {
  padding-right: 520px;
}

.container_24 .suffix_14 {
  padding-right: 560px;
}

.container_24 .suffix_15 {
  padding-right: 600px;
}

.container_24 .suffix_16 {
  padding-right: 640px;
}

.container_24 .suffix_17 {
  padding-right: 680px;
}

.container_24 .suffix_18 {
  padding-right: 720px;
}

.container_24 .suffix_19 {
  padding-right: 760px;
}

.container_24 .suffix_20 {
  padding-right: 800px;
}

.container_24 .suffix_21 {
  padding-right: 840px;
}

.container_24 .suffix_22 {
  padding-right: 880px;
}

.container_24 .suffix_23 {
  padding-right: 920px;
}

/* `Push Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .push_1 {
  left: 40px;
}

.container_24 .push_2 {
  left: 80px;
}

.container_24 .push_3 {
  left: 120px;
}

.container_24 .push_4 {
  left: 160px;
}

.container_24 .push_5 {
  left: 200px;
}

.container_24 .push_6 {
  left: 240px;
}

.container_24 .push_7 {
  left: 280px;
}

.container_24 .push_8 {
  left: 320px;
}

.container_24 .push_9 {
  left: 360px;
}

.container_24 .push_10 {
  left: 400px;
}

.container_24 .push_11 {
  left: 440px;
}

.container_24 .push_12 {
  left: 480px;
}

.container_24 .push_13 {
  left: 520px;
}

.container_24 .push_14 {
  left: 560px;
}

.container_24 .push_15 {
  left: 600px;
}

.container_24 .push_16 {
  left: 640px;
}

.container_24 .push_17 {
  left: 680px;
}

.container_24 .push_18 {
  left: 720px;
}

.container_24 .push_19 {
  left: 760px;
}

.container_24 .push_20 {
  left: 800px;
}

.container_24 .push_21 {
  left: 840px;
}

.container_24 .push_22 {
  left: 880px;
}

.container_24 .push_23 {
  left: 920px;
}

/* `Pull Space >> 24 Columns
----------------------------------------------------------------------------------------------------*/

.container_24 .pull_1 {
  left: -40px;
}

.container_24 .pull_2 {
  left: -80px;
}

.container_24 .pull_3 {
  left: -120px;
}

.container_24 .pull_4 {
  left: -160px;
}

.container_24 .pull_5 {
  left: -200px;
}

.container_24 .pull_6 {
  left: -240px;
}

.container_24 .pull_7 {
  left: -280px;
}

.container_24 .pull_8 {
  left: -320px;
}

.container_24 .pull_9 {
  left: -360px;
}

.container_24 .pull_10 {
  left: -400px;
}

.container_24 .pull_11 {
  left: -440px;
}

.container_24 .pull_12 {
  left: -480px;
}

.container_24 .pull_13 {
  left: -520px;
}

.container_24 .pull_14 {
  left: -560px;
}

.container_24 .pull_15 {
  left: -600px;
}

.container_24 .pull_16 {
  left: -640px;
}

.container_24 .pull_17 {
  left: -680px;
}

.container_24 .pull_18 {
  left: -720px;
}

.container_24 .pull_19 {
  left: -760px;
}

.container_24 .pull_20 {
  left: -800px;
}

.container_24 .pull_21 {
  left: -840px;
}

.container_24 .pull_22 {
  left: -880px;
}

.container_24 .pull_23 {
  left: -920px;
}

/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/

/* [url]http://sonspring.com/journal/clearing-floats[/url] */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* [url]http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified[/url] */

.clearfix:before,
.clearfix:after,
.container_24:before,
.container_24:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_24:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_24 {
  zoom: 1;
}
 
Last edited by a moderator:
The first issue has to do with the way the different browsers handle inherit margin values on absolutely positioned elements.

Changing the #headSocial css to this will fix it.

Code: 
#headSocial {
    float: right;
    margin: 0;
    position: absolute;
    right: 26px;
    top: 0;
}

also to note, you're using html 5 tags but you are using a xhtml 1.0 doctype and html5 doesn't use the xmlns attribute on the html tag.

Code: 
<!DOCTYPE html>
<html>
 
jsm4182 said:
The first issue has to do with the way the different browsers handle inherit margin values on absolutely positioned elements.

Changing the #headSocial css to this will fix it.

Code: 
#headSocial {
    float: right;
    margin: 0;
    position: absolute;
    right: 26px;
    top: 0;
}

also to note, you're using html 5 tags but you are using a xhtml 1.0 doctype and html5 doesn't use the xmlns attribute on the html tag.

Code: 
<!DOCTYPE html>
<html>
Click to expand...


THANKKKSSS ssooo much :D but any ideas about the links ?
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back