div not positioning in firefox

Question

GlenRogers 0 Newbie Poster

11 Years Ago

Hello.

I have a div "content" that for some reason is positioned ok in ie and chrome etc but in firefox has no positioning! It just goes to the side of the page in firefox!

here is the html for it.

 <div id="content">
            <div class="nav">
            <div id='cssmenu'>

                  <ul>  
                     <li><a class="current" href='home.php'>Home</a></li>
                     <li><a href='leefbgallery.php'>Lee's FB Album</a> </li>
                     <li><a href='nikfbgallery.php'>Nikita's FB Album</a> </li>
                     <li><a href='fbtimelinegallery.php'>Timeline Album</a> </li>
                     <li><a href='leegallery.php'>Lee's Gallery</a> </li>
                     <li><a href='nikgallery.php'>Nikita's Gallery</a> </li>
                     <li><a href='news.php'>News</a></li>
                     <li><a href='contact.php'>Contact</a></li>
                     <li><a href='links.php'>Links</a></li>
                  </ul>
              </div>
           </div>

               <div style="clear: both;">&nbsp;</div>
               <div id="contactcontainer"> 
               <div class="containerimg">
                  <img src="../images/siteimages/homeimg.jpg" alt="Diamondback Tatto Studio Image" />
                  </div>
                  <div id="homepageinfo">
                  <?php 
                       include '../inc/connect.php';

                       $data = mysql_query("SELECT info FROM homepage_info")
                       or die(mysql_error());          
                       while($info = mysql_fetch_array( $data )) {
                          echo "<span class='text'>";
                          echo nl2br($info['info']);
                          echo "</span>";
                       } 
                    ?> 
                    </div>
                    <div id="hours">
                        <h3>Opening Hours</h3>
                        Monday - Closed<br />
                        Tuesday - 10.30-17.30<br />
                        Wednesday -10.30-17.30<br />
                        Thursday - 10.30-17.30<br />
                        Friday - 10.30-17.30<br />
                        Saturday 10.30-17.30<br />
                        Sunday - Closed
                    </div>
                    <div id="map">
                       <iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=109+Main+Street,+Larne&amp;aq=0&amp;oq=109+main+street+larne&amp;sll=54.667775,-6.802165&amp;sspn=1.801255,5.410767&amp;ie=UTF8&amp;hq=&amp;hnear=109+Main+St,+Larne,+United+Kingdom&amp;ll=54.851546,-5.818114&amp;spn=0.003502,0.010568&amp;t=m&amp;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=109+Main+Street,+Larne&amp;aq=0&amp;oq=109+main+street+larne&amp;sll=54.667775,-6.802165&amp;sspn=1.801255,5.410767&amp;ie=UTF8&amp;hq=&amp;hnear=109+Main+St,+Larne,+United+Kingdom&amp;ll=54.851546,-5.818114&amp;spn=0.003502,0.010568&amp;t=m&amp;z=14" style="color:#0000FF;text-align:left"><span class="text"><center>Get Directions</center></span></a></small>
                    </div>
                    <div id="social">
                       <div class="social">
                          <a href="http://www.facebook.com/pages/Diamondback-Tattoo-Studio/130154213710071?ref=ts&fref=ts"><img src="../images/siteimages/facebook.gif" alt="Facebook Link Image" /></a>
                       </div>
                       <div class="social">
                          <a href="http://www.nevermore-ink.deviantart.com/"><img src="../images/siteimages/nevermoreink.gif" alt="Nevermore-Ink deviantArt Link Image" /></a>
                       </div>
                    </div>
                </div>
                <div class="contentimgs">
                <span class="recent">RECENT TATTOOS</span>
                   <div class="leenew">

                      <?php
                         include '../inc/connect.php';
                            $q = mysql_query("SELECT * FROM thumbs_gallery LIMIT 6") or die (mysql_error());
                            while($row = mysql_fetch_array($q)){
                               echo "<img class='thumbnail' src='{$row['filename']}' alt='{$row['description']}. Image' />";
                            }
                       ?>
                    </div>
                   <div class="niknew">

                      <?php
                         include '../inc/connect.php';
                            $q = mysql_query("SELECT * FROM nik_thumbs_gallery LIMIT 6") or die (mysql_error());
                            while($row = mysql_fetch_array($q)){
                               echo "<img class='thumbnail' src='{$row['filename']}' alt='{$row['description']}. Image' />";
                            }
                       ?>
                    </div>

           </div>
        </div>

