Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Thomas Seelbinder
Courses Plus Student 1,223 PointsIssues with Firefox / Chrome
It appears to be becoming an increasing issue that I am running into. Changes will work in Firefox, yet not in Chrome and vice versa.
For instance, rounding my image, took in Chrome but not in firefox, yet there is no mention of how to resolve these types of situations.
see my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Extension of Mind | Photographer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light|Oswald:400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Extension of Mind</h1>
<h2>Photographer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/tombrittany2.jpg" alt="photograph of me" class="profile-photo">
<h3> About</h3>
<p>Film is God | Southern California</p>
<p>Follow me on <a href="http://extensionofmind.tumblr.com">Tumblr</a></p>
</section>
<footer>
<a href="http://extensionofmind.tumblr.com"><img src="img/tumblr_logotype_white_blue_512.png" alt="Tumblr Logo" class="social-icon"></a>
<p>© 2014 Extension of Mind | Thomas S.</p>
</footer>
</div>
</body>
</html>
/*********************
PAGE PORT
*********************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #fff;
color: #fff;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #fff;
}
/*********************
PAGE ABOUT
*********************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/*********************
GENERAL
*********************/
body {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
#wrapper {
max-width: 940px
margin: 0 auto;
padding: 0 5%;
}
/*********************
HEADING
*********************/
header {
float: left;
margin; 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Oswald', sans-serif;
margin: 15px 0;
font-size: 3.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/*********************
FONTS
*********************/
h1 {
font-family: 'Oswald', sans-serif;
}
a {
color: #000000;
}
header {
background: #000000;
border-color: #000000;
}
h1, h2 {
color: #ffffff;
}
/*********************
NAVIGATION
*********************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding; 15px 10px;
}
nav a, nav a:visited {
color: #ffffff;
}
nav a.selected {
color: #fff;
}
/*********************
FOOTER
*********************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
Any ideas?
7 Answers
Ricky Catron
13,023 PointsThe polite way to say it is the browers are rarely the same and will almost always render things differently then you intended. The more updated browsers will (hopefully) have less differences. I would reccomend updating both browsers.
The rude way would be "wait till you see it in internet explorer" ;)
Samuel Rueby
22,538 PointsNo really though, IE is awful.
The first thing I would normally think is if browser prefixes are required. In the case of border-radius, you shouldn't need specific prefixes.
I don't immediately see the issue, but I also did not test it. I did test that border-radius works in both FF and Chrome, as you can see here: http://jsfiddle.net/3N2na/
Thomas Seelbinder
Courses Plus Student 1,223 PointsYeah, I don't even want to open it in IE! haha.
I knew that things would appear different across the browsers but I didn't think it would be like this. I am going to make sure all my browsers are updated and hopefully it works out a bit better.
Thanks for the responses.
Ricky Catron
13,023 PointsGlad we were helpful. It seems like cross browser compatibility will always be an isssue. I know of some sites that simply won't let you in if you don't use a specific browser. When I was just starting I built a site for a small local company. I had only viewed it and chrome and when they opened it in IE.......lets just say my heart and pay both hit the floor.....
Thomas Seelbinder
Courses Plus Student 1,223 PointsThat is lame to hear!
Very frustrating to say the least.
Ricky Catron
13,023 PointsIt drives me crazy that some browsers are so up to date and others so far behind. The worse part is honestly the users. If everyone used the latest version of IE, Firefox, Chrome, or Opra then everything would only be a little different but sadly I have friends who just loveeeee IE6.
Samuel Rueby
22,538 PointsNo one loves IE6.
Thomas Seelbinder
Courses Plus Student 1,223 PointsLove and IE should never be in the same sentence.