Styling the `<thead>` tag in Internet Explorer 7 (IE

This code is functioning correctly in IE8, Firefox, Chrome and other browsers. However, there seems to be an issue with IE7 not recognizing the following line:

.defaulttable thead{border-right:55px solid #c7c9cf;}

As a result, I am seeing no border in IE7. How can I resolve this problem?

HTML:

<table id="search_table" class="mtm defaulttable">
   <thead>
     <tr class="sortlinks">
        <td>Hello 1</td>
        <td>Hello 2</td>
     </tr>
   </thead>
   <tbody>
       ...........................
</table>

CSS:

.defaulttable {width:100%;border-collapse:collapse;}
.defaulttable thead td{font-weight:bold;background: url('/static/images/grey_fade_back.png') repeat-x 0 -2px;white-space:nowrap;}
.defaulttable thead{border-right:55px solid #c7c9cf;}
.defaulttable tbody td{border-right:1px solid #c7c9cf;}
.defaulttable td {border-top:1px solid #c7c9cf;border-bottom:1px solid #c7c9cf;border-left:1px solid #c7c9cf;padding:6px 8px 6px;}
.defaulttable .project_name{background-image:url('/static/images/mini/project.png');background-position:7px 7px;background-repeat:no-repeat;padding-left:30px}
.defaulttable .user{background-image:url('/static/images/mini/user.png');background-position:7px 7px;background-repeat:no-repeat;padding-left:30px}
.defaulttable .job_ad_title{background-image:url('/static/images/mini/pin.png');background-position:7px 8px;background-repeat:no-repeat;padding-left:30px}
.defaulttable .project_category div{}       
.defaulttable .odd{background:#EFEFEF url(/static/images/button-overlay.png) repeat-x scroll 0 0}
.defaulttable .hover{background:#FEFFAF url(/static/images/button-overlay.png) repeat-x scroll 0 0}
.defaulttable .selected{background:#99DFA2 url(/static/images/button-overlay.png) repeat-x scroll 0 0}
.defaulttable .sortlinks a{color:#444}
.defaulttable tfoot {}
cssinternet-explorer-7internet-explorer-6

Answer №1

To specifically target alternate rules for IE 7, you can utilize conditional comments:

<!--[if IE 7]>

    <style>
    /* Custom style rules for IE 7 */
    table thead tr th { /* Style the `th` instead of the `thead` */ }
    </style>

<![endif]-->

It's important to consider that when dealing with table headings, the th element is more appropriate than using td (as it represents a 'table heading').

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

Using JavaScript to show a prompt message inside an h1 tag within a newly created div

I have developed a basic JavaScript program that opens a prompt dialog when the div tag is clicked, allowing the user to enter text. The program then creates a new div element and displays the entered text above it. However, I am facing an issue where I wa ...

javascriptcss

The light slider feature is experiencing technical difficulties within the Bootstrap model

I am experiencing an issue with the Light Slider in a Bootstrap modal. Strangely, when I press F12 for inspect element, the Light Slider starts working. For more details and to see the link provided in the comment below, can anyone offer assistance, plea ...

javascriptjquerycss

Choose your options effortlessly with CSS or JavaScript dropdown menus

As a novice web developer, I am contemplating whether dropdown menus are more suitable to be coded in CSS or JavaScript. What are the advantages and disadvantages of each approach? ...

javascriptcss

Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...

javascriptjquerycss

Position the image at the center above the text

I am trying to position multiple images side by side, with each image having a date displayed beneath it. The challenge I am facing is that the length of the date extends beyond the width of the image, and I would like to center the image on top of its c ...

htmlcss

Is there a way to show textboxes stacked on top of each other without causing them to

Here is the HTML snippet I am working with: <div> <p><label>Faculty <input type="text" class = "f"></label></p> <p><label >Department<input type="text" class = "f"></label></p> ...

htmlcss

The image appears uniquely sized and positioned on every screen it is viewed on

After reviewing the previously answered topics on the site, I couldn't seem to make the necessary adjustments. Despite setting the size and location in the css file, the large image remains centered and fitting for the screen. The "imaged1" class seem ...

cssmobilecss-positioncompatibility

Ways to confirm the validation of radio buttons in a form and implement CSS

I am having trouble adding validation to a form with radio buttons displayed as labels. I want to show a red border around the radios/labels or outer div when a radio button hasn't been checked before the user submits the form. I have attempted this ...

javascripthtmljquerycssforms

When I try to expand the width of a div, the display property set to inline

Visit my website At the moment, my website features the following code snippet: <div class="main-sale"> <div class="time-left">Sale Ends in: </div> <div class="sale-item"> //Highlighted Sale it ...

jqueryhtmlcss

What issue could be causing trouble with my JavaScript animation?

Currently, I am working on designing a web-page and I have a specific vision in mind - I want an image of the moon to slowly rise up from the bottom of the screen to the top. Here's the HTML code that I have so far: <body> <div id="Moon" ...

javascripthtmlcssanimation

"Upon clicking, toggle the addition or removal of the overflow hidden

I'm currently working on a function to add and remove the CSS property .css('overflow-y','hidden') using an onclick event, which I have successfully implemented. However, I am encountering an issue when attempting to remove this CS ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

htmlcssimagebackgroundhover

How to Apply CSSResource to Customize a GWT Hyperlink

Hello, I am looking to enhance the visual appeal of my web application using GWT CSSResource. One thing that I am struggling with is styling a simple hyperlink. In traditional CSS, I would typically do the following: a{color: #somecolor} a:hover{color: ...

htmlcssgwthyperlink

CSS - Issues with transition smoothness on Safari

I am facing an issue with a simple font-size transition in Safari, causing stuttering while it works smoothly in Chrome and Firefox. I'm not sure if this is a Safari problem, a Webkit issue, or something else entirely. Any workaround suggestions would ...

htmlcsssafaritransition

Retrieving CSS file using admin-ajax.php in WordPress

The website has been tested on GTmetrix and you can view the report here I am puzzled as to why admin-ajax.php is causing a delay of over 3 seconds in loading time on this particular page that I am attempting to optimize. It seems to be related to a CSS ...

phpcssajaxwordpressadmin-ajax

Creating a static footer in AngularJS with material design: A step-by-step guide

This is how I've set up my webpage design. <div layout="column" layout-fill ng-controller="MainCtrl as mc"> <header> <md-toolbar md-scroll-shrink> <div layout="row" layout-align="center center" flex> ...

htmlcssangularjsmaterial-designangular-material

Vuetify - Best practices for vertically aligning rows in a v-treeview component

Just getting started with Vue js, so pardon me if this is a silly question. I've scoured the internet and can't seem to find a solution. I'm working on a v-treeview displaying a folder structure, with descriptions of each folder in a separa ...

javascriptcssvue.jsvuetify.js

The integration of Angular CLI with SCSS is no longer a separate process -

It seems like I might be overlooking something very straightforward here. After a fresh installation of angular-cli, I created a new website with SCSS. I input the SCSS in the global style.scss as well as some in a component SCSS file. However, when I se ...

javascriptcssangularsassangular-cli

Toggling Bootstrap Tooltip divs within a nested structure triggers the Tooltip of the parent div

I have a setup with 2 nested <div> elements, both utilizing the tooltip() function. When I hover over the inner <div>, the tooltip of the outer <div> also displays. To resolve this issue, I attempted to clear the title of the inner <di ...

csstwitter-bootstraptooltip

Leveraging this jQuery code across multiple div elements

As a newcomer to jQuery, I am currently experimenting with a test script. My goal is to create an effect where when an image is clicked, a div slides down displaying more information similar to the new google images effect. The issue with the current scri ...

javascriptjqueryhtmlcss