Divider displayed between images in Internet Explorer 8

On my website, I have arranged four images in a square using the code below:

        <div id="tempo_main">

        <div id="tempo_content">
            <div style="text-align: center;z-index: 3;position: absolute;right:350px; left:350px; top: 305px; overflow: hidden;"><img alt="PW" src="/media/1001/prospectLogo.jpg" width="319" height="115" /></div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="black">
    <tr>    
        <td align="right"><a href="/ourwines/whites.aspx" ><img src="media/1012/intro_3_Fade.gif" border="0" onmouseover="this.src='media/1013/intro_3_Original.gif'" onmouseout="this.src=src='media/1012/intro_3_Fade.gif'" height="250" widht="357" /></a></td>
        <td align="left"><a href="AwardsAccolades.aspx"><img src="media/1008/intro_1_Fade.gif"  border="0" onmouseover="this.src='media/1009/intro_1_Original.gif'" onmouseout="this.src=src='media/1008/intro_1_Fade.gif'" height="250" width="357" /></a></td>
    </tr>
    <tr>    
        <td align="right"><a href="/winery.aspx"><img src="media/1014/intro_4_Fade.gif" border="0" onmouseover="this.src='media/1015/intro_4_Original.gif'" onmouseout="this.src=src='media/1014/intro_4_Fade.gif'" height="250" width="357" /></a></td>
        <td align="left"><a href="#"><img src="media/1010/intro_2_Fade.jpg" border="0" onmouseover="this.src='media/1011/intro_2_Original.jpg'" onmouseout="this.src='media/1010/intro_2_Fade.jpg'" height="250" width="357" /></a></td>
        <td height="25"></td>
    </tr>   
</table>

I am currently updating an older site that was built over 5 years ago! While everything functions properly on Chrome, there seems to be a gap appearing between the images when viewed on IE8.

The image below illustrates the issue. The browser at the top is IE8 and the one at the bottom is Chrome. You can see the dividing line separating the top two images from the bottom two.

javascripthtmlcssinternet-explorer-8

Answer №1

There seems to be a margin being applied by the browser. One solution could be to eliminate any padding or borders from the image. It's possible that certain versions of Internet Explorer automatically added borders to images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Which file is the optimal placement for the Bootstrap directory: 'header.php' or 'function.php'?

Having dabbled in WordPress Theme templates for a while, I've decided to try my hand at creating a theme from scratch. After uploading the Bootstrap features onto my server, I'm pondering whether it's better to call the Bootstrap.css files ...

phphtmlcsswordpresstwitter-bootstrap

The printed PDF of a webpage does not display HTML table background colors in Chrome or Firefox

Is there a way to change the colors of table cells in an HTML table when exporting to PDF? I'm creating content dynamically that includes background-color: #ffffff (or red) and showing it on a webpage, but the cell backgrounds appear as white in the P ...

htmlcsspdfpdf-generationbackground-color

To ensure proper display, the canvas should be set to display block when its width is 100vw and height is 100vh

Can anyone explain why I need to include display: block when my canvas is full page? Without it, the canvas size appears larger even though the width and height values are the same. Appreciate any insights. Thanks! ...

htmlcss

Issue with converting string to Date object using Safari browser

I need to generate a JavaScript date object from a specific string format. String format: yyyy,mm,dd Here is my code snippet: var oDate = new Date('2013,10,07'); console.log(oDate); While Chrome, IE, and FF display the correct date, Safari s ...

javascriptdatesafari

Determine the moment at which the input is altered by adjusting the slider

I'm encountering an issue with making this work. My goal is to calculate input bmi_val whenever one of the other 2 inputs is modified. These inputs can be changed either directly by the user (entering a value into one of them) or through a jQuery sli ...

javascriptjquery

Controlling hover effects with Material-UI in a programmatic way

