jorgeAChacon
Reputation: 327
website incompatible with IE and firefox
Guys I am new to XHTML and CSS and for some reason the website I am building looks fine in chrome and safari, but looks totally incomplete on IE and firefox. Is there anything that you can recommend to make it compatible with all the browsers mentioned above?am I missing some syntax?You can also visit at www.alejandrochacon.com
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="indexone.css"/>
<title>Welcome</title>
</head>
<body>
<div id="whole">
<header id= "top">
<div id="title"><h1>Jorge Alejandro Chacon</h1></div>
<div id="quote"><h6></br></br>"One machine can do the work of fifty ordinary men. No machine can do the work of one extraordinary man."
<br/><br/>Elbert Hubbard</h6></div>
<div id="pic">
<a href="resume.pdf"><img src="images/one.jpg" title="See resume"width= 190px height=290px align="middle"/>See my resume</a>
</div>
</header>
<nav id= "navigation">
<ul>
<div id="buttons">
<li><a href="index.html" STYLE="TEXT-DECORATION: NONE" >Home</a>
<li><a href="Edu.html" STYLE="TEXT-DECORATION: NONE">Educational Background</a>
<li><a href="prof.html" STYLE="TEXT-DECORATION: NONE">Professional Background</a>
<li><a href="projects.html" STYLE="TEXT-DECORATION: NONE">Projects</a>
<li><a href="contact.html" STYLE="TEXT-DECORATION: NONE">Contact me</a></li>
</div>
</ul>
</nav>
<div id ="middle_div">
<section id="mid_section">
<div id="boxes">
<!-- <h1>
Leave your information here for a quick reponse:
</h1>
<br/>
<form id="myform" action="userinfo.php" method="post">
Name:<input type="text" value="name" name="name1">
Email:<input type="email" value="email" name="email">
Phone:<input type= "tel" value="phone(opt)" name="phone">
<button id="sub">Submit</button>
</form>
<span id="result"></span>
</div>
<div id="boxes">-->
<h1>
Email me at...
</h1>
<p>For any comments or suggestions please contact me at the email shown below.</br></br>Thank you!</p>
<div id=email><a href="mailto:[email protected]"><img src="images/Email.jpg" title="email"width= 200px height=300px align="middle"/>
[email protected]</a></div>
</div>
</section>
<aside id="side_section">
<h1>News</h1>
<div id="newbox">
<h4><br/>Find me on Linkedin</h4>
<p><br/>Hi everyone, I just opened a linkedin profile and I want to make sure you check it out and add me as one of your connections.
<br/><br/>Thanks!
<a href="http://www.linkedin.com/in/jalejandrochacon/">Alejandro's linkedin</a></p>
</div>
<div id="newbox">
<h4><br/>Online tutorials</h4>
<p></br>For those of you who want to learn on your own, take a look at this awesome website to get free education.
<a href="http://thenewboston.org/tutorials.php">thenewboston.org</a></p>
</div>
<div id="newbox">
<h4><br/>Programming help</h4>
<p></br>If you have questions or need help in any type of programming language, find quick answers here.
<a href="http://stackoverflow.com/">stackoverflow.com</a></p>
</div>
</aside>
</div>
<footer id="bottom">
<ul>
<div id="navFooter">
<li><a href="index.html" STYLE="TEXT-DECORATION: NONE" >Home</a>
<li><a href="Edu.html" STYLE="TEXT-DECORATION: NONE">Educational Background</a>
<li><a href="prof.html" STYLE="TEXT-DECORATION: NONE">Professional Background</a>
<li><a href="projects.html" STYLE="TEXT-DECORATION: NONE">Projects</a>
<li><a href="contact.html" STYLE="TEXT-DECORATION: NONE">Contact me</a></li>
</div>
</ul>
</br>
Developed by Jorge Chacon 2013
</footer>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 35px tahoma;
text-shadow: rgba(110,110,110,.8) 2px 2px 2px;
width: 400px;
}
h4,h5{
font-family: tahoma;
}
h6{
width: 400px;
padding: 30px;
float: right;
}
header, section,footer,aside,nav{
display: block;/*make sure is compatible with all browsers*/
}
body{
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
background-image:url(images/gray.jpg);
background-repeat:no-repeat;
background-size: cover;
}
#whole{
max-width: 1200px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex: 1;
}
#top{
background: -webkit-linear-gradient(top,#759600,#B2CC01);
border: 4px solid white;
margin: 5px;
padding: 10px;
-webkit-border-radius:5px;
color: white;
font-size: 40px;
height: 360px;
position: relative;
}
#navigation{
text-align: center;
-webkit-border-radius: 5px;
background: white;
margin: 5px;
height: 40px;
}
#navigation li,a{
display: inline-block;
list-style: none;
margin: auto;
padding: 4px;
font: bold 14px tahoma;
color: #759600;
-webkit-transition: color 1s;
}
a:hover {
color:#1ec7e6;
}
#java{
list-style: none;
}
#middle_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
}
#mid_section{
-webkit-border-radius: 5px;
-webkit-box-flex: 1;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
height: auto;
margin:5px;
}
#email, img{
-webkit-border-radius:5px;
}
#epic{
padding-left: 100px;
}
#side_section{
border: 1px solid #759600;
-webkit-border-radius: 3px;
width: 200px;
background: #D3D3D3;
margin: 5px;
padding:20px;
height: auto;
}
#bottom{
text-align: center;
padding: 10px;
border-top: 2px solid #759600;
color:white;
}
#boxes{
border: 1px solid #759600;
margin:20px;
-webkit-border-radius: 5px;
-webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
padding: 20px;
-webkit-box-flex: 1;
background: #D3D3D3;
}
#pic{
background: #D3D3D3;
width: 17%;
height: 86%;
float: right;
border:3px solid white;
-webkit-box-shadow: rgba(110,110,110,.6) 7px 7px 7px;
-webkit-border-radius: 5px;
padding: 18px;
-webkit-transition: -webkit-transform 2s, background 1s;
}
#pic:hover{
-webkit-transform: scale(1.1, 1.1);
background: #1ec7e6;
}
p{
font-size: 18px;
font-family: tahoma;
margin: 10px;
text-align: justify;
}
#title{
display: inline;
float: left;
}
#classes{
font-size: 14px;
margin-left:20px;
font-family: tahoma;
}
img{
display: block;
width: 92%;
margin-left: auto;
margin-right: auto
}
iframe{
display: block;
margin-left: auto;
margin-right: auto
}
#newbox{
border-top: 1px;
border-top-style: solid;
border-top-color: black;
}
#pic a{
color: black;
text-align: center;
}
#navFooter li{
display: inline-block;
list-style: none;
margin: auto;
padding: 4px;
}
MODIFIED CSS
*{
margin: 0px;
padding: 0px;
}
h1{
font: bold 35px tahoma;
text-shadow: rgba(110,110,110,.8) 2px 2px 2px;
width: 400px;
}
h4,h5{
font-family: tahoma;
}
h6{
width: 400px;
padding: 30px;
float: right;
}
header, section,footer,aside,nav{
display: block;/*make sure is compatible with all browsers*/
}
body{
width: 100%;
display: -webkit-box, -moz-box, -ms-box, -o-box, box;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
-o-box-pack: center;
box-pack: center;
background-image:url(images/gray.jpg);
background-repeat:no-repeat;
background-size: cover;
}
#whole{
max-width: 1200px;
margin: 20px 0px;
display: -webkit-box, -moz-box, -ms-box, -o-box, box;
-webkit-box-orient:vertical;
-moz-box-orient: vertical;
-ms-box-orient: vertical;
-o-box-orient: vertical;
box-orient: vertical;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
}
#top{
background: -webkit-linear-gradient(top,#759600,#B2CC01) ;
border: 4px solid white;
margin: 5px;
padding: 10px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color: white;
font-size: 40px;
height: 360px;
position: relative;
}
#navigation{
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background: white;
margin: 5px;
height: 40px;
}
#navigation li,a{
display: inline-block;
list-style: none;
margin: auto;
padding: 4px;
font: bold 14px tahoma;
color: #759600;
-webkit-transition: color 1s;
-moz-transition:5px;
-ms-transition: 5px;
-o-transition: 5px;
transition: 5px;
}
a:hover {
color:#1ec7e6;
}
#java{
list-style: none;
}
#middle_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
-o-box-orient: horizontal;
box-orient: horizontal;
}
#mid_section{
-webkit-border-radius: 5px;
-moz-border-radius:5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
height: auto;
margin:5px;
}
#email, img{
-webkit-border-radius:5px;
-moz-border-radius:5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#epic{
padding-left: 100px;
}
#side_section{
border: 1px solid #759600;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
width: 200px;
background: #D3D3D3;
margin: 5px;
padding:20px;
height: auto;
}
#bottom{
text-align: center;
padding: 10px;
border-top: 2px solid #759600;
color:white;
}
#boxes{
border: 1px solid #759600;
margin:20px;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-webkit-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
-moz-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
-ms-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
-o-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
padding: 20px;
-webkit-box-flex: 1;
background: #D3D3D3;
}
#pic{
background: #D3D3D3;
width: 17%;
height: 86%;
float: right;
border:3px solid white;
-webkit-box-shadow: rgba(110,110,110,.6) 7px 7px 7px;
-moz-box-shadow: rgba(110,110,110,.6) 7px 7px 7px;
-ms-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
-o-box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
box-shadow: rgba(110,110,110,.6) 5px 5px 5px;
-webkit-border-radius: 5px;
-moz-border-radius:5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
padding: 18px;
-webkit-transition: -webkit-transform 2s, background 1s;
-moz-transition: -webkit-transform 2s, background 1s;
-ms-transition: -webkit-transform 2s, background 1s;
-o-transition: -webkit-transform 2s, background 1s;
transition: -webkit-transform 2s, background 1s;
}
#pic:hover{
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
background: #1ec7e6;
}
p{
font-size: 18px;
font-family: tahoma;
margin: 10px;
text-align: justify;
}
#title{
display: inline;
float: left;
}
#classes{
font-size: 14px;
margin-left:20px;
font-family: tahoma;
}
img{
display: block;
width: 92%;
margin-left: auto;
margin-right: auto
}
iframe{
display: block;
margin-left: auto;
margin-right: auto
}
#newbox{
border-top: 1px;
border-top-style: solid;
border-top-color: black;
}
#pic a{
color: black;
text-align: center;
}
#navFooter li{
display: inline-block;
list-style: none;
margin: auto;
padding: 4px;
}
Upvotes: 0
Views: 107
Answers (2)
asdf
Reputation: 3067
Because you are only using the -webkit- vendor prefix. You need to copy all those css values and add -moz- for firefox, -ms- for internet explorer and -o- for opera. Also, include a copy of that line of css without the prefix just for good measure.
Example:
body{
width: 100%;
display: box, -webkit-box, -moz-box, -ms-box, -o-box;
box-pack: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-box-pack: center;
-o-box-pack: center;
background-image:url(images/gray.jpg);
background-repeat:no-repeat;
background-size: cover;
}
Upvotes: 3
Seb
Reputation: 23
Not too sure that will be the only thing you consider as 'not working', but you should first add webkit equivalents in your css file (webkit only refers to chrome, if you want to make it work else where, you'll have to have its 'moz' and other counterparts.
Upvotes: 0
Related Questions
- Website looks ok in IE7 but not other IEs
- How to make this site work in non-firefox browsers?
- Website working in Chrome / Firefox but not in Internet Explorer
- Website on CSS doesn't work on Internet Explorer
- css Works fine with Firefox/Chrome but not with IE
- why does my CSS + HTML web pages display differently in IE & FireFox?
- CSS and Internet Explorer incompatibility
- How to solve the problems that html page works well in firefox and chrome, but wrong with IE?
- What will cause a site to look and act OK in IE but not in Firefox?
- IE cross browser compatibility problem