Concealed upper TD boundary in IE 8

I've been struggling all day to figure out this style issue without any success.

http://jsfiddle.net/9HP9Q/1/

The table lines should have gray borders around them. It's working fine on all browsers except Internet Explorer 8. 

.order_table table {
  border-collapse: collapse;
}
.order_table table tbody tr {
   border: 1px solid #DEDEDE;
}

Although it does give a border to the whole table, except for the first <TD>, I tried to force it using

.order_table table td.product_format {
  border-bottom: 1px solid #DEDEDE;
  border-top: 1px solid #DEDEDE;
}

Unfortunately, it didn't work as expected. Can anyone provide guidance on how to solve this issue?

htmlcsshtml-tableinternet-explorer-8border

Answer №1

The issue:

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //In Internet Explorer, the background color is appearing above the border
   background-color: #FAFAFA;
}

The fix:

.order_table table tbody tr {
   border: 1px solid #DEDEDE;
   //Removed the background-color property
}

See it in action:

http://jsfiddle.net/9HP9Q/2/

Answer №2

It appears that you are looking for the desired output similar to what is showcased in this fiddle: http://jsfiddle.net/9HP9Q/3/

I have simply changed the text color to red for better visibility, so feel free to customize it according to your preferences.

.product_name {
font-size: 30px;
font-family: 'MisoBold';
text-transform: uppercase;
color: #3F3F3F;
}
.order_table table {
margin-left: 0px;
width: 390px;
xheight: 100px;
border-collapse: collapse;
}
thead {
border-bottom: 1px solid #D5D3D0;
margin-bottom: 5px;
}

.order_table table {
border-collapse: collapse;
}
.order_table table tbody tr {
/*border: 1px solid #DEDEDE;*/
    border: 1px solid red;
/*background-color: #FAFAFA;*/
}
.order_table table td.product_format {
border-collapse: collapse;
padding-left: 20px;
font-weight: bold;
/*border-bottom: 1px solid #DEDEDE;
border-top: 1px solid #DEDEDE;*/
border-color: #DEDEDE;
position: relative;
height: 1px;
}
.price-promo {
top: 0 !important;
}
.qty_selector {
padding: 0px;
background: none;
border-top: none;
float: left;
  clear: both;
}
input[type="text"] {
width: 58px;
border: 1px solid #DEDEDE;
color: #333;
height: 23px;
padding-left: 8px;
overflow: hidden;
}
.qty_selector .qty_btn {
width: 11px;
margin-top: -2px;
padding-left: 3px;
background: none;
height: 32px;
  display: inline-block;
  vertical-align: middle;
}
.qty_selector .qty_btn a {
width: 11px;
padding: 0px;
background: none;
float: left;
margin: 1px 5px 1px 0;
}
.order_table table td {
vertical-align: middle;
padding: 7px;
}
.order_table table td.unit_price {
padding-right: 0;
text-align: center;
}
.unit_price .pricebykg {
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
margin-top: 10px;
}

I have also added comments to indicate the sections that may not be necessary for your specific needs.

Please inform me if there are any areas where I might need further clarification on your inquiry.

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

No information available at the moment

When the data is not present, it displays as "display none"... However, I want it to show "no data found" This is the current code if (a.innerHTML.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].styl ...

javascripthtmlcss

Problem with expanding DIV

Currently, I am working on enhancing this page. However, the DIV element containing the overflowing text does not expand to fit the text properly unless the height property is changed from "auto" to a fixed value. Here is the CSS code snippet for referen ...

csscss-float

Is there a way to upload numerous images from my local disk onto a canvas using Fabric.js?

I'm currently working on an innovative Image Collage application using the power of HTML5 canvas and Fabric.js. One of the key features I want to implement is the ability for users to simply drag and drop files into the designated 'File Drag and ...

javascripthtmlhtml5-canvasfabricjs

AngularJS Splice Function Used to Remove Selected Items from List

I previously inquired about a method to remove items from the Grid and received a solution involving the Filter method. However, I am specifically looking for a way to remove items using the Splice Function instead. You can find my original question here: ...

javascripthtmlangularjsangularjs-ng-repeat

I am attempting to create a footer with a set size, but encountering an issue

