I am looking to design a table with specific characteristics:
___ 100% of the window width ___
| auto width | 860px width, border | auto width, border
In essence, I am aiming for a centered cell of 860px surrounded by two other cells. The right cell should have a border set.
I am struggling to find a solution that works well across all browsers, including old versions like IE6. Compatibility is crucial for me. Whether it's using tables or divs, do you have any suggestions?
Thank you in advance!
Apologies for the unconventional markup, but it seems to achieve the functionality you described:
Updated: included table-layout:fixed for the table and set width="860" for the central td:
<style type="text/css">
table{ table-layout: fixed; }
.w860{ width:858px; }
.brdr{ border-style:dashed; border-width:1px; }
.td860{ background-color:#eee; }
</style>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><div></div></td>
<td width="860" class="td860">
<div class="w860 brdr">
content
</div>
</td>
<td>
<div class="brdr"> also some content</div>
</td>
</tr>
</table>
Tested in FF, IE6+ (quirksmode and standards), Safari for windows.
<style>
table{
width:100%;
}
.dynamic{
width:auto;
}
.static{
width:860px;
}
.outlined{
border: 1px #ff0000 dashed;
}
</style>
<table>
<tr>
<td class="dynamic">11 </td>
<td class="static">111 </td>
<td class="dynamic outlined">111 </td>
</tr>
</table>
I have a header that is fixed in position and a content area with various 3d transforms using Isotope <header style="position: fixed; top: 0; left: 0"> </header> <div class="isotope"> // Here is where the 3d transforms occur </div ...
Can the Blackberry browser be targeted using CSS in order to fix the problem of hidden text shown in the image below? The current CSS being used is as follows: input.searchfield { -webkit-appearance: none; -webkit-border-radius:0px; color: #6 ...
I recently made the decision to dive into learning about Unit Testing with JavaScript. To aid in this process, I started using both Mocha.js and Chai.js frameworks. I downloaded the latest versions of these frameworks onto my index.html from cdnjs.com. How ...
I am facing a challenge that involves: A menu with options retrieved from a MySQL table. A clickable button. Another page written in PHP Here's what I need to accomplish: When the button is clicked, pass the selected option value from the menu ...
I'm in the process of developing a website for a store. On the product page, I have general information displayed about all the products fetched from the database. I am looking to create a separate page that will showcase different text and images bas ...
Having trouble getting my tournament bracket visuals to come together smoothly! Here is the CSS code I have: #tournament-holder{ width:708px; padding:20px 0 20px 15px; float:left; } .vertical-holder{ width:100px; padding-right:15px; float:left; } .horizo ...
Within the code below, I am trying to achieve a functionality where upon making changes inside the parent div with a class of "timeAllot", specific elements within the button div (with class "buttons") should become visible. Initially, when the page loads, ...
I created a custom background picture, but when I tried to use it with CSS in Outlook, it didn't work. So, I added the picture directly into the body tag which allowed me to display it, but now it is repeating. Even after trying to prevent the repeti ...
I am currently using Bootstrap version 5 and I have a simple footer in my project. However, I want to add a divider on top of it by creating extra space of 100px above the footer. You can view an example of what I want to achieve in this fiddle: https://js ...
Does anyone have experience firing Fancybox using an iframe within an onsubmit form? Thanks in advance! ...
I am facing an issue with aligning my div elements with a 20px margin. Despite setting the margin to 20px, I notice that there are additional 4 pixels rendered when I view it on the browser. Below is the code snippet: .block{ width:50px; height:50 ...
<button id="79436c61930112002b29d457b47ffbfa_next" class="list_nav btn btn-icon h_flip_content" title="" data-nav="true" name="vcr_next" data-original-title="Next page"> <span class="sr-only">Next page</span> <span class="icon-vcr-righ ...
I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...
I have a JavaScript function that successfully adds list items to an HTML list. I'm trying to figure out how to dynamically add a link with each item. Here's the code I currently have: $.ajax({ url: uri1 + "?region=" + regionForSearch, m ...
How can I center the searched images of shows and add spacing below each image? The 12-column grid is not behaving properly and the images are aligned correctly on desktop but not on mobile. Any suggestions on how to fix this using CSS and Bootstrap? The g ...
I am working with a structure that looks like this: <div class="container"> <ul> <li> <img> </li> </ul> </div> Currently, there is a background image set for the main container. My go ...
Is it possible to create a circular border in CSS? Currently, the shape is square but I would like it to be circular. color: white; left: 52px; position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); ...
Several asp.net controls produce output in a certain way, making it challenging to customize their appearance (like childview in grid). I am struggling with changing the position of the <tr> content and currently only have the idea of using JavaScr ...
I am trying to implement a validation that requires a minimum length of 8 and a maximum length of 14 characters. Can anyone guide me on how to achieve this? Here is the code snippet in HTML: <input type="text" name="354" id="field"> And here is th ...
Recently, I encountered an issue with the mobile version of my website while using a modified classic theme for Prestashop 1.7.6. If you'd like to take a look, here is the link to the site. Within the footer section, there are two consecutive divs, e ...