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!

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

HTML

James Ingmire
James Ingmire
11,901 Points
Posted by James Ingmire
James Ingmire
11,901 Points

Can one of you wizz kids tell me why on firefox my Carousel moves off page to the right ONLY in firefox tho...please.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title><?php echo $pageTitle; ?></title>  
  <link rel="stylesheet" href="css/reset.css" type="text/css">
  <link rel="stylesheet" href="css/carousel.css" type="text/css">
  <link rel="stylesheet" href="css/mainstyle.css" type="text/css">
  <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
</head>

<body>
    <div class="main-container">

        <div class="header-container">
            <img src="image/harte_beauty.svg" alt="Harte Beauty Logo"/>

        <section>
        <hr>
            <table>
                <tr>
                    <th>Opening Times</th>
                </tr>
                <tr>
                    <td>Monday</td>
                    <td>Closed</td>     
                </tr>
                <tr>
                    <td>Tuesday</td>
                    <td>10am-8pm</td>       
                </tr>
                <tr>
                    <td>Wednesday</td>
                    <td>Closed</td>     
                </tr>
                <tr>
                  <td>Thursday</td>
                  <td>10am-8pm</td>     
                </tr>
                <tr>
                    <td>Friday</td>
                    <td>10am-3pm</td>       
                    </tr>
                <tr>
                    <td>Saturday</td>
                    <td>10am-5pm</td>       
                </tr>
                <tr>
                    <td>Sunday</td>
                    <td>Closed</td>     
                </tr>
            </table>
        <hr>

        <div class="clear">
        <a href="tel:07931094807"><img src="image/icons/contact_telephone.svg" alt="Call Anne Marie Harte on 07931094807"/><span></span>07931094807</a>

        <hr>
                 <a href="mailto:anne_marie_harte@hotmail.com"><p><img src="image/icons/contact_mail.svg" alt="Email Anne-Marie to book an apointment"/><span></span>anne_marie_harte@hotmail.com</p></a>
        </div>
        </section>

        </div>
        <nav>
            <ul>
                <li class="<?php if ($section == "home") { echo "on"; } ?>"><a href="index.php">Home</a></li>
                <li class="<?php if ($section == "beauty") { echo "on"; } ?>"><a href="beauty_treatments.php">Price Lists</a></li>

                  <li><a href="index.html">Pamper Packages</a>
                     <ul>
                        <li>Option one</li>
                          <li>option two</li>
                          <li>option three</li>
                          <li>option four</li>
                     </ul>
                  </li>

                <li>
                    <a href="index.html">Book Now</a>
                </li>       
                <li>
                    <a href="index.html">Blog</a>
                </li>
                <li>
                    <a href="index.html">Shop</a>
                </li>
            </ul>
        </nav>

        <div id="wrapper">      

            <div id="rightcolumn">
                <p>Beauty to your door by Anne-marie Harte.</p>
                <br>
                <p>Anne-Marie Harte has a true passion for Beauty and keeping up to date with the latest trends in the beauty industry.</p> 
                <br>
                <p>Harte Beauty only uses quality, luxury products.</p>
                <br>                
                <p>Harte Beauty provides a professional, qualified & fully insured service accross Stafordshire and Cheshire.</p>
                <br>    
                <p><strong>Salon coming soon.</strong></p>
            </div>


            <div id="leftcolumn">
                <div class="css-carousel">
                    <img class="css-img" src="image/carousel/cnd.jpg" />
                    <img class="css-img" src="image/carousel/fake_bake.jpg" />
                    <img class="css-img" src="image/carousel/shellac.jpg" />
                    <img class="css-img" src="image/carousel/sv.jpg" />
                </div>  
            </div>
        </div> 

<footer>
            <div class="right">
            <p>
            <span></span>
            <img src="image/icons/social_facebook.svg" alt="Click to follow Harte Beauty's Twitter page"/>Click here to join & like our Facebook page to recieve $5.</p>    

            <p>
            <span></span>
            <img src="image/icons/social_twitter.svg" alt="Click to follow Harte Beauty's Twitter page"/>Click here to follow us on twitter for the latest news.  </p>
            </div>

            <div class="left">

            </div>



        </footer>

<div class="bottom">
            <p> &copy;<?php echo date('Y'); ?>2014 | Anne-Marie Harte | Harte Beauty | Stafordshire | Designed by Creative</p>
            </div>

    </div> 
</body>
</html>