I have integrated the following Material-UI component into my application: const handleSetActive = _spyOn => { linkEl.current.focus(); }; const linkEl = useRef(null); return ( <ListItem button component={SmoothScrollLink} t ...

javascriptreactjsmaterial-ui

Converting a Powershell array into an HTML format

I have three arrays that I need to display on an HTML page: foreach($item in $array1){ // write array data to HTML } foreach($element in $array2){ // write array data to HTML } foreach($value in $array3){ // write array data to HTML } What is the ...

htmlarrayspowershell

What is the best way to access all sections of a JSON file containing nested objects within objects?

Here is an example of my JSON file structure: [{ "articles": [ { "1": { "sections": [ {"1": "Lots of stuff here."} ] } }, { "2": { "sections": [ {"1": "And some more text right here"} ] } } }] The c ...

javascriptjqueryhtmljson

Is there a counterpart to ES6 "Sets" in TypeScript?

I am looking to extract all the distinct properties from an array of objects. This can be done efficiently in ES6 using the spread operator along with the Set object, as shown below: var arr = [ {foo:1, bar:2}, {foo:2, bar:3}, {foo:3, bar:3} ] const un ...

javascripttypescriptecmascript-6set

Avoid re-rendering the template in Vue 3 with pinia when changing state values

I am utilizing Vue3 and Pinia for state management. Here is an excerpt from my Pinia file: export const useCounterStore = defineStore ({ id: 'statusData', state: () => ({ test1: 25, test2: 75 }) }) As for the template I am us ...

javascriptvue.jspinia

What happens when data is managed in getStaticProps and utilized in useEffect within a component?

On my page, I utilize the getStaticProps function to fetch a list of objects containing book titles, authors, and character lists. Each object is then displayed within a component that formats them into attractive pill-shaped elements. The component rende ...

htmlreactjsnext.js

Elegant Popup Form

I'm encountering a problem with my ajax form that is embedded within a bootstrap modal. On the first use, the form functions correctly. However, when I attempt to use it again without refreshing the page, the text area no longer appears within the mod ...

jqueryhtmlajaxbootstrap-modal

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

phpcsshtmlpixel

Setting the y-axis range in d3.js and nvd3.js: A complete guide

I'm attempting to define the y-axis range of the chart to be between 1 and 100. After reviewing the API documentation, I came across a potential solution involving axis.tickValues which can be found here: https://github.com/mbostock/d3/wiki/SVG-Axes# ...

javascriptd3.jsnvd3.js

Would it be considered improper to implement an endless loop within a Vue.js instance for the purpose of continuously generating predictions with Tensorflow.js?

In my project, I am leveraging different technologies such as Tensorflow.js for training and predicting foods, Web API to access the webcam in my notebook, and Vue.js to create a simple web page. Within the addExample() method, there is an infinite loop r ...

javascriptvue.jstensorflow.js

Encountering issues with connecting to the MongoDB server through Node.js

When working with MongoDB in Python, everything runs smoothly without any errors. However, when using Node.js, an error keeps popping up. Can someone please guide me on how to resolve this issue? jdcaovuwqxoqppwwqmjcawpwuaciwowjqwqhpaiwdoqi Below is the ...

javascriptnode.jsmongodbexpresscompiler-errors

Conceal and reposition divs based on device with Bootstrap's responsive utilities

Utilizing Bootstrap to design a layout that adapts to desktop, tablet, and mobile screens. The desired output is depicted below: In order to achieve this, three divs were created: <div class="row"> <div class="col-md-3">Text</div> & ...

htmlcsstwitter-bootstrap-3

Validation Express; the error variable is not defined in the EJS

Struggling with a perplexing issue that has been eluding me for quite some time now, I am hopeful that someone out there might be able to provide me with some guidance. The variable (error) that I am passing in the res.render{} object seems to be unattain ...

javascriptnode.jsexpressejs

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

javascriptphphtmlajaxpost

Leveraging the power of Ajax and Javascript to handle and process conditional if/else statements

Hey there, I'm new around here so I hope I got this right. Currently, I'm diving into the Ajax for Dummies book after enjoying the PHP one years ago. However, I've hit a roadblock with my first real Ajax program. It took me ages to locate th ...

javascriptajaxif-statement