And the css

#content{
   width:78em;
   margin-left:auto;
   margin-right:auto;
   border:3px solid #ffffff;
   background:#d20202;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
}

Can anyone shed some light on this for me?

Thanks

Glen..

web-design

2 Contributors
3 Replies
210 Views
2 Hours Discussion Span
Latest Post 11 Years Ago Latest Post by GlenRogers

JorgeM 958 Problem Solver

11 Years Ago

Is this page online to see all of the code?

Also, did you include a doctype? I don't think not having one would be an issue for Firefox, but it would for IE causing the page to shift to the left even if you have the proper centering technique. No doctype in IE enables quirks mode.

 <!DOCTYPE html>

Also I haven't tried the width property using an em measurement before. Do you get the same result using px or %?

Edited 11 Years Ago by JorgeM

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

GlenRogers 0 Newbie Poster · Answer 1 · 2013-03-09T15:57:26+00:00

I tried changing the width from em to px, still displays the same way though.
The url is Click Here.

The full html is:

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

   <link href="../css/template.css" rel="stylesheet" type="text/css" />
   <link href="../css/spans.css" rel="stylesheet" type="text/css" />

   <META NAME="description" CONTENT="Friendly Professonial Tattoo Studio In Larne Co Antrim Northern Ireland">
   <META NAME="keywords" CONTENT="Tattoo Larne Northern Ireland Traditional Japanese Black Grey Colour Artist">
   <META NAME="robot" CONTENT="index,follow">
   <META NAME="generator" CONTENT="www.onlinemetatag.com">
   <META NAME="revisit-after" CONTENT="1">


     <!--include jquery-->
   <script src="../jquery/jquery.js"></script>
   <!-- include Cycle plugin -->
   <script src="../jquery/cycle.js"></script>

   <script type="text/javascript">
   $(document).ready(function() {
    $('.leenew').cycle({
        fx: 'fade',
        speedIn: 3000,
        speedOut: 3000,
        sync: 3
    });
});
</script>

<script type="text/javascript">
   $(document).ready(function() {
    $('.niknew').cycle({
        fx: 'fade',
        speedIn: 3000,
        speedOut: 3000,
        sync: 3
    });
});
</script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-38999685-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>


   <title>Diamondback Tattoo Larne</title>
