Text overlaps Div in Safari 2

[gwhitehe]

On my company's launch page I have 2 divs side by side, one that contain an image and the other some text.

This all formats correctly IN IE6 & 7, Firefox 3 and Safari 3 (on a Mac). However in Safari 2 the text block overlaps the image when the page first loads.

The weird thing is when you enlarge the text on the page and then return it to the default size, the text no longer overlaps the image.

If you refresh the page the overlap problem re-occurs

Below is the HTML and CSS.

HTML:
======

     <div class="podDiv">
       <div class="podBacker" id="mainContent">
         <div id="welcomeImage">
           <img src="image1.jpg" />
         </div> <!-- welcomeImage Div  -->

         <div id="welcomeText"> 
           Block of text that consists of about twenty or thirty words.  The actual text has been removed to protect company's identity.
         </div> <!-- welcomeText Div -->
         
         <div id="launchButton"> 
           <div id="hiddenButton">
             <!-- This is blank, just has background color and size in CSS to highlight white text in next div. -->
           </div>
           <img id="launchAnchorBg" src="image2.gif" alt="">
           <div class="launchAnchorDiv" id="launchAnchorDiv_en">
             <a class="launchAnchor" 
                id="launchAnchor_en"
                href="myUrl" 
                target="_blank" >
               Log in to myApp
             </a>
           </div>
         </div> <!--  launchButton Div -->

       </div> <!-- mainContent (podBacker class) Div-->
     </div> <!-- podDiv Div -->

CSS:
=====

.podDiv {
  float: left;
  padding-left: 105px; /*10.97%;*/
  width: 100%;
}

.podTop {
  background: url("image3.jpg") no-repeat;
  width: 748; /*100%;*/
  height: 16px;
}

.podBacker {
  background: url("image4.jpg") repeat-y;
  /* overflow and width needed to allow background image to repeat around a floated image inside this div */
  overflow: hidden;
  width: 748; /*100%;*/
  
}

.podBottom {
  background: url("image5.jpg") no-repeat;
  width: 748; /*100%;*/
  height: 16px;
}

#welcomeImage {
  float: left; 
  padding-left: 4%
}

#welcomeText {
  /* 
  inline-block is new to CSS2.1 but works for IE6, IE7, Firefox 3 and Safari 4
  see [URL unfurl="true"]http://www.w3.org/TR/CSS21/changes.html[/URL]
  For Firefox 2 there is display: -moz-inline-block;
  */
  display: -moz-inline-block;
  display: inline-block;
  width: 210px;
  padding-left: 5px;
  
  font-family: arial;
  font-size: 0.75em;
}

#launchButton {
  display: inline;
  float: right;
  padding-right: 1.88em;  
  text-align: center;
}

#hiddenButton {
  position: relative;
  background: green;
  top: 0.19em;
  left: 0.19em;
  width: 11.88em;
  height: 2.19em;
}

#launchAnchorBg {
  position: relative;  
  top: -2.38em;
  left: -0.19em;
  width: 13.81em;
  height: 3.19em;
  z-index: 5;
}

.launchAnchorDiv {
  padding: 0;
  margin: 0;
  position: relative;
  width: 13.5em;
  height: 3em;
  z-index: 6;
}


.launchAnchorDiv a {
  display: block;
  width: 100%;
  height: 3.19em;
  z-index: 100;
}

#launchAnchorDiv_en {
  top: -5.8em;
}

#launchAnchorDiv_ga {
  top: -5.5em;
}


.launchAnchor {
  text-align: center;
  line-height: 3.19em;
	
  font-family: arial;
  font-weight: bold;
  color: #FFFFFF;
  text-decoration: none;
}

#launchAnchor_en {
  font-size: 1em;
}

#launchAnchor_ga {
  font-size: 0.8em;
}

Any help greatly appreciated

 

[BillyRayPreachersSon]

Some of your values do not have a unit specifier, e.g:

width: 748;

Go through your code, put unit specifiers in for all values, make sure your HTML validates, and make sure your CSS validates.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

This made me laugh:

The actual text has been removed to protect company's identity.

Is anything about this post remotely going to damage the company image should their identity become known? You're only asking for help, not going off on a huge rant about sweat shop conditions!



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[BillyRayPreachersSon]

gwhitehe,

Did adding 'px' work for you?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[gwhitehe]

Haven't had a chance to check yet

Busy at work on other projects

will reply again once tested.