The use of Img align:left results in text overflowing in Internet Explorer

I'm experiencing a problem where the text overflows within a column when an inline image is aligned to the left or right. It may be difficult to explain, so I have set up a sample page at

This issue is specific to IE6 and IE7. Any suggestions on how to resolve this?

The backend is using fckeditor to generate these elements.

Answer №1

Ensure that the p tag encompasses the image so that other paragraphs are positioned both above and below it. Although I am unable to test it at the moment, typically I utilize overflow:hidden on the surrounding block (the paragraph) and for Internet Explorer, you may require something like zoom:1.

Additionally, is it possible to remove the inline 'align:left' and substitute it with CSS in an external style sheet like:

#center-column p img {
    float: none;       // if still necessary...
}
#wide_column p img {     // The ID of the wide column is unknown...
    float: left;
}

(I am unsure if the p selector is necessary; I am simply attempting to target the correct images without access to your code)

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

How to align icon and text perfectly in a Bootstrap 5 Button

I am looking to align icons and text within a modal body: <div class="modal-body"> <div class="d-grid gap-2" id="someButtons"> </div> </div> This code snippet demonstrates how I insert buttons ...

What is the best way to create a div that resembles a dotted line?

I have a bar chart type created using different div elements. CSS: .outer, .inner, .target { height: 14px; margin-bottom: 5px; } .outer { background-color: #cccccc; width: 200px; margin: 0 auto; position: relat ...

Creating a sleek Bootstrap layout with two columns housing containers within

Struggling with the layout in Bootstrap, I can't seem to figure out how to properly nest a "container" class within a full-width "row" class for perfect content alignment. Check out the image below for reference and a snippet of my code. https://i.s ...

Highlighted top and bottom borders accenting a vertical list

I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have ...

Creating a stylish Bootstrap 5 table featuring a large PRE block in a cell that is scrollable

I am currently working on formatting a table and I need some help figuring out how to achieve my desired layout. The issue I'm facing is with a cell that contains a large JSON object block. I want this block to either wrap within the enclosing TD, or ...

Styling a table using CSS in PHP-generated output

I am currently working with two PHP files - one containing functions and the other a mix of PHP and HTML code. <table> <?php echo read(); ?> //This displays a complete table with <tbody> tags, etc. </table> My query ...

Navigating through pages without using Javascript

While working on creating page numbers, I stumbled upon this intriguing CodePen: https://codepen.io/p-ziegler/pen/bmdaaN .b, input[type="radio"] { display: inline-block; width: 16px; height: 16px; vertical-align: middle; } .b { back ...

The nth-of-type function behaving similarly to the nth-child function

Reviewing my HTML snippet: <div class="itemContainer"> <div class="clearance"></div> <div class="productBox" ></div> <div class="clearance"></div> <div class="productBox" ></div> & ...

How to align all children at flex-start while positioning one child at the end?

I am currently working on a flex container that has 3 children. My goal is to have all the children align at flex-start, with the final child positioned at the bottom of the container. Can align-content be combined with align-self to achieve this layout? ...

Choosing an option in react-select causes the page to unexpectedly shift

Encountering a problem with a mobile modal developed using react-select. The selectors are within a div with fixed height and overflow-y: scroll. Upon selecting an option for the 'Choose observer' select, the entire modal briefly jumps down in th ...

The coloring of my div elements is not displaying as intended

After reviewing the provided html and css, I am puzzled as to why the parent container is being colored green while the child items remain uncolored. It seems like all div elements are being affected by the green color. What I actually want is for the pa ...

Shifting a division using insertAfter

Hey there! I'm having a bit of trouble using the insertAfter function. In each product in my store, I need to position an "add to cart" button after the price. This is the code I tried: <Script type="text/javascript" > jQuery(document).read ...

Border extends across two separate rows

Let me illustrate my issue with a specific example where I am utilizing a single column with a rowspan: <table border="1" style="width:300px"> <tr> <td rowspan="2">Family</td> <td id="jill">Jill</td> <td>Smi ...

No translation or compiling of SCSS/SASS to CSS available

As a beginner Sass user, I am working on mastering the SMACSS hierarchy and incorporating it into my project using Brackets. However, I have encountered an issue with mapping the main.scss file to the main.css file even though it compiles successfully via ...

The change() function in jQuery appears to have a glitch where it does not properly execute during the initial onclick event, but functions correctly for

Here is the button code snippet: <li class="cnt-li"> <button class="btn-container" title="Add Container" data-toggle="modal" data-target=".add-ctn-modal"> <img src="images/add.png" alt="Add Container"> </button> </li> ...

apply a visible border to the item that is clicked or selected by utilizing css and vue

I have a list of items that I want to display as image cards with an active blue border when clicked. Only one item can be selected at a time. Below is the code snippet: Template Code <div class="container"> <div v-for="(obj ...

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

My goal is to stack multiple background images within a single div container while ensuring their position is relative to the screen height. The problem I'm encountering is my inability to modify CSS values separated by commas. Here is my logical appr ...

Making lightbox/dhtml appear in front of flash

After extensive research, I have come across numerous posts highlighting the importance of modifying the embed-tag with wmode="opaque" in order to force lightbox and other dhtml elements above flash content. Simply adjusting the z-index of the desired elem ...

Changing the structure of divs by using elements from different divs

I'm looking for some help with adjusting the CSS of a div when hovering over certain elements. Here is my current code: <div class = "container-main"> <div class = "container-inner"> <ul class = "list"> &l ...

Display issues occur with Bootstrap 4.2.1 flex-box layout columns exceeding the browser edge

Why does COLUMN02 extend beyond the browser's edge when using flex-basis for column widths? What mistake am I making? Unfortunately, it doesn't display correctly in the code snippets here but works in the fiddle. TIA! http://jsfiddle.net/dragont ...