</head>

   <body>
        <div id="header">
            <div id="logo">
               <a href="home.php"><img src="../images/siteimages/logo3.jpg" alt="Logo image" /></a>
            </div> 
         </div>


         <div id="content">
            <div class="nav">
            <div id='cssmenu'>

                  <ul>  
                     <li><a class="current" href='home.php'>Home</a></li>
                     <li><a href='leefbgallery.php'>Lee's FB Album</a> </li>
                     <li><a href='nikfbgallery.php'>Nikita's FB Album</a> </li>
                     <li><a href='fbtimelinegallery.php'>Timeline Album</a> </li>
                     <li><a href='leegallery.php'>Lee's Gallery</a> </li>
                     <li><a href='nikgallery.php'>Nikita's Gallery</a> </li>
                     <li><a href='news.php'>News</a></li>
                     <li><a href='contact.php'>Contact</a></li>
                     <li><a href='links.php'>Links</a></li>
                  </ul>
              </div>
           </div>

               <div style="clear: both;">&nbsp;</div>
               <div id="contactcontainer"> 
               <div class="containerimg">
                  <img src="../images/siteimages/homeimg.jpg" alt="Diamondback Tatto Studio Image" />
                  </div>
                  <div id="homepageinfo">
                  <?php 
                       include '../inc/connect.php';

                       $data = mysql_query("SELECT info FROM homepage_info")
                       or die(mysql_error());          
                       while($info = mysql_fetch_array( $data )) {
                          echo "<span class='text'>";
                          echo nl2br($info['info']);
                          echo "</span>";
                       } 
                    ?> 
                    </div>
                    <div id="hours">
                        <h3>Opening Hours</h3>
                        Monday - Closed<br />
                        Tuesday - 10.30-17.30<br />
                        Wednesday -10.30-17.30<br />
                        Thursday - 10.30-17.30<br />
                        Friday - 10.30-17.30<br />
                        Saturday 10.30-17.30<br />
                        Sunday - Closed
                    </div>
                    <div id="map">
                       <iframe width="200" height="200" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=109+Main+Street,+Larne&amp;aq=0&amp;oq=109+main+street+larne&amp;sll=54.667775,-6.802165&amp;sspn=1.801255,5.410767&amp;ie=UTF8&amp;hq=&amp;hnear=109+Main+St,+Larne,+United+Kingdom&amp;ll=54.851546,-5.818114&amp;spn=0.003502,0.010568&amp;t=m&amp;z=14&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=109+Main+Street,+Larne&amp;aq=0&amp;oq=109+main+street+larne&amp;sll=54.667775,-6.802165&amp;sspn=1.801255,5.410767&amp;ie=UTF8&amp;hq=&amp;hnear=109+Main+St,+Larne,+United+Kingdom&amp;ll=54.851546,-5.818114&amp;spn=0.003502,0.010568&amp;t=m&amp;z=14" style="color:#0000FF;text-align:left"><span class="text"><center>Get Directions</center></span></a></small>
                    </div>
                    <div id="social">
                       <div class="social">
                          <a href="http://www.facebook.com/pages/Diamondback-Tattoo-Studio/130154213710071?ref=ts&fref=ts"><img src="../images/siteimages/facebook.gif" alt="Facebook Link Image" /></a>
                       </div>
                       <div class="social">
                          <a href="http://www.nevermore-ink.deviantart.com/"><img src="../images/siteimages/nevermoreink.gif" alt="Nevermore-Ink deviantArt Link Image" /></a>
                       </div>
                    </div>
                </div>
                <div class="contentimgs">
                <span class="recent">RECENT TATTOOS</span>
                   <div class="leenew">

                      <?php
                         include '../inc/connect.php';
                            $q = mysql_query("SELECT * FROM thumbs_gallery LIMIT 6") or die (mysql_error());
                            while($row = mysql_fetch_array($q)){
                               echo "<img class='thumbnail' src='{$row['filename']}' alt='{$row['description']}. Image' />";
                            }
                       ?>
                    </div>
                   <div class="niknew">

                      <?php
                         include '../inc/connect.php';
                            $q = mysql_query("SELECT * FROM nik_thumbs_gallery LIMIT 6") or die (mysql_error());
                            while($row = mysql_fetch_array($q)){
                               echo "<img class='thumbnail' src='{$row['filename']}' alt='{$row['description']}. Image' />";
                            }
                       ?>
                    </div>

           </div>
        </div>

        <div id="footer">
           <p>&copy Copyright of Diamondback Tattoo<br />Site Developed by Webslinger Development</p>
        </div>
   </body>
</html>

The full css (template.css) is:

/*sets the body of the document*/
html, body{
   margin:0; 
   padding:0;
   width:100%;
   background:#1a1616;
}
.wrap{
   width:100%
}

/*places the header*/
#header{
    height:220px;
    width:100%;
    min-width:78.5em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    float:left;
    background-image:url('../images/siteimages/header_bg.gif');
    background-repeat:repeat-x repeat-y;
    border-bottom:3px solid #ffffff;
}

/*places the logo in the header*/
#logo{
   border-left: 1px solid #ffffff;
   border-right: 1px solid #ffffff;
   margin: 0 auto;
   width:800px;
   height:220px;
   }

 /*places and sets the menu*/
