My website look very different?

Discussion in 'Web Design and Development' started by kclimson, Oct 16, 2011.

  1. kclimson, Oct 16, 2011
    Last edited by a moderator: Oct 16, 2011

    kclimson macrumors newbie

    kclimson

    Joined:
    Aug 15, 2011
    Location:
    Canada
    #1
    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;
    }
     
  2. jsm4182 macrumors 6502

    Joined:
    Apr 3, 2006
    Location:
    Beacon, NY
    #2
    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>
    
     
  3. kclimson thread starter macrumors newbie

    kclimson

    Joined:
    Aug 15, 2011
    Location:
    Canada
    #3

    THANKKKSSS ssooo much :D but any ideas about the links ?
     

Share This Page