I'm in the process of developing a responsive website using Vue.js. One aspect I am working on is the footer container, which looks fine on the full screen but shrinks when the screen resolution is reduced below 1100 pixels. As shown in the images li ...

htmlcssvue.jswebfrontend

Error found in Google's privacy page HTML code

Reviewing the html code of Google's Privacy Page, I observed the following header: <!DOCTYPE html> <html lang="en"> <meta charset="utf-8> <title>Google Privacy Center</title> <link rel="stylesheet" href="//www.g ...

htmlvalidation

The process involves transferring information from a specific div element to a database. This particular div element obtains its data after receiving an appended ID

It's a bit complicated, but I'm working on creating a tag system. I'm fetching data from a database with an AJAX call using the "@" symbol. Everything is working fine - the tags are being generated, but I'm having trouble retrieving and ...

javascriptphpjquerycssajax

Arranging a div's position in relation to an unrelated div

I need to position a div element called "a" below another div element known as "b". The HTML code has the following structure: <div id="a"></div> <form> <div id="b"></div> <div id="c"></div> </form> U ...

css

Can you explain the distinction between angular input and native HTML attributes when used with HTML tags?

Take the input tag as an example, where you have two options to specify a maximum length: <input [maxLength]="20" type="text"> <input maxLength="20" type="text"> Are there any real-world distinctions between using one approach over the othe ...

htmlangular

Maintain the flow of a floated or absolutely positioned element using CSS

Is there a way in CSS to ensure that floated or absolutely positioned elements remain within the flow? I find it frustrating that CSS lacks something like flow:on and flow:off to control this. The main issue I am facing is with having a div element of var ...

csscss-floatabsolute

JavaScript enables the deletion of a class

In HTML 2, I am able to show different statements based on the scenario. These statements are styled using the Bootstrap alert class. The goal is to ensure that when new data is sent, any old communication disappears without causing overload on the page. ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Developing tabbed sections in XSLT

Utilizing Angular JS within XSLT, I am aiming to develop a tab-based user interface using XML data. The requirement is to generate multiple links and corresponding div elements based on the number of nodes in the XML. To manage the display of these div ele ...

xmlangularjshtmlxslt

Disallow negative numbers but allow decimals in HTML input

I need help restricting user input to prevent negative numbers while still allowing floating point numbers in my Angular project. Any suggestions using Angular tools would be greatly appreciated. Thanks! ...

htmlangular

Is there a way to modify the color scheme of the hamburger icon

I'm experiencing difficulties changing the color of a hamburger icon. I've searched for the specific code responsible for the color change, but I haven't been able to locate it. Ideally, I want the color to be white, but on small screens, i ...

javascriptphphtmlcss

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

cssselenium-webdriverxpathwebdriverwebdriver-io

What is the best way to specifically target header elements within article elements using a CSS selector?

As someone who is not well-versed in CSS, I am looking to target specifically the header elements within article elements. I have some understanding of selectors such as #, ., or ,. article header article, header article.header article#header I believe t ...

csshtmlheaderelementarticle

Encountering difficulty transforming DataFrame into an HTML table

I am facing difficulties incorporating both the Name and Dataframe variables into my HTML code. Here's the code snippet I have: Name = "Tom" Body = Email_Body_Data_Frame html = """\ <html> <head> </he ...

pythonhtmldataframevariables

CSS Stylelint rule to detect the 'missing selector' issue

My current process involves using stylelint to identify any CSS errors before building and deploying our site. However, a recent commit includes code that fails the CSS parser/minifier but passes stylelint validation. .example-class , /*.example-class-two ...

cssstylelint

Choose items that do not contain ::before or ::after pseudo-elements

I am looking to apply a specific font style to all text on a page except for Font Icons (specifically Font Awesome) which do not share a common class. In order to achieve this, I need to target elements in one of the following ways: Elements that do not ...

csscss-selectorsfont-awesome

Adjusting the size of the div both horizontally and vertically in Angular 5 using the mouse cursor

As a beginner in Angular 5, I am looking to achieve horizontal and vertical resizing of a div by dragging with the mouse pointer. Can someone assist me in implementing this feature? ...

cssangular