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.



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

Notices
Please Register!
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.


Reply
Page 2 of 2 < 1 2
 
LinkBack Thread Tools
  #21 (permalink)  
Old Sep 24th, 2007, 20:41
AdRock's Avatar
SuperMember

SuperMember
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 21:15.
Reply With Quote
  #22 (permalink)  
Old Sep 25th, 2007, 13: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
Reply With Quote
  #23 (permalink)  
Old Sep 25th, 2007, 13:57
AdRock's Avatar
SuperMember

SuperMember
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 14:00.
Reply With Quote
  #24 (permalink)  
Old Sep 25th, 2007, 14: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
Reply With Quote
  #25 (permalink)  
Old Sep 25th, 2007, 14:15
AdRock's Avatar
SuperMember

SuperMember
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
Reply With Quote
  #26 (permalink)  
Old Sep 25th, 2007, 14: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>
Reply With Quote
  #27 (permalink)  
Old Sep 25th, 2007, 14:59
AdRock's Avatar
SuperMember

SuperMember
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>
Reply With Quote
  #28 (permalink)  
Old Sep 25th, 2007, 15: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
Reply With Quote
  #29 (permalink)  
Old Sep 25th, 2007, 16:28
SuperMember

SuperMember
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;
}
Reply With Quote
  #30 (permalink)  
Old Sep 25th, 2007, 16:55
alexgeek's Avatar
Technical Administrator

SuperMember
Join Date: Jul 2007
Location: Webforumz 24/7
Age: 15
Posts: 3,790
Blog Entries: 9
Thanks: 0
Thanked 2 Times in 2 Posts
Re: Image positioning and differences in IE/FF
Quote:
Originally Posted by Lchad View Post
Try this:
Code: Select all
content-box {

width: 410px;
margin-left: 15px;
float: left;
overflow: hidden;
}
doesn't it have to be
#content-box

?
Last Blog Entry: 3D Chess in your browser! (Mar 14th, 2008)
Reply With Quote
  #31 (permalink)  
Old Sep 25th, 2007, 20:38
AdRock's Avatar
SuperMember

SuperMember
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 tested it with the rewrtten HTML and the original CSS as in the first post and I don't get a problem.

Tried it in both IE and Firefox
Last edited by AdRock; Sep 25th, 2007 at 20:41.
Reply With Quote
  #32 (permalink)  
Old Sep 25th, 2007, 21:10
SuperMember

SuperMember
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
Yes... Alex... I copied and pasted and didn't even realize I missed the div #!
Good catch.
Reply With Quote
  #33 (permalink)  
Old Sep 25th, 2007, 21:14
AdRock's Avatar
SuperMember

SuperMember
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
Quote:
Originally Posted by alexgeek View Post
doesn't it have to be
#content-box

?
Looking at the html it should be

.content-box becuase it's a class
Reply With Quote
  #34 (permalink)  
Old Sep 25th, 2007, 21:19
alexgeek's Avatar
Technical Administrator

SuperMember
Join Date: Jul 2007
Location: Webforumz 24/7
Age: 15
Posts: 3,790
Blog Entries: 9
Thanks: 0
Thanked 2 Times in 2 Posts
Re: Image positioning and differences in IE/FF
couldn't be bothered to read the html ha.
good second catach
Last Blog Entry: 3D Chess in your browser! (Mar 14th, 2008)
Reply With Quote
Reply
Page 2 of 2 < 1 2

« Webpage takes to long to load | Position image in the dead center of my webpage »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS positioning help - relative to background image sj2as Web Page Design 1 Sep 12th, 2007 01:27
Positioning an image with a link pregnantNproud Web Page Design 8 Aug 12th, 2007 01:33
Problem with image positioning Marc Web Page Design 1 May 31st, 2007 18:17
image positioning usind div container gemguy Web Page Design 5 May 25th, 2007 08:04
Positioning image absolutely timmytots Web Page Design 1 Jan 10th, 2006 02:27


All times are GMT. The time now is 05:11.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Web Hosting :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43