#cssmenu{
   margin-left:10px;
   margin-top:10px;
   margin-bottom:10px;
   width:145px;
   background:#000000;
   overflow:hidden;
 }
#cssmenu ul,

#cssmenu a {
  margin: 0;
  padding:0;
  position: relative;
}

#cssmenu a {
  display:block;
  text-decoration:none;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  min-width: 110px;
  text-align: center;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul > li {
  display:block;
}


#cssmenu > ul > li a {
  color:#ffffff;
  background:#222020;
  border:1px solid #ffffff;
  line-height: 25px;
  padding: 5px 16px;
  margin-bottom:5px;
  display: inline-block;
   transition: background 3s;
   -moz-transition: background 3s;
   -webkit-transition: background 3s;
}

#cssmenu > ul > li a:hover {
  background:#8b0b05;
  transition: background 1s;
   -moz-transition: background 1s;
   -webkit-transition: background 1s;
}

#cssmenu a.current{
   background:#000000;
   }

/*sets the container div*/
#content{
   width:78em;
   margin-left:auto;
   margin-right:auto;
   border:3px solid #ffffff;
   background:#d20202;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   overflow:hidden;
}

/*sets the footer*/
#footer{
   width:400px;
   float:right;
   text-align:center;
   color:#ffffff;
}

/*sets the left side navigation div*/
.nav{
   float:left;
   margin-left:20px;
   margin-top:15px;
   border: 2px solid #ffffff;
   width:28em;
   background:#000000;
   overflow:hidden;
   background-image:url('../images/siteimages/ganesh.jpg');
   background-repeat:no-repeat;
   background-position:150px 0px; 
}

/*places the image on the nav class*/
#navimg{
   float:right;
   margin-top:-390px;
}

/*sets the right side info div*/
#container{
   margin-top:-405px;
   margin-bottom:10px;
   margin-right:15px;
   border: 2px solid #ffffff;
   min-height:483px;
   max-height:585px;
   padding-top:15px;
  float:right;
  width:43.5em;
  overflow:auto;
  background:#000000;
}

/*sets the right side info div for the contact page*/
#contactcontainer{
   margin-top:-405px;
   margin-bottom:10px;
   margin-right:15px;
   border: 2px solid #ffffff;
   min-height:483px;
   max-height:795px;
   padding-top:15px;
  float:right;
  width:43.5em;
  background:#000000;
}

/*remove underline from hyperlinks*/
a:link    {
  text-decoration:  none;
  } 

/*place the 'social' div*/
#social{
   float:right;
   width:120px;
   height:250;
   margin-top:-120px;
   margin-right:15px;
   padding-bottom:30px;
}

/*sets the homepage info div*/
#homepageinfo{
   width:650px;
   margin-left:auto;
   margin-right:auto;
}
/*places the fb logo on the home screen*/
.social{
   float:right;
   margin-bottom:10px;
}

/*places the google map on the home screen*/
#map{
  margin-top:-220px;
  width:200px;
  height:200px;
  margin-left:auto;
  margin-right:auto;
}

/*places and sets the hours div*/
#hours{
   color:#f10f0f;
   margin-left:20px;
   margin-top:60px;
}

/*places the contentimgs div*/
.contentimgs{
   float:left;
   width:533px;
   margin-bottom:10px;
   overflow:hidden;
}

/*plAces the images in the contentimgs class*/
.imgcontent{
   margin-left: 15px;
}

/*places the diamondback container image in the container div*/
.containerimg{
   width:650px;
   margin-left:auto;
   margin-right:auto;
}

.leenew{
   margin-left:20px;
   margin-top:30px;
   width:150px;
}

.niknew{
   margin-left:300px;
   margin-top:-220px;
   width:150px;
}

a img{
   border:none;
}

Thanks for looking....................

GlenRogers 0 Newbie Poster · Answer 2 · 2013-03-09T16:11:35+00:00

I remove

float:left;

from the header and now its working!