Exploring the relationship between Delphi and CSS in terms of the box model concept

I am currently working with a Delphi program on Windows to create HTML content. The challenge I am facing is achieving pixel-perfect WYSIWYG while dealing with text-wrap issues.

When I generate the HTML from Delphi, the layout looks like this:

-- -----------------
| aaaa bbb ccc ddd |
--------------------

However, when viewed in browsers like MSIE and FF, it appears like this:

--------------------
|   aaaa bbb ccc   |
--------------------
ddd

By using Delphi's Object Inspector, I can precisely define the position of controls using top/left/width/height properties for CSS positioning in the generated HTML code.

Despite these efforts, text wrapping issues persist, leading me to suspect that I may have overlooked settings related to margin, border, or padding. Any suggestions?

My font choice is Arial 10 for consistency across Windows and browsers, ruling out any font size discrepancies as the cause.

I believe there might be something similar to the box model in Delphi, where controls are drawn with margins causing visible gaps between them. How can I ensure true WYSIWYG alignment between the Delphi form and the generated HTML?

htmlcssdelphiwysiwygcss-position

Answer №1

Is this the solution you are looking for?

<html>
<head>
</head>
 <body>
  <form style="margin:0 0 0 0; padding:0 0 0 0;">
   <fieldset style="position: absolute; top: 56px; left: 32px; width: 185px; height: 18px; ">
     <legend></legend>
     <div style="text-align: center; position: absolute; top: 0px; left: 0px; width: 179px; height: 18px;">aaa bbb cccc dd</div>
   </fieldset>
</form>
</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

Discovering an Improved Method for Implementing a Functional jQuery Menu Bar

Currently, I have a functioning Menubar where each button on the menu triggers a secondary Menubar using jQuery. The code snippet is as follows: <script> $(document).ready(function(){ $("#homeButton1").mouseover(function(){ $(".secondMen ...

javascriptjqueryhtml

What is the best way to set up a dropdown menu in a data grid where the width matches the fields?

I am looking to optimize the layout for various screen resolutions and ensure compatibility with the latest versions of IE, Firefox, and Chrome. https://i.sstatic.net/3OLh0.jpg ...

javascripthtmlcss

What is the best method for converting a list tag into an array of objects with XPath?

I am attempting to extract the ordered list and generate an array of list tags along with their content. I have experimented with different paths, such as: //li[div/@class="business-info"] //li[div[@class="business-info"]] //li[descendant::div[@class="bu ...

javascripthtmlarraysnode.jsxpath

Leverage xpath for extracting the highest value from tables

I'm facing a challenge with extracting the maximum price for each menu item from a large HTML menu file. Below is a snippet of the menu file structure: ### File Name: "menu" (All types ".") ### </div> <div class="menu-item-prices"> ...

pythonhtmlxpathmax

What is the best way to transform height in pixels to percentage in order to create a responsive design that adjusts smoothly on

Currently, I am in the process of developing a responsive grid system by using a max-width of 980px to convert my fixed PX widths to percentages. However, I am facing some challenges in updating the heights that are also set in PX to %. Could anyone provid ...

cssresponsive-design

Creating an HTML template in an Angular service and utilizing it as an HTMLTemplateRef

I'm currently working on a major project that has a specific requirement. As part of this project, I am utilizing a library which allows me to open dialog (modal) popups. In order to do so, I need to configure some options for the modal opening proce ...

htmlangulartemplatesservice

Python script to extract data from a dynamic JavaScript webpage

I've been involved in a research project where we are aiming to gather a list of reference articles from the Brazil Hemeroteca (The specific page reference we are seeking: , needs to be located by extracting data from two hidden elements on this page: ...

pythonhtmlselenium

Bootstrap: nav-link remains visible even after a dropdown-item is chosen

I am aiming to accomplish the following - when a dropdown-item from the navbar is selected, I want to execute BOTH of the following actions: Scroll to the div with the specified target id Collapse the navbar back to its initial state (fully rolled up, hi ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

What could be preventing the onclick event from functioning properly in JavaScript?

After creating a basic JavaScript code to practice Event handling, I encountered an issue where the function hello() does not execute when clicking on the "Click" button. What could be causing this problem? html file: <!DOCTYPE html> <html> ...

javascripthtmlonclickeventhandler

Jquery and Ajax failing to function properly with multiple dropdown selections

I've been working on creating a functionality to have multiple dropdown menus using Bootstrap, JQuery, and AJAX. The goal is to select multiple countries from these dropdowns and store the selected values in CSV format in my database. Initially, I had ...

phphtmlajax

Embed a variable into an HTML element without affecting the inner HTML content

I am trying to inject a specific string into an HTML tag <td anyElement="{{myString}}" >some random text here </td> My desired interpretation is as follows: <td anyElement='Some string'>some random text here </td> Howe ...

javascripthtmlangularjs

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Having trouble extracting a value from a div within an HTML string. Seeking assistance in identifying the issue. I've attempted various methods to retrieve the data, but none seem to work for me. It appears I may be overlooking something crucial. $( ...

javascriptjqueryhtmlajax

Numerous text boxes sharing identical IDs

Here is the code snippet that I am working with: <%for (int index = 1; index < 7; ++index) {%> <tr> <td> <div class="indicacao_gdp"> ...

c#htmlasp.netc#-4.0for-loop

There seems to be a problem with displaying two div elements side by side using Html/CSS

Recently, I've delved into the world of html/css/javascript just for fun. I've encountered a little roadblock and I could use some help. In my html code, I'm trying to display two div elements on the same line but for some reason, it's ...

htmlcss

Tips for instructing Vimeo on the recommended video dimensions for responsive delivery

Embedding Vimeo's iframe in a responsive way is quite straightforward, allowing the player to adjust its size accordingly. However, the real question is: Does Vimeo actually deliver the video in the correct size? In the past, I mistakenly assumed th ...

htmlresponsive-designvimeo-player

PHP Date Formatting: Perfecting the Date Display

I have implemented a DateTimePicker feature in my project. <div class="input-group date form_datetime"> <input type="text" size="16" readonly class="form-control"> <span class="input-group-btn"> <button class="btn btn- ...

phphtmldatedatetime

Utilize the CSS exclusively for the specific element

nav ul { } nav ul li { margin-left: 7px; } nav.ul li a, a:link, a:visited { float: left; padding: 7px; margin-left: 15px; color: #ffffff; text-decoration: none; font-weight: bold; } nav ul li a:hover { } The styling above is ...

css

What steps should I take to ensure my clock stays in sync with my runTime function?

I am developing a mini digital clock project with the ability to mimic a physical clock. The clock is activated by using a power button to switch it on and display the current time. It should also be able to turn off and show an empty screen. However, th ...

javascripthtmlalgorithmweb-applications

How come the arrangement of my columns is incorrect when applying the order class to a column in Bootstrap 5?

Can anyone explain why the last 3 Cards in the ordering are being displayed first on the web page? Once the "order-*" terms are removed, they appear in the correct order. This issue seems to occur when there are more than 5 elements in the row. <!DOC ...

htmlbootstrap-5col

CSS Buttons with a rounded design on one edge

I need to create a button that looks like this: https://i.sstatic.net/jWwHm.png Although I thought it would be simple, I'm having difficulty with creating the rounded edges and adding additional color. Currently, my attempt looks like this (but the ...

css