Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2013
    Posts
    2
    Member #
    35463
    I just can't seem to find the bug. Maybe I have just been looking at it for too long. I could really use some fresh eyes that may know how to fix my problem. I would truly appreciate any help I can get!

    www.sjcollier.com is the site I am working on.

    Screen Shot 2013-03-01 at 7.31.10 PM.png

    This is what it is supposed to look like, and does look like in Chrome, Safari and IE.
    However...in Firefox it looks like this:
    FirefoxBug.jpg
    (the top image rotates, that's why its different from above.)
    What I can't figure out is why it is putting that block of space in the left column and shifting everything over and down.

    My HTML:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>
    <head>
    <title>Samantha Collier | Multimedia & Illustration</title>
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/nav.css">

    <script src="http://ajax.googleapis.com/ajax/libs.../jquery.min.js"></script>
    <script>
    $(function() {

    $("#slideshow > div:gt(0)").hide();

    setInterval(function() {
    $('#slideshow > div:first')
    .fadeOut(500)
    .next()
    .fadeIn(500)
    .end()
    .appendTo('#slideshow');
    }, 8000);

    });
    </script>
    </head>

    <body>
    <div class="page">
    <div class="header">
    <h1 class="hidden">Samantha Collier: Multimedia and Illustration</h1>
    </div> <!-- end of header div -->

    <div class="navbar">
    <ul class="nav">
    <li><a href="#" class="about"></a></li>
    <li><a href="#" class="portfolio"></a></li>
    <li><a href="#" class="resume"></a></li>
    <li><a href="#" class="contact"></a></li>
    </ul>
    </div> <!-- end of navbar div -->
    </div> <!-- end of page div -->
    <div id="main">
    <div class="page">
    <div class="leftcontent">
    <h2>About</h2>
    <p class="content">
    I am a multimedia artist working out of Pittsburgh, Pennsylvania.
    My area of work is in 2d and 3d asset creation for games, web and apps.
    I have worked on many different types of projects in the industry.
    My main roll is asset creation and concept/art direction.
    From the beginning of a project, I work to find suitable style and color
    usage for the final polished graphics. I have worked on a wide variety of
    projects including iPhone and iPad apps, web games, and serious games.
    My main focus is in work for educational and children based projects.
    </p>
    </div> <!-- end of leftcontent div -->

    <div class="rightcontent">

    <div id="slideshow">
    <div>
    <img src="images/rotating_01.png" />
    </div>
    <div>
    <img src="images/rotating_02.png" />
    </div>

    </div> <!-- end of slideshow div -->

    </div> <!-- end of rightcontent div -->
    </div> <!--end of page div -->
    </div> <!-- end of main div -->
    <div id="footer">
    <p class="center">&#169 2013, The Copyright <span class="highlight">Samantha Collier</span>. All rights reserved.</p>
    <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Resume</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div> <!-- end of footer div -->

    </body>
    </html>

    My default CSS:

    body {
    background-color:#e3dfd8;
    padding-top:0px;
    margin:0px 0px 0px 0px;
    background-image:url('../images/bg_main.png');
    background-repeat:repeat-x;
    }

    /* div styles start */
    div.page {
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    padding:0 0 0 0px;
    width:900px;
    }

    div.header {
    width:435px;
    height:132px;
    background-image:url('../images/title.png');
    background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    margin-top:17px;
    margin-bottom:7px;
    }

    div.navbar {
    width:900px;
    height:132px;
    }

    #main {
    width:100%;
    height:563px;
    margin-top:-47px;
    background-image:url('../images/bg_body.png');
    position:relative;
    left:0px;
    top:0px;
    z-index:0;
    }

    div.leftcontent {
    width:360px;
    height:423px;
    float:left;
    margin:70px 20px;
    }

    div.rightcontent {
    width:500px;
    height:423px;
    float:left;
    margin:70px 0px;
    background-image:url('../images/purple_image.png');
    }

    #footer {
    width:900px;
    height:80px;
    margin-top:78px;
    margin-left:auto;
    margin-right:auto;
    clear:both;
    }

    #footer ul li, a:link, a:visited, a:hover, a:active {
    display:inline;
    list-style-type:none;
    text-align:center;
    text-decoration:none;
    color:#666;
    font-family:Arial, Helvetica, sans-serif;
    font-size:.9em;
    padding:10px;
    padding-top:0px;
    }

    #footer ul a:hover {
    color:#009999;
    }

    /* text styles start */
    #footer p {
    font-family: Arial, Helvetica, sans-serif;
    text-align:center;
    font-size:.9em;
    color:#666;
    }

    .highlight {
    color:#009999;
    }

    .hidden {
    visibility:hidden;
    }

    h2 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:1.5em;
    font-weight:bold;
    color:#009999;
    padding:0px;
    }

    p.content {
    font-family: Arial, Helvetica, sans-serif;
    text-align:left;
    font-size:.9em;
    color:#666;
    padding:0px;
    line-height:1.25em;
    }

    /* div and styles for javascript */
    #slideshow {
    position:relative;
    width:500px;
    height:423px;
    padding:0px;
    }

    #slideshow > div {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
    }

    My nav CSS:

    @charset "UTF-8";
    /* CSS Document */

    .nav, .nav li {
    display:inline;
    list-style-type:none;
    background-repeat:no-repeat;
    margin-bottom:0px;
    margin-right:0px;
    height:96px;
    }

    .nav li a, li a:visited {
    display:block;
    padding:0px;
    margin-bottom:0px;
    margin-right:0px;
    height: 96px;
    list-style-type: none;
    background-repeat: no-repeat;
    text-indent: -9999;
    }

    a.about, a:hover.about {
    background-image: url('../images/about.png');
    height: 96px;
    width: 87px;
    margin-top:36px;
    margin-left:20px;
    }

    a.portfolio, a:hover.portfolio {
    background-image: url('../images/portfolio.png');
    height: 96px;
    width: 87px;
    margin-top:36px;
    margin-left:10px;
    }

    a.contact, a:hover.contact {
    background-image: url('../images/contact.png');
    height: 96px;
    width: 87px;
    margin-top:36px;
    margin-left:10px;
    }

    a.resume, a:hover.resume {
    background-image: url('../images/resume.png');
    height: 96px;
    width: 87px;
    margin-top:36px;
    margin-left:10px;
    }

    a:hover.about, a:hover.portfolio, a:hover.contact, a:hover.resume {
    margin-top:21px;
    }

    .nav li {
    float: left;
    }

    .nav:after {
    content: ".";
    display: block;
    height: 0px;
    clear: both;
    visibility: hidden;
    }

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    FF doesn't seem to be liking the negative margin on .page. I took that out, and the divs sat side-by-side. It jacks up the nav, though.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  4. #3
    Junior Member
    Join Date
    Mar 2013
    Posts
    2
    Member #
    35463
    hmm.. you are right. Now I have to find a way to move the #main div up to overlap the nav without using negative margins. Any ideas?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:41 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com