SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image jumps when browser window is too small

    I am having a wierd problem.

    My images seem to move their entire height downwards when the browser window is made too small.

    Could someone help me... This is someone elses, previous employee, CSS originally that I am trying to modify to work.

    HTML

    Code:
    <body>
    <div class="satTopBar"></div>
    <div class="NavBar">
      <div id="Logo" style="position:absolute; width:200px; height:90px; z-index:1; left: 0px; top: 22px;"><a href="../index.htm"><img src="../layout/tempLogo.gif" alt="back to homepage" width="186" height="90" border="0"></a></div>
          <div id="Welcome_off" style="position:absolute; width:95px; height:90px; z-index:2; left: 187px; background-image:  url(../layout/menu_uk.gif); layer-background-image:  url(../layout/menu_uk.gif); border: 1px none #000000; top: 22px;">
            <p align="left"><a href="../ukbusiness/solutions.htm" onMouseOver="MM_showHideLayers('setelUKon','','hide','SetelSaton','','hide')"><img src="../layout/transparency.gif" width="94" height="85" border="0"></a></p>
      </div>
      <div id="SetelUKoff" style="position:absolute; width:95px; height:90px; z-index:6; left: 282px; background-image:  url(../layout/menu_satellite.gif); layer-background-image:  url(../layout/menu_satellite.gif); border: 1px none #000000; top: 22px;">
      <a href="satellite.htm" onMouseOver="MM_showHideLayers('setelUKon','','show','SetelSaton','','hide')"><img src="../layout/transparency.gif" width="94" height="85" border="0"></a> </div>
      <div id="SetelSat_off" style="position:absolute; width:95px; height:90px; z-index:3; left: 376px; background-image:  url(../layout/menu_contact.gif); layer-background-image:  url(../layout/menu_contact.gif); border: 1px none #000000; top: 22px;">
      <a href="../contact.htm" onMouseOver="MM_showHideLayers('setelUKon','','hide','SetelSaton','','show')"><img src="../layout/transparency.gif" width="94" height="85" border="0"></a></div>
    	  <div id="SetelLabs_off" style="position:absolute; width:95px; height:90px; z-index:4; left: 470px; background-image: url(../layout/menu_news.gif); layer-background-image: url(../layout/menu_news.gif); border: 1px none #000000; top: 22px;"><a href="../news/news.htm"><img src="../layout/transparency.gif" width="94" height="85" border="0"></a></div>
          <div id="SetelBilling" style="position:absolute; width:95px; height:90px; z-index:7; left: 564px; background-image: url(../layout/menu_billing.gif); layer-background-image: url(../layout/menu_billing.gif); border: 1px none #000000; top: 22px;"><a href="../billing/billing.htm"><img src="../layout/transparency.gif" width="94" height="85" border="0"></a></div>
    </div>
    <div class="SideBar">
      <div align="right">
        <table width="140"  border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td><a href="satellite.htm" class="satTitle">Setel Satellite</a></td>
            <td><img src="../layout/sat_menu.gif" width="20" height="20"></td>
          </tr>
        </table>
        <p>&nbsp;</p>
        <p><a href="marine.htm" class="sat">Marine satellite</a><br>
            <a href="security.htm" class="satsmall">Ship Security Alert</a><br>
            <a href="fleet77.htm" class="satsmall">Fleet 77</a><br>
            <a href="fleet55.htm" class="satsmall">Fleet 55</a><br>
            <a href="fleet33.htm" class="satsmall">Fleet 33</a><br>
            <a href="minim_marine.htm" class="satsmall">Mini-M Marine</a><br>
            <a href="iridium_marine.htm" class="satsmall">Iridium Marine</a><br>
            <a href="land.htm" class="sat">Land Satellite</a><br>
            <a href="minim_land.htm" class="satsmall">Mini-M Land</a><br>
            <a href="iridium_9505.htm" class="satsmall">Iridium Satellite Phones </a><a href="inmarsat.htm" class="satsmall">Inmarsat - Regional BGan </a><a href="why.htm" class="sat">Why Setel Satellite</a></p>
        <p>&nbsp;</p>
        <p class="satNote"><span class="style2">&lt;&lt;</span> <a href="../index.htm" class="satNote">home</a></p>
        <p>&nbsp;</p>
        <p><span class="landNote"><span class="landQuote"><img src="images/dessert.jpg" width="142" height="87"><br>
                <br>
          </span></span><span class="satQuote">&quot;The best telecom provider we have ever used&quot;</span><span class="landNote"><br>
          </span><span class="satNote">David Smith<br>
          Managing Director<br>
          Vanishing Point Ltd</span></p><br><br>
    	<p><span class="satNote">&copy;SETEL UK LTD 2004</span><br>
      </p>
      </div>
    </div>
    <div class="ContentBar">
      <p class="satTitle"><strong> Fleet 77 </strong></p>
      <p><strong> &nbsp;</strong></p>
      <p class="satSubHead">  Fleet 77 is the next generation of maritime satellite communication terminals giving you 24 hours a day, 7 days a week online accessibility to any vessel anywhere in the world. </p>
      <p>&nbsp; </p>
      <p> Compatible with the next generation of Inmarsat satellites, the Fleet 77 terminal provides ships continuous online access to a huge range of applications such as corporate intranets, extranets, applications, databases and Internet services by using the worlds first global maritime Mobile Packet Data System (MPDS), which essentially, is the equivalent of a mobile ISDN connection. </p>
      <p>&nbsp; </p>
      <p> With MPDS, ships will have at their command the communications tools previously associated with everyday business on land. Filing systems, e-commerce, position/speed/direction reporting, electronic charts, weather reports, maintenance schedules, engine performance reports and surveillance can all be transmitted and received as if the ship was in the office next door. </p>
      <p>&nbsp;</p>
      <p class="satSubHead"> With online connection all day, every day, fleet managers, crews and passengers can enjoy: <br>
        <br>
      </p>
      <table width="99%"  border="0" cellspacing="0" cellpadding="0">
        <tr valign="top">
          <td width="52%"><img src="images/fleet77.jpg" width="438" height="308" align="left"></td>
          <td width="48%"><table width="99%" cellpadding="0" cellspacing="5" id="guarantees">
            <tr>
              <td width="20" align="center"><img src="../layout/tick_orange.gif" width="20" height="20"> </td>
              <td width="257">Up to the minute weather reports </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td>Up to the minute weather reports </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td>Permanent access to the internet, email and corporate intranets </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td>Voice and data transmissions at 64Kbps using MPDS </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td>Ship to ship communications </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td> Video conferencing facilities </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td> Instant messaging, online purchasing, E-learning &amp; remote training </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td>Integrated fleet management networks </td>
            </tr>
            <tr>
              <td align="center"><img src="../layout/tick_orange.gif" width="20" height="20"></td>
              <td>Efficient port and on-shore communications </td>
            </tr>
          </table></td>
        </tr>
        <tr valign="top">
          <td colspan="2"><br>
          <br><span class="satsmall">&lt;&lt; </span><a href="javascript:history.go(-1);" class="satsmall">back</a></td>
        </tr>
      </table>
      </div>
    </body>
    CSS

    Code:
    body, p {
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:11px;
    	color:#333333;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	line-height: normal;
    }
    body {
                 background-image: url("../layout/bg.gif"); 
                 background-repeat: no-repeat; 
                 background-attachment: fixed;
                 text-align: justify;
    }
    .landTopBar {
    	margin: 0px;
    	width: 100%;
    	padding: 0px;
    	border: 0px solid #000F78;
    	height: 22px;
    	background-color: #000F78;
    
    }
    .setelTopBar {
    	margin: 0px;
    	width: 100%;
    	padding: 0px;
    	border: 0px solid #A8C9FB;
    	height: 22px;
    	background-color: #A8C9FB;
    }
    .satTopBar {
    	margin: 0px;
    	width: 100%;
    	padding: 0px;
    	border: 0px solid #000000;
    	height: 22px;
    	background-color: #FC9A2E;
    }
    .labTopBar {
    	margin: 0px;
    	width: 100%;
    	padding: 0px;
    	border: 0px solid #000000;
    	height: 22px;
    	background-color: #666666;
    }
    
    .billingTopBar {
    	margin: 0px;
    	width: 100%;
    	padding: 0px;
    	border: 0px solid #CCCCCC;
    	height: 22px;
    	background-color: #CCCCCC;
    
    }
    .NavBar {
    	width: 100%;
    	padding: 0px;
    	margin: 0px;
    	border: 0;
    	height: 90px;
    	background-image: url(layout/menu_bg.gif);
    }
    .SideBar {
    	float: left;
    	padding: 0 0 0 0;
    	margin-left: 10px;
    	margin-right: 0px;
    	margin-top: 16px;
    	margin-bottom: 10px;
    	width: 144px;
    	border: 0px solid #000000;
    }
    .ContentBar {
    	padding: 0 0 0 0;
    	border: 0px solid #000000;
    	margin-left: 209px;
    	margin-right: 1%;
    	margin-top: 16px;
    	margin-bottom: 10px;
    }
    .BottomBar {
    	margin: 0px;
    	width: 100%;
    	border: 0px solid #999999;
    	height: 15px;
    	background-color: #cccccc;
    	padding-top: 2px;
    	padding-right: 0px;
    	padding-bottom: 2px;
    	padding-left: 0px;
    }
    .landTitle {
    	font-size: 16px;
    	font-weight: bold;
    	color: #000F78;
    }
    .landQuote {
    	font-size: 16px;
    	font-weight: bold;
    	color: #000F78;
    	font-style: italic;
    }
    .landSubHead {
    	color: #000F78; 
    	font-size: 12px;
    }
    .landNote {
    	font-size: 9px;
    	color: #000F78;
    }
    
    a.landNote:active {
    
    	color: #000F78;
    }
    a.landNote:hover {
    
    	color: #000F78;
    
    }
    .satTitle {
    	font-size: 16px;
    	font-weight: bold;
    	color: #FC9A2E;
    }
    .satQuote {
    	font-size: 16px;
    	font-weight: bold;
    	color: #FC9A2E;
    	font-style: italic;
    }
    .satSubHead {
    	color: #FC9A2E; 
    	font-size: 12px;
    }
    .satNote {
    	font-size: 9px;
    	color: #FC9A2E;
    
    }
    
    a.satNote:active {
    	
    	color: #FC9A2E;
    }
    a.satNote:hover {
    
    	color: #FC9A2E;
    
    }
    
    
    
    .labTitle {
    	font-size: 16px;
    	font-weight: bold;
    	color: #666666;
    }
    .labQuote {
    	font-size: 16px;
    	font-weight: bold;
    	color: #666666;
    	font-style: italic;
    }
    .labSubHead {
    	color: #666666; 
    	font-size: 12px;
    }
    .labNote {
    	font-size: 9px;
    	color: #666666;
    
    }
    
    a.labNote:active {
    
    	color: #666666;
    }
    a.labNote:hover {
    
    	color: #666666;
    
    }
    .setelTitle {
    	font-size: 16px;
    	font-weight: bold;
    	color: #83B3FA;
    }
    .setelQuote {
    	font-size: 16px;
    	font-weight: bold;
    	color: #83B3FA;
    	font-style: italic;
    }
    .setelSubHead {
    	color: #6AA4F9; 
    	font-size: 12px;
    }
    .setelNote {
    	font-size: 9px;
    	color: #6AA4F9;
    
    }
    a.setelNote:active {
    	
    	color: #6AA4F9;
    }
    a.setelNote:hover {
    
    	color: #6AA4F9;
    
    }
    a.bottomBar:link {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    a.bottomBar:active {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    a.bottomBar:hover {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: underline;
    }
    a.bottomBar:visited {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	color: #FFFFFF;
    	text-decoration: none;
    }
    .land {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #B8B8B8;
    	text-decoration: none;
    }
    a.land:active {
    	
    	color: #000F78;
    }
    a.land:hover {
    
    	color: #000F78;
    }
    
    .sat {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #B8B8B8;
    	text-decoration: none;
    }
    a.sat:active {
    	
    	color: #FC9A2E;
    }
    a.sat:hover {
    
    	color: #FC9A2E;
    }
    
    .satsmall {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 10px;
    	font-weight: bold;
    	color: #B8B8B8;
    	text-decoration: none;
    }
    a.satsmall:active {
    	
    	color: #FC9A2E;
    }
    a.satsmall:hover {
    
    	color: #FC9A2E;
    }
    
    .lab {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #B8B8B8;
    	text-decoration: none;
    }
    a.lab:active {
    	
    	color: #666666;
    }
    a.lab:hover {
    
    	color: #666666;
    }
    
    .setel {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	color: #B8B8B8;
    	text-decoration: none;
    }
    a.setel:active {
    	
    	color: #83B3FA;
    }
    a.setel:hover {
    
    	color: #83B3FA;
    }
    
    .style1 {color: #CCCCCC}
    .style2 {color: #999999}
    
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    This only happens in ie and is a problem where large elements butt up against floats. The image will try and find room by going below the float but as there is a margin then it can't wrap underneath but just sits below the left floated column.

    The only things you can do are to separate the image from the text in that table and let them break separately. This will reduce the time before it drops but the problem will still occur at some stage.

    If you ar not going to lace a footer under the whole of the botrtom area then you could simply place the left column absolutely and the problem goes away.

    Code:
    .SideBar {
     position:absolute;
     padding: 0 0 0 0;
     left: 10px;
     margin-right: 0px;
     margin-top: 16px;
     margin-bottom: 10px;
     width: 144px;
     border: 0px solid #000000;
    }
    Float dropping is a common problem in ie whereas mozilla seems to handle it ok.

    Paul

  3. #3
    SitePoint Zealot Beeper's Avatar
    Join Date
    Sep 2003
    Location
    LONDON UK
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fantastic - Worked like a dream As always...
    Never argue with an idiot.
    They just drag you down to their level...
    and beat you with experience.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •