| rizzledon |
05-11-2012 08:07 AM |
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>
|
