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
Roland Hagan
6,443 PointsMy website does not work in Safari browser.
When I open up my website's page in the safari browser all of the elements are all over the place. I'm not sure if it is my code or if it is a browser issue. Can anyone provide me with an answer?
4 Answers
jaredcowan
11,808 PointsIt looks like your html structure is all messed up. You need to wrap all your cols in a container. Also, you had a period after your bootstrap.css
P.S. You should probably put your logo and links in a Bootstrap navbar
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css"/>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
</head>
<body>
<div class="logo">
<img src="munchlogoweb(1).png"/>
</div>
<ul class="pull-left">
<li><a href="dashboard.html"><img src="homeicon1(2).png"></a></li>
<li><a href="settings.html"><img src="machineicon1(2).png"></a></li>
</ul>
<ul class="pull-right">
<li><a href="helpdocs.html"><img src="helpicon1.png"></a></li>
<li><a href="#"><img src="powerbutton1(2).png"></a></li>
</ul>
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="createoffer.html"><img src="createoffericon(1).png"></a>
<div class="text1"><a href="createoffer.html">Create Offer</a></div>
</div> <!-- END col-md-3 -->
<div class="col-md-3">
<a href="stats.html"><img src="statsicon(1).png"></a>
<div class="text2"><a href="stats.html">Stats</a></div>
</div> <!-- END col-md-3 -->
<div class="col-md-3">
<a href="settings.html"><img src="settingsicon(1).png"></a>
<div class="text3"><a href="settings.html">Settings</a></div>
</div> <!-- END col-md-3 -->
<div class="col-md-3">
<a href="help.html"><img src="helpicon.png"></a>
<div class="text4"><a href="help.html">Help</a></div>
</div> <!-- END col-md-3 -->
</div> <!-- END row -->
</div> <!-- END container -->
</body>
</html>
jaredcowan
11,808 PointsWithout seeing your code. I'd assume that you need to prefix some of your code and some might not be supported by all browsers.
Roland Hagan
6,443 Points``` <!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css."/>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
<div class="logo">
<img src="munchlogoweb(1).png"/>
</div>
<ul class="pull-left">
<li><a href="dashboard.html"><img src="homeicon1(2).png"></a></li>
<li><a href="settings.html"><img src="machineicon1(2).png"></a></li>
</ul>
<ul class="pull-right">
<li><a href="helpdocs.html"><img src="helpicon1.png"></a></li>
<li><a href="#"><img src="powerbutton1(2).png"></a></li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="createoffer.html"><img src="createoffericon(1).png"></a>
<div class="text1"><a href="createoffer.html">Create Offer</a></div>
</div>
<div class="col-md-3">
<a href="stats.html"><img src="statsicon(1).png"></a>
<div class="text2"><a href="stats.html">Stats</a></div>
</div>
<div class="col-md-3">
<a href="settings.html"><img src="settingsicon(1).png"></a>
<div class="text3"><a href="settings.html">Settings</a></div>
</div>
<div class="col-md-3">
<a href="help.html"><img src="helpicon.png"></a>
<div class="text4"><a href="help.html">Help</a></div>
</div>
Roland Hagan
6,443 PointsHere is the CSS code.
``` body { background-color: #FFFFFF; }
.navbar { width: 1376px; height: 56px; background-color: #FF3F34; margin-top: -8px; margin-left: -10px; }
.navbar li { display: inline; }
.pull-left { margin-top: -22px; }
.pull-right { margin-top: -22px; }
.logo { display: inline; }
.logo img { margin-top: 7px; margin-left: 235px; }
.container { margin-left: 140px; }
.col-md-3 { display: inline; margin-top: 230px; }
.text1 a { text-decoration: none; font-family: Verdana, sans serif; font-size: 24px; color: #333333; display: inline; }
.text2 a { text-decoration: none; font-family: Verdana, sans serif; font-size: 24px; color: #333333; display: inline; margin-left: 43px; }
.text3 a { text-decoration: none; font-family: Verdana, sans serif; font-size: 24px; color: #333333; display: inline; margin-left: 25px; }
.text4 a { text-decoration: none; font-family: Verdana, sans serif; font-size: 24px; color: #333333; display: inline; margin-left: 45px; } ```
Roland Hagan
6,443 PointsHere is the html code.
``` <!DOCTYPE html>
<html lang="en">
<head> <title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css."/>
<link type="text/css" rel="stylesheet" href="stylesheet2.css"/>
</head>
<body> <div class="navbar">
<div class="logo">
<img src="munchlogoweb(1).png"/>
</div>
<ul class="pull-left">
<li><a href="dashboard.html"><img src="homeicon1(2).png"></a></li>
<li><a href="settings.html"><img src="machineicon1(2).png"></a></li>
</ul>
<ul class="pull-right">
<li><a href="helpdocs.html"><img src="helpicon1.png"></a></li>
<li><a href="#"><img src="powerbutton1(2).png"></a></li>
</ul>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="createoffer.html"><img src="createoffericon(1).png"></a>
<div class="text1"><a href="createoffer.html">Create Offer</a></div>
</div>
<div class="col-md-3">
<a href="stats.html"><img src="statsicon(1).png"></a>
<div class="text2"><a href="stats.html">Stats</a></div>
</div>
<div class="col-md-3">
<a href="settings.html"><img src="settingsicon(1).png"></a>
<div class="text3"><a href="settings.html">Settings</a></div>
</div>
<div class="col-md-3">
<a href="help.html"><img src="helpicon.png"></a>
<div class="text4"><a href="help.html">Help</a></div>
</div>
</div>
</div>
</body>
</html>
Roland Hagan
6,443 PointsHere is the CSS code.
body {
background-color: #FFFFFF;
}
.navbar {
width: 1376px;
height: 56px;
background-color: #FF3F34;
margin-top: -8px;
margin-left: -10px;
}
.navbar li {
display: inline;
}
.pull-left {
margin-top: -22px;
}
.pull-right {
margin-top: -22px;
}
.logo {
display: inline;
}
.logo img {
margin-top: 7px;
margin-left: 235px;
}
.container {
margin-left: 140px;
}
.col-md-3 {
display: inline;
margin-top: 230px;
}
.text1 a {
text-decoration: none;
font-family: Verdana, sans serif;
font-size: 24px;
color: #333333;
display: inline;
}
.text2 a {
text-decoration: none;
font-family: Verdana, sans serif;
font-size: 24px;
color: #333333;
display: inline;
margin-left: 43px;
}
.text3 a {
text-decoration: none;
font-family: Verdana, sans serif;
font-size: 24px;
color: #333333;
display: inline;
margin-left: 25px;
}
.text4 a {
text-decoration: none;
font-family: Verdana, sans serif;
font-size: 24px;
color: #333333;
display: inline;
margin-left: 45px;
}
Roland Hagan
6,443 PointsRoland Hagan
6,443 PointsThanks for the bootstrap navbar tip. I had a look at the docs and implemented it into my code. As for the structure, my original structure was correct.