Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Getting similar results over multiple browsers

    I'm trying to create a page that looks similar over multiple browsers.
    Can anyone give me any suggestions how I can improve these issues?

    It's at http://im.ryandeez.com

    SAFARI 5.1.5 (MAC) - Looks how I want it
    FIREFOX 12 (MAC) - The footer sits a few pixels off the bottom
    FIREFOX 11 (WIN) - Same problem as mac + .menu sits lower than #navmenu
    OPERA 11.64 (MAC) - There's seems to be a margin on the right of background pic & the 'contact' list item has shifted down
    IE 9 (WIN) - Century Gothic font in the footer doesn't work.

    Any help would be much appreciated

    CSS

    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    body {
    	background-image: url(African.jpg);
    	background-size: cover;
    	background-repeat: no-repeat; 
    	margin: 0;
    	padding: 0;
    }
    @font-face {
        font-family: "Altgoth";
        src: url(AlternateGotNo1D.otf);
        font-weight:400;
    	}
    @font-face {
    	font-family: "Amert";
    	src: url(AmericanTypewriter-Medium.otf);
    	}
    @font-face {
    	font-family: "Century";
    	src: url(CenturyGothicStd.otf);
    	}
    #logoRectangle {
    	width:111px;
    	height:25px;
    	background-color:#ffffff;
    	border:none;
    	opacity:0.9;
    	filter:alpha(opacity=90);
    	margin-left: 0px;
    	margin-top: 10px;
    }
    #navmenu {
    	position: absolute;
    	height: 20px;
    	width: 344px;
    	background-color: #000;
    	opacity:0.6;
    	filter:alpha(opacity=60);
    	top: 41px;
    	right: 0px;
    	float: right;
    }
    #p1{
    	position: relative;
    	top: -46px;
    	left: 21px;
    	opacity: 1;
    	filter: alpha(opacity=100);
    	width: 100px;
    	height: 25px;
    	margin-top: 22px;
    }
    .brownlogo {
    	font-size: 23px;
    	color: #231c0e;
    	font-family: "Altgoth";
    	letter-spacing: 2.6pt;
    }
    .redlogo {
    	font-size: 23px;
    	color: #c32035;
    	font-family: "Altgoth";
    	letter-spacing: 2.6pt;
    }
    .menu {
    	display:block;
    	position:absolute;
    	right:0;
    	width: 381px;
    	height: 10px;
    	float: right;
    	top: 24px;
    	margin-top: 1px;
    	}
    
    .menu a {
    	font-family: "Amert";
    	letter-spacing: 0.19em;
    	font-weight: normal;
    	font-size: 0.6em;
    	text-decoration:none;
    	color: #FFF;
    	padding-left: 20px;
    	}
    
    .menu a:hover {
    	text-decoration:none;
    	color: #CCC;
    	}
    
    .menu ul {
    	list-style-type:none;
    	padding-right: 23px;
    }
    
    .menu li {
    	display:inline;
    	}
    .progress {
    	font-size: 36px;
    	color: #ffffff;
    	font-family: Altgoth;
    	letter-spacing: 2px;
    	text-transform: uppercase;
    	}
    .progress a {
    	text-decoration:none;
        color: #ffffff;
    }
    .progress a:hover {
    	text-decoration:none;
    	color: #CCC;
    	}
    .footnav {
    	font-family: "Century";
    	letter-spacing: 0.19em;
    	font-size: 0.6em;
    	text-decoration:none;
    	color: #000;
    	display: inline;
    	position: relative;
    	width: 100%;
    	text-align: center;
    	text-decoration: none;
    	top: 0px;
    	}
    .footnav a {
    	font-family: "Century";
    	text-decoration:none;
    	color: #000;
    	display: inline;
    	position: relative;
    	width: 100%;
    	text-align: center;
    	text-decoration: none;
    	padding-right: 13px;
    	}
    .footnav a:hover {
    	color: #666;
    	text-decoration: underline;
    	}
    .footnav ul {
    	list-style-type:none;
    	}
    .footnav li {
    	display:inline;
    	}
    .copyright {
    	font-family: "Century";
    	letter-spacing: 0.19em;
    	font-weight: normal;
    	font-size: 0.6em;
    	text-decoration:none;
    	color: #000;
    	padding-left: 20px;
    	display:block;
    	}
    .copyunder a {
    	font-family: "Century";
    	letter-spacing: 0.19em;
    	font-weight: normal;
    	font-size: 100%;
    	text-decoration:none;
    	color: #000;
    	}	
    .copyunder a:hover {
    	font-family: "Century";
    	letter-spacing: 0.19em;
    	font-weight: normal;
    	font-size: 100%;
    	text-decoration:underline;
    	color: #666;
    	}	
    #copyright {
    	position:relative;
    	width: 100%;
    	height: 10px;
    	text-align: center;
        bottom: 0;
    }
    		
    #progress {
    	margin-left: 62px;
    	width: 500px;
    	position: relative;
    	top: -97px;
    }
    #topbar {
    	background-color:#ffffff;
    	height: 25px;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	opacity:0.9;
    	filter:alpha(opacity=90);
    }
    #footer {
    	position:absolute;
    	bottom:0px;
    	width:100%;
    	height:50px;
    	background:#ffffff;
    	opacity:0.9;
    	filter:alpha(opacity=90);
    }
    #footnav {
    	display: block
    	position:relative;
    	width: 100%;
    	height: 10px;
    	text-align: center;
    	position: relative;
    }
    #wowcont {
    	height: 344px;
    	width: 516px;
    	position: absolute;
    	float: right;
    	padding-right: 20px;
    	bottom: 70px;
    	right: 0px;
    }
    #whoami {
    	font-family: "Amert";
    	color: #FFF;
    	margin-left: 62px;
    	height: 30px;
    	width: 500px;
    	opacity:1;
    	filter:alpha(opacity=100);
    	position: relative;
    	top: -155px;
    }
    #whocont {
    	background-color: #000;
    	height: 120px;
    	width: 550px;
    	padding-top: 15px;
    	padding-bottom: 15px;
    	opacity:0.6;
    	filter:alpha(opacity=60);
    	position: relative;
    	top: -20px;
    	padding-right: 15px;
    }
    .who {
    	font-family: "Amert";
    	font-size: 16px;
    	line-height: 80%;
    	letter-spacing: 2px;
    }
    .us {
    	font-family: "Amert";
    	font-size: 14px;
    	line-height: 140%;
    	letter-spacing: 1.5px;
    }
    </style>
    </head>
    HTML

    Code:
    <body>
    <div id="topbar"></div>
    <div id="logoRectangle"></div>
    <p class="brownlogo" id="p1">RYAN<span class="redlogo">DEEZ</span></p>
    <div id="navmenu"></div>
    <div class="menu">
    	<ul>
    		<li><a href="#">home</a></li>
    		<li><a href="#">about</a></li>
    		<li><a href="#">work</a></li>
        	<li><a href="#">projects</a></li>
        	<li><a href="#">contact</a></li>
      </ul>
    </div>
    <div id="whocont"></div>
    <div class="who" id="whoami">Who or What is Ryan Deez?<br />
      <br /><span class="us">Ryan Deez is a freelance graphic design entity which <br />directs
    and employs talented creatives in collaborative <br />ventures. We strive to keep forward momentum with</span></div>
    <div class="progress" id="progress"><a href="#">progressive design & visual solutions.</a></div>
    
    <div id="footer">
      <div id="footnav">
    <div class="footnav">
    	<ul>
    		<li><a href="#">home</a></li>
    		<li><a href="#">about</a></li>
    		<li><a href="#">work</a></li>
        	<li><a href="#">projects</a></li>
       	  <li><a href="#">contact</a></li>
    	</ul>
    </div>
    </div>
    <div id="copyright">
    <p class="copyright">© 2012 RYAN DEEZ All Rights Reserved. <span class="copyunder"><a href="#">Terms & Conditions</a></span></p>
    </div>
    </div>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello rizzledon,
    In FF12 the bottom margin on your paragraph, .copyright, tag is extending past your footer. Either remove the height: 50px; from #footer so it is allowed to expand to enclose it's contents or remove that bottom margin.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Mar 2012
    Posts
    17
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks guys, that helped alot..not really sure what the deal with opera is but I'm not overly concerned

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    I see the same issue with the menu on FF12 and Opera. Increasing the width slightly on .menu or reducing the padding-left on .menu a sorts that issue.

    I think the white margin on Opera might be a bug - see http://my.opera.com/community/forums...dml?id=1300942


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •