Webforumz's RSS FeedRSS Webforumz RegistrationRegister Contact Webforumz StaffContact

Image positioning and differences in IE/FF

This is a discussion on "Image positioning and differences in IE/FF" within the Web Page Design section. This forum, and the thread "Image positioning and differences in IE/FF are both part of the Design Your Website category.


 Subscribe in a reader

Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Image positioning and differences in IE/FF

Notices
Register for Free!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.
Breaking News:
iEntry Network take over the Webforumz.com reigns




Reply
Page 2 of 2 < 1 2
 
LinkBack Thread Tools
  #21  
Old Sep 24th, 2007, 21:41
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
I can't remember which one is which but what about using relative or absolute positioning

Also, validate your code and fix the errors http://validator.w3.org/

What happens if you use float: left; in the .content-box
Last edited by AdRock; Sep 24th, 2007 at 22:15.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #22  
Old Sep 25th, 2007, 14:53
Junior Member
Join Date: Jun 2007
Location: Florida
Age: 31
Posts: 32
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
Quote:
Originally Posted by AdRock View Post
I can't remember which one is which but what about using relative or absolute positioning

Also, validate your code and fix the errors http://validator.w3.org/

What happens if you use float: left; in the .content-box
Yes, I really need to use validator to fix my errors. I am really new at this and I am learning as I go. When I use the suggesstions that you guys listed about float: left; it does move the text, but then my white box dissappears that I had the text and image in. Any suggestions on what caused this?

Thanks
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #23  
Old Sep 25th, 2007, 14:57
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
The other thing you could try is adding

Code: Select all
 
position:relative;
left: 0;
to the .content-box
Code: Select all
 
.content-box {
/* Used around the left column of the content to create a scroll if necessary */
position:relative;
left:0;
width: 410px;
height: 435px;
margin-left: 15px;
overflow: auto;
}
Last edited by AdRock; Sep 25th, 2007 at 15:00.
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #24  
Old Sep 25th, 2007, 15:03
Junior Member
Join Date: Jun 2007
Location: Florida
Age: 31
Posts: 32
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
Quote:
Originally Posted by AdRock View Post
The other thing you could try is adding

Code: Select all
 
position:relative;
left: 0;
to the .content-box
Code: Select all
 
.content-box {
/* Used around the left column of the content to create a scroll if necessary */
position:relative;
left:0;
width: 410px;
height: 435px;
margin-left: 15px;
overflow: auto;
}

Still not moving......this is how I added it to my content box

Code: Select all
.content-box {
 /* Used around the left column of the content to create a scroll if necessary */
 width: 410px;
 height: 435px;
 position: relative;
        left: 0;
 overflow: auto;
}
when I added the float: left; it did move the text, but got rid of my white box
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #25  
Old Sep 25th, 2007, 15:15
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
Can you attach your html page with the problem so I can test it locally...I might be able to see the problem then
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #26  
Old Sep 25th, 2007, 15:18
Junior Member
Join Date: Jun 2007
Location: Florida
Age: 31
Posts: 32
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
Sure
Code: Select all
<!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"><!-- InstanceBegin template="/Templates/standard.dwt.php" codeOutsideHTMLIsLocked="true" --><head><!-- InstanceParam name="showFooter" type="boolean" value="true" --><!-- InstanceBeginEditable name="title" --><title>About Us</title><!-- InstanceEndEditable -->
 
 
 
 
 
  
  
 
  <meta http-equiv="imagetoolbar" content="no">
  <meta name="description" content="Mommy and Mimi About Us">
  <link rel="stylesheet" href="start.php_files/global.css" type="text/css">
  
  <script language="JavaScript" type="text/javascript" src="start.php_files/imageswapper.js"> </script>
  <script language="JavaScript" type="text/javascript">
  <!--
  window.loadListeners = [ ];
  
  window.registerLoadListener = function( listener ) {
   window.loadListeners.push(listener);
  }
  
  window.registerMenuImages = function( images ) {
   if ( document.images ) {
    for ( var i = 0; i < images.length; i++ ) {
     if ( document.images[images[i]] ) {
      var src = document.images[images[i]].src;
      src = src.replace(/off/, "on");
      imageswapper.preload(src);
     }
    }
   }
  }
  
  window.onload = function( ) {
   for ( var i = 0; i < window.loadListeners.length; i++ ) {
    window.loadListeners[i]();
   }
  }
  //-->
  </script><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --></head><body>
  <div id="page">
   <!-- InstanceBeginEditable name="menu" --> 
   <script language="JavaScript" type="text/javascript">
<!--
registerLoadListener(function( ) {
 // preload alternative menu images
 registerMenuImages([
  "thisisnudie", 
  "videos", 
  "fitguide", 
  "gallery", 
  "collection", 
  "qa", 
  "storefinder"
 ]);
});
// -->
</script>
<div id="menu">
 <div id="logo">
  <a href="http://www.mommyandmimi.com">
   <img src="start.php_files/logo.gif" alt="Mommyandmimi.com" border="0" height="45" width="205">
  </a>
 </div>
 <div id="items">    
 
  <a href="http://www.mommyandmimi.com/Shop" onmouseover="swap('thisisnudie.on', 'thisisnudie');" onmouseout="reswap();"><img name="thisisnudie" src="start.php_files/thisisnudie.gif" alt="" border="0" height="29" width="131"></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="0" width="0"><a href="http://www.mommyandmimi.com/Shop" onmouseover="swap('videos.on', 'videos');" onmouseout="reswap();"><img name="videos" src="start.php_files/videos.gif" alt="Shop Mommyandmimi.com" border="0" height="29" width="56"></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15"><a href="http://www.mommyandmimi.com/gallery" onmouseover="swap('gallery.on', 'gallery');" onmouseout="reswap();"><img name="gallery" src="start.php_files/gallery.gif" alt="Gallery" border="0" height="29" width="66"></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15"><a href="http://www.mommyandmimi.com/AboutUs.htm" onmouseover="swap('fitguide.on', 'fitguide');" onmouseout="reswap();"><img name="fitguide" src="start.php_files/fitguide.gif" alt="About Us" border="0" height="31" width="94"></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15"><a href="http://mommyandmimi.com/forum" onmouseover="swap('collection.on', 'collection');" onmouseout="reswap();"><img name="collection" src="start.php_files/collection.gif" alt="Fabric Forum" border="0" height="29" width="96"></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15"><a href="http://mommyandmimi.blogspot.com/" onmouseover="swap('qa.on', 'qa');" onmouseout="reswap();"><img name="qa" src="start.php_files/qa.gif" alt="Blog" border="0" height="35" width="45"></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15"><a href="http://www.mommyandmimi.com/contact" onmouseover="swap('storefinder.on', 'storefinder');" onmouseout="reswap();"><img name="storefinder" src="start.php_files/storefinder.gif" alt="Contact" border="0" height="35" width="65"></a>  
 </div>
</div>   <!-- InstanceEndEditable -->
     
   <div class="content">
    
    <div class="content-side">
     <!-- InstanceBeginEditable name="side" --><img src="start.php_files/RachelAbout.jpg" alt="" height="247" width="220" /><!-- InstanceEndEditable -->    </div>
    
  
              
    <div class="content-box">
     <!-- InstanceBeginEditable name="content" -->
     <h1>About Mommyandmimi.com</h1>
     <div class="text">
      </p>
                                                        At Mommyandmimi.com, we have a passion for everything thats original and
                                                        unique in and industry thats not so original and unique. The inspiration
                                                        for the site came from my own personal needs, Mimi.  I am a proud parent
                                                        and always found myself wanting to dress my daughter in hip threads.  I 
                                                        often found myself searching for those unique wares that I thought it was
                                                        time to dust off the old sewing machine and make this girl some clothes.
                                                        Some real clothes!
                                                <p>
                                                </p>
                                                        Working in today's hectic marketplace, we realize that our customers want
                                                        the same type of uniqueness.  By providing this outlet to our customers, we
                                                        can offer you that same uniqueness.  If you have any questions, please ask!
                                                        We want you to be happy. 
                                                <p>                                                       
                                                        Mommyandmimi.com prides itself on excellent customer service, a warm experience
                                                        and we guarantee our products. Thank you for visiting us!
                                                </p>
                                                        Mommyandmimi.com
                                                        
      </p>
      <p>
      </p>
      <p>
      </p>
      <p>
      </p>
     </div>
     <!-- InstanceEndEditable -->
    </div>
    
   </div>
   
   <!-- InstanceBeginEditable name="footer" -->
   <script language="JavaScript" type="text/javascript">
<!--
registerLoadListener(function( ) {
 // preload alternative menu images
 registerMenuImages(["contact", "press"]);
});
// -->
</script>
<div id="footer">
 <div class="left-align">
  <img src="start.php_files/copyright.gif" alt="(c) 2007 MommyandMimi.com" height="20" width="303">
 </div>
 <div class="right-align">
  <a href="mommyandmimi@gmail.com" onmouseover="swap('contact.on', 'contact');" onmouseout="reswap();"><img name="contact" src="start.php_files/contact.gif" alt="Contact" height="20" width="43"></a>
 </div>
</div>   <!-- InstanceEndEditable --> 
   
  </div>
  
  <script src="start.php_files/urchin.js" type="text/javascript"> </script>
<script type="text/javascript">
_uacct = "UA-259801-2";
urchinTracker();
</script> <!-- InstanceEnd --></body></html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #27  
Old Sep 25th, 2007, 15:59
Highly Reputable Member
Join Date: Jul 2006
Location: Devon, England
Posts: 565
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
I've corrected most of the errors but you are missing a title

It does work in Firefox home here so I don't know what the problem is online but i'll look further.

Just see what happens when you change the html

HTML: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="imagetoolbar" content="no"></meta>
  <meta name="description" content="Mommy and Mimi About Us"></meta>
  <link rel="stylesheet" href="global.css" type="text/css" />
  
  <script language="JavaScript" type="text/javascript" src="start.php_files/imageswapper.js"> </script>
  <script language="JavaScript" type="text/javascript">
  <!--
  window.loadListeners = [ ];
  
  window.registerLoadListener = function( listener ) {
   window.loadListeners.push(listener);
  }
  
  window.registerMenuImages = function( images ) {
   if ( document.images ) {
    for ( var i = 0; i < images.length; i++ ) {
     if ( document.images[images[i]] ) {
      var src = document.images[images[i]].src;
      src = src.replace(/off/, "on");
      imageswapper.preload(src);
     }
    }
   }
  }
  
  window.onload = function( ) {
   for ( var i = 0; i < window.loadListeners.length; i++ ) {
    window.loadListeners[i]();
   }
  }
  //-->
  </script><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</head>
<body>
<div id="page">
 <!-- InstanceBeginEditable name="menu" --> 
 <script language="JavaScript" type="text/javascript">
 <!--
 registerLoadListener(function( ) {
  // preload alternative menu images
  registerMenuImages([
   "thisisnudie", 
   "videos", 
   "fitguide", 
   "gallery", 
   "collection", 
   "qa", 
   "storefinder"
  ]);
 });
 // -->
 </script>
    <div id="menu">
 <div id="logo"><a href="http://www.mommyandmimi.com"><img src="start.php_files/logo.gif" alt="Mommyandmimi.com" border="0" height="45" width="205" /></a></div>
 <div id="items">    
     <a href="http://www.mommyandmimi.com/Shop" onmouseover="swap('thisisnudie.on', 'thisisnudie');" onmouseout="reswap();">
     <img name="thisisnudie" src="start.php_files/thisisnudie.gif" alt="" border="0" height="29" width="131" /></a>
  <img class="divider" src="start.php_files/divider_002.gif" alt="" height="0" width="0" /><a href="http://www.mommyandmimi.com/Shop" onmouseover="swap('videos.on', 'videos');" onmouseout="reswap();">
  <img name="videos" src="start.php_files/videos.gif" alt="Shop Mommyandmimi.com" border="0" height="29" width="56" /></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15" />
  <a href="http://www.mommyandmimi.com/gallery" onmouseover="swap('gallery.on', 'gallery');" onmouseout="reswap();"><img name="gallery" src="start.php_files/gallery.gif" alt="Gallery" border="0" height="29" width="66" /></a>
  <img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15" /><a href="http://www.mommyandmimi.com/AboutUs.htm" onmouseover="swap('fitguide.on', 'fitguide');" onmouseout="reswap();">
  <img name="fitguide" src="start.php_files/fitguide.gif" alt="About Us" border="0" height="31" width="94" /></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15" />
  <a href="http://mommyandmimi.com/forum" onmouseover="swap('collection.on', 'collection');" onmouseout="reswap();"><img name="collection" src="start.php_files/collection.gif" alt="Fabric Forum" border="0" height="29" width="96" /></a>
  <img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15" /><a href="http://mommyandmimi.blogspot.com/" onmouseover="swap('qa.on', 'qa');" onmouseout="reswap();">
  <img name="qa" src="start.php_files/qa.gif" alt="Blog" border="0" height="35" width="45" /></a><img class="divider" src="start.php_files/divider_002.gif" alt="" height="29" width="15" />
  <a href="http://www.mommyandmimi.com/contact" onmouseover="swap('storefinder.on', 'storefinder');" onmouseout="reswap();"><img name="storefinder" src="start.php_files/storefinder.gif" alt="Contact" border="0" height="35" width="65" /></a>  
 </div>
    </div>   <!-- InstanceEndEditable -->
    <div class="content">
 <div class="content-side">
     <!-- InstanceBeginEditable name="side" -->
     <img src="RachelAbout.jpg" alt="" height="247" width="220" /><!-- InstanceEndEditable -->
 </div>
 <div class="content-box">
     <!-- InstanceBeginEditable name="content" -->
     <h1>About Mommyandmimi.com</h1>
     <div class="text">
  <p>
      At Mommyandmimi.com, we have a passion for everything thats original and
      unique in and industry thats not so original and unique. The inspiration
      for the site came from my own personal needs, Mimi.  I am a proud parent
      and always found myself wanting to dress my daughter in hip threads.  I 
      often found myself searching for those unique wares that I thought it was
      time to dust off the old sewing machine and make this girl some clothes.
      Some real clothes!
  </p>
  <p>
      Working in today's hectic marketplace, we realize that our customers want
       the same type of uniqueness.  By providing this outlet to our customers, we
      can offer you that same uniqueness.  If you have any questions, please ask!
             We want you to be happy. 
  </p>                                                       
      Mommyandmimi.com prides itself on excellent customer service, a warm experience
      and we guarantee our products. Thank you for visiting us!
  <p>
      Mommyandmimi.com
                                                        
  </p>
     </div>
     <!-- InstanceEndEditable -->
    </div>
    
   </div>
   
   <!-- InstanceBeginEditable name="footer" -->
   <script language="JavaScript" type="text/javascript">
<!--
registerLoadListener(function( ) {
 // preload alternative menu images
 registerMenuImages(["contact", "press"]);
});
// -->
</script>
<div id="footer">
 <div class="left-align">
  <img src="start.php_files/copyright.gif" alt="(c) 2007 MommyandMimi.com" height="20" width="303" />
 </div>
 <div class="right-align">
  <a href="mommyandmimi@gmail.com" onmouseover="swap('contact.on', 'contact');" onmouseout="reswap();"><img name="contact" src="start.php_files/contact.gif" alt="Contact" height="20" width="43" /></a>
 </div>
</div>   <!-- InstanceEndEditable --> 
   
  </div>
  
  <script src="start.php_files/urchin.js" type="text/javascript"> </script>
<script type="text/javascript">
_uacct = "UA-259801-2";
urchinTracker();
</script> <!-- InstanceEnd --></body></html>
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #28  
Old Sep 25th, 2007, 16:34
Junior Member
Join Date: Jun 2007
Location: Florida
Age: 31
Posts: 32
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
hmmm, well thanks for doing that. It moved some things around, but my white box is still missing.

Oh well, I will keep working at it

Lee
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!
Reply With Quote
  #29  
Old Sep 25th, 2007, 17:28
Elite Veteran
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Image positioning and differences in IE/FF
Try this:
Code: Select all
content-box {

width: 410px;
margin-left: 15px;
float: left;
overflow: hidden;
}
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!Spurl this Post!Reddit! Wong this Post!