I am experiencing issues with the CSS for my calendar displaying incorrectly in both IE and Firefox. Can anyone provide

I am completely new to CSS and it's giving me a lot of trouble. I have set up calendar blocks that look excellent in Chrome with the following code:

    /* calendar */
    table.calendar      { border-left:1px solid #999; }
    tr.calendar-row {  }
    td.calendar-day { min-height:200px; font-size:8px; position:relative; } * html div.calendar-        day { height:200px; }

    td.calendar-day-np  { background:#E8EDFF; min-height:200px; } * html div.calendar-day-np { height:200px; }
    td.calendar-day-head { background:#E8EDFF; font-weight:bold; text-align:center; 
            width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
    div.day-number   { 
        background:#0099FF; 
        position:absolute; 
        z-index:2; 
        top:-0px; 
        right:-25px; 
        padding:5px; 
        color:#fff; 
        font-weight:bold; 
        width:20px; 
        text-align:center;
        border-bottom:1px solid #999; 
        border-left:1px solid #999; 
    }
    td.calendar-day, td.calendar-day-np { 
        width:150px; 
        max-width:150px;
        max-height:75px;
        white-space:nowrap;
        overflow-x: hidden;
        overflow-y: auto;
        top:0px; 
        padding:0px 25px 5px 5px; 
        border-bottom:1px solid #999; 
        border-right:1px solid #999; 
    }
    .ui-dialog-titlebar {display:none;}
                td.calendar-day div.event,  td.calendar-day-np div {
                    overflow-x:hidden;
                    overflow-y:auto;
                    width:200px;
                    max-width:200px;
                    max-height:75px;
                    white-space:nowrap;
                }

The HTML generated by PHP looks something like this:

    <tr class="calendar-row"><td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">7</div><p>&nbsp;</p><p>&nbsp;</p></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">8</div><div class="event">14:00-PCR Taylorsville / Rehab</div><div class="event">17:00-PCR Taylorsville / Rehab</div></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">9</div><div class="event">13:00-PCR Taylorsville / Rehab</div><div class="event">14:00-PCR Taylorsville / Audiology</div><div class="event">15:00-PCR Taylorsville / Rehab</div><div class="event">15:30-PCR Taylorsville / Rehab</div><div class="event">16:15-Taylorsville Dermatology</div></div></td>
    <td class="calendar-day"><div style="position:relative;height:100px;"><div class="day-number">10</div><div class="event">08:30-Redwood Clinic GI</div><div class="event">10:00-U of U Hospital HTSHTS</div><div class="event">13:00-PCR Taylorsville / Rehab</div><div class="event">15:20-PCR Taylorsville / Audiology</div><div class="event">16:00-PCR Taylorsville / Rehab</div><div class="...

However, in Firefox, these two properties seem to be ignored. 

    overflow-x: hidden;
    overflow-y: auto;

In Internet Explorer, my information starts halfway down the page. How can I achieve consistent results across all three browsers?

css

Answer №1

Firefox seems to have the correct approach, while Chrome is displaying inaccuracies (and IE is likely malfunctioning as usual).

TD elements are not classified as block-level items! According to Standard CSS for HTML 4, TD elements are categorized under display: table-cell. The CSS property overflow only pertains to elements that form a box, specifically those of type block, inline-block, and list-item. Elements other than these do not embody the concept of a box.

To hide x-overflow on Firefox (and introduce a scrollbar for y-overflow if needed), you can insert DIV elements into your table cells since they establish a box. This technique may still function in Chrome (although its behavior in IE remains uncertain).

Here's an example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            td.calendar-day, td.calendar-day-np {
                width:150px;
                max-width:150px;
                max-height:75px;
                top:0px;
                padding:0px 25px 5px 5px;
                border-bottom:1px solid #999;
                border-right:1px solid #999;
            }
            td.calendar-day div,  td.calendar-day-np div {
                overflow-x:hidden;
                overflow-y:auto;
                width:150px;
                max-width:150px;
                max-height:75px;
                white-space:nowrap;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="calendar-day"><div>Test1</div></td>
                <td class="calendar-day"><div>Test2 Test2 Test2 Test2 Test2<br>Test2<br>Test2<br>Test2<br>Test2</div></td>
                <td class="calendar-day"><div>Test3</div></td>
            </tr>
            <tr>
                <td class="calendar-day"><div>Test4 Test4 Test4 Test4 Test4</div></td>
                <td class="calendar-day"><div>Test5</div></td>
                <td class="calendar-day"><div>Test6</div></td>
            </tr>
        </table>
    </body>
</html>

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

extra header in table

Hey guys, I'm not really into design and I could use some help. My CSS seems to be creating an extra head on my <tr> element. I used a CSS table generator to create the CSS code and employed a PHP HTML to build my table. <html> <title& ...

htmlcss

I'm stumped on how to resolve this CSS issue

As a beginner with the Angular 8 framework, I am exploring how to incorporate animations using angular animations. Below is an example of what my code currently looks like: The component's parent div is contained within <div class="col-md-5">& ...

htmlcssangularangular-animations

In the game of rock paper scissors, the icons become unclickable once you achieve a score of 5

I have created a Rock Paper Scissors game where the score resets if either the user or computer reaches 5 points, but I want to prevent any further play after hitting 5. Currently, the game displays a message and reloads after 5 seconds, during which tim ...

javascripthtmlcss

Spacing that separates elements vertically within a listing

I'm facing an issue with a list of elements arranged in a row that wraps onto a second line due to space constraints within the container. Is there a way for me to introduce additional spacing between the first and second line of these elements, bear ...

htmlcssspacing

Balancing heights using Flexbox

Seeking assistance with utilizing flexbox. Trying to equalize the height of the column containing item 2 and 3 with that of Column 1. Preferably, both item 2 and 3 should expand to occupy the available space. Have tried various solutions without success. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3flexbox

How can I maintain circle radius while resizing SVG to 100% width?

Our line graphs are drawn using SVG technology: https://i.stack.imgur.com/PLpPT.png When generating SVG, the width is set to 100%, but the exact value remains unknown. To ensure that the SVG fills the entire width without distortion, we use preserveAspec ...

csssvg

Only the first cell is affected by the background color setting

... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...

htmlcss

Is there a way to verify the presence of data returned by an API?

I am trying to implement a system in my Index.vue where I need to check if my API request returns any data from the fetchData function. Once the data is fetched, I want to return either a boolean value or something else to my Index.vue. Additionally, I wou ...

javascriptcssreactjstypescriptvue.js

Issues with implementing @font-face on a singular font

I've encountered an issue while setting up a website for a client concerning the fonts. Most fonts are displaying correctly, but there is one font, "chunkfive", that is not working as expected. The problem becomes more severe in Internet Explorer wher ...

htmlcssfontscross-browserfont-face

Styling the cursor in an input box: Using CSS and Javascript

After spending some time delving into the code of wallbase.cc, I've been trying to uncover the secret behind styling the input box similar to the one featured on their homepage. My main curiosity lies in how they achieve the quickly blinking cursor an ...

javascriptcss

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

jquerycsstwitter-bootstrapsidebar

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

I have created custom weather icons like a sun, cloud, and rainy cloud using Photoshop. My goal is to allow users to click on these icons and change the background image of the website's body. However, despite my efforts, clicking on the images does n ...

javascriptjqueryhtmlcss

Styling Forms with SPAN Text in Place of Input or Select Controls

My current CSS is specifically designed to format labels above form input elements, but I am facing an issue when trying to replace the inputs with text from a database for displaying read-only data. Despite my efforts, changing the input fields to a span ...

asp.netcssformsstyling

Having trouble aligning two divs horizontally on the same line in Bootstrap 4

I am facing an issue with my HTML code where I have two div elements that are supposed to be horizontally aligned, but the second div is appearing underneath the first one. To fix this, I tried using bootstrap classes for alignment. <div class="c ...

csstwitter-bootstrapbootstrap-4

Disable touch interactions on the body, only allow pinch-zoom on specific elements

I have been attempting to implement the following code: body { touch-action: none; } .left-side { touch-action: pinch-zoom; } <div class="left-side"><img src="image.jpg" /></div> The touch-action: none is functioning properly, but ...

javascriptjqueryhtmlcss

CSS Conditional Enrollment feature malfunctioning

Struggling to register a conditional CSS for a SharePoint 2013 masterpage. No matter what style I apply, the layout remains unchanged. After researching, it seems like this is how I should register the CSS: <SharePoint:CssRegistration ID="CssRegistra ...

cssasp.netsharepointsharepoint-2013

Steps for adding a background image to a div element

I am struggling to place my background behind the jumbotron div, but no matter what I do, it always ends up appearing below the image instead of on top of it. Can someone please guide me on how to resolve this issue? Note: I have a specific requirement wh ...

htmlcssbootstrap-4

jquery expanding the width of the final element

Is there a way to increase the width of the last 'th' in a string? I want it to be the current width plus 20px. Here is the code on Fiddle var header="<th id='tblHeader_1' style='width: 80px;'><span>Id</span&g ...

javascriptjqueryhtmlcsstableheader

Assign ratings to values based on stars

I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, t ...

jqueryasp.netcss

Challenges with utilizing multiple backgrounds in CSS

<!DOCTYPE html> <html lang="en"> <head> <meta name="description" content=""> <meta name="author" content=""> <title>Main Website</title> <link href="css/main.css" rel="stylesheet"> </head> ...

htmlcss