Image jumps when browser window is too small

**Beeper** · Aug 24, 2004 03:39

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;
}

**Paul O'B** · Aug 24, 2004 05:14

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

**Beeper** · Aug 24, 2004 10:25

Fantastic - Worked like a dream

As always...

User Tag List

Thread: Image jumps when browser window is too small

Thread Tools

Display

Image jumps when browser window is too small

Bookmarks

Bookmarks

Posting Permissions