Getting sliced images to stay together 1

[wiser3]

I have a web site at:

http://www.jokabsafetyna.com/

The main logo in top left is two images aligned together to appear as one, but i'm having problems with it.

In Opera, Sfari, IE Mac, the images split apart. If i span the two columns together and insert a single picture then IE Win shifts all the main content to the right so it starts at the right most edge of logo.

How can i get these images to stay together no matter what browser is being used? My pages are done in HTML 4.01 Transitional.

Thanks.

 

[EdwardMartinIII]

You have a return between those two images. For som ebrowsers, the only way to assure that there is nothing between your images is to put nothing between them in the code.

See
thread215-562952

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[keteracel]

EdwardMartinIII has hit the nail right on the head. This is one of those spectacularly stupid browser anomolies. The HTML standard clearly states that any whitespace between elements is to be ignored unless it is within CDATA (character data, and then only one whitespace is to be accepted), but browsers seem to allow a single whitespace betwen elements and then ignore anymore....

So, don't put the images on a new-line or with a space or tab between, OR build the image up in some div tags like so?:

<div style=&quot;width: 100; height: 100; padding: 0; overflow: hidden;&quot;>
  <div style=&quot;width: 50; height: 100; padding: 0; overflow: hidden; float: left;&quot;>
    <img src=&quot;left.png&quot; alt=&quot;the left image&quot; style=&quot;border: none; width: 50; height: 100;&quot;>
  </div>
  <div style=&quot;width: 50; height: 100; padding: 0; overflow: hidden; float: right;&quot;>
    <img src=&quot;right.png&quot; alt=&quot;the right image&quot; style=&quot;border: none; width: 50; height: 100;&quot;>
  </div>
</div>

Using this code will not rely on browsers placing the images properly all by itself. Here you are explicitly telling it what you want to happen.

Hope this helps...

[tt]www.keteracel.com[/tt]

 

[wiser3]

Thanks everyone, i managed to get it together, by placing a full logo image in a div, then using css to place the div in the correct place.