/* MAIN STYLES */
*{
font-family:'Open Sans', sans-serif;
font-size:1em;
margin:0;
padding:0;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
body{
background-color:#ED2A7B;
}
.main-container{
min-width:900px;
max-width:1150px;
margin:0 auto;
}
.header-container{
background-color:#fff;
width:100%;
padding:10px;
min-height:200px;
}
/* END MAIN STYLES*/
/* HEADER MAIN LOGO */

.header-container img{
width:50%;
height:300px;
}
/* END OF HEADER MAIN LOGO */
/* OPENING TIMES */
section{
float:right;
position:relative;
background-color:;
color:grey;
}
.clear{
width:300px;
float:left;
display:inline-block;
}
.clear a{
text-decoration:none;
color:grey;
}
.clear img{
width:2em;
height:2em;
background-color:#ED2A7B;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
}
.clear a span{
margin-left:10px;
}
/* END OPENING TIMES */
/* END OF HEADER */

/* NAVIGATION */

nav{
width:100%;
}
nav ul{
width:100%;
margin:0;
}
nav ul li{
background-color:#000;
float:left;
width:16.66666666666667%;
padding:5px;
margin:0 auto;
border:1px solid #fff;
text-align:center;
max-height:1.8em;
}
nav ul li a{
display:block;
width:100%;
text-decoration:none;
color:#fff;
}
nav li ul{
display:none;
}
nav li:hover > ul{
display:inline-block;
height:1em;
width:300px;
}
nav ul li:hover,
nav ul li:active{
border:1px solid #000;
background-color:grey;
color:#000;
}
nav ul ul:hover{
display:inline-block;
}
/* WRAPPER */

.on a{
color:#ED2A7B;
}
#wrapper{
width:100%;
margin:0 auto;
background-color:grey;
}
#leftcolumn, #rightcolumn{
margin:0 0 0 0;
padding:1em;
}
#leftcolumn{
width:60%;
overflow:hidden;
}
#rightcolumn{
position:relative;
width:40%;
float:right;
}
#rightcolumn p{
font-family:'Josefin Slab', serif;
font-size:1.5em;
color:#fff;
}
#rightcolumn p::first-letter{
color:#ED2A7B;
font-size:150%;
}
/*WRAPPER  ENDS*/

/* FOOTER */
footer{
border-top:1px solid #fff;
background-color:#000;
color:#fff;
height:200px;
}
footer .right,
footer .left{
float:right;
width:50%;
height:200px;
}
footer .right p{
float:right;
color:grey;
padding:2em;
}
footer .right img{
position:absolute;
right:45%;
}
footer img{
width:2em;
height:2em;
background-color:#ED2A7B;
/*border-radius*/
-webkit-border-radius:50%;
   -moz-border-radius:50%;
        border-radius:50%;
margin-left:50px;
}
.bottom p{
text-align:center;
color:#fff;
}

/* CAROUSEL ONLY */

.css-carousel {
    width: 100%;
    height: 400px; /* Height of images */
    position: relative;
    overflow: hidden;
}
.css-carousel .css-img {
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-animation: css-carousel-fade 30s linear infinite;
    -moz-animation: css-carousel-fade 30s linear infinite;
    -ms-animation: css-carousel-fade 30s linear infinite;
    animation: css-carousel-fade 30s linear infinite;
}
.css-carousel .css-img:nth-child(2) {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}
.css-carousel .css-img:nth-child(3) {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.css-carousel .css-img:nth-child(4) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}
.css-carousel .css-img:nth-child(5) {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.css-carousel .css-img:nth-child(6) {
    -webkit-animation-delay: 25s;
    -moz-animation-delay: 25s;
    -ms-animation-delay: 25s;
    animation-delay: 25s;
}
@-webkit-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@-moz-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@-ms-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Everything below the nav is off set and in the wrong position too. Any ideas or suggestions what it could be will be appreciated very much.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

My suggestion for getting help debugging issues like this where you have a couple hundred lines of code, first step is to create a reduced test case and throw it up on codepen then put the link to it back here.

2 Answers

bobkingstone
bobkingstone
27,869 Points

Hi

I've had a play using some generated placeholder images. I managed to get it to sit next to each other. but I had to change a couple of things

HTML: moved left column markup above right column.

  • applying float right to the item on the left (right column) can mess with the layout

CSS values:

Increased header-container: min-height - to compensate for the predefined 300px header image height. removed float right from the right column added float left to the left and right columns to have them sit next to each other.

If you apply float:right to one div but not another in the same container then you run the risk of it pushing the others out of line.

Hopefully this helps you out a little.

Bob

James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Hey Bob, thanks for your time and answer that makes sense. I finally managed to work it out, what you said above and a few other mistakes.

.inner{
    float: right;
    background-color: grey;   
}
.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}
Trevor Wood
Trevor Wood
17,828 Points
Trevor Wood
Trevor Wood
17,828 Points

Firefox tends to give me a lot of minor problems like these. To fix it I used css to target firefox only in certain cases. Like this for example.

.fooclass {
    padding: 5px;
}
@-moz-document url-prefix() {
    .fooclass {
        padding: 6px;
    }
}
James Ingmire
James Ingmire
11,901 Points
James Ingmire
James Ingmire
11,901 Points

Thanks Trevor will keep that in mind.