Goal:
Display the icon on the upper left of the selected td when you have the cursor over the td.
Problem:
I have tried to find different solution but it doesn't go so well.
Thank you!
table.glyphicon-hover .glyphicon {
visibility: hidden;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
position:relative;
background-color: green;
}
.test {
text-align:right;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
</td>
</tr>
</table>
</div>
You need to set the td to have relative positioning and the icon to have absolute positioning. Then you can position it using left and top.
table.glyphicon-hover .glyphicon {
visibility: hidden;
position:absolute;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
background-color: green;
left: 0;
}
.table td {
position: relative
}
.test {
text-align:right;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up"></span>
</td>
</tr>
</table>
</div>
See the below code
new class added .topleftIcon
All I'm doing is floating the icon to the left.
table.glyphicon-hover .glyphicon {
visibility: hidden;
}
table.glyphicon-hover td:hover .glyphicon {
visibility: visible;
position:relative;
background-color: green;
}
.test {
text-align:right;
}
.topleftIcon{
float:left;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<body>
<div class="container">
<table class="test table table-striped glyphicon-hover">
<tr>
<th>kkjkjkjkjsfdsdfg</th>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-thumbs-up topleftIcon"><img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-trash-a-20.png"></span>
<span>sfsdf!</span> <br>sdfsdf <br>sdfsdf <br> sdfsdf
</td>
</tr>
<tr>
<td>
sdsdfsdf sf <span class="glyphicon glyphicon-thumbs-up topleftIcon"></span>
</td>
</tr>
</table>
</div>
Related
I have a problem when generating a loop of tables from html to pdf on xamarin, all I print are 33 tables but it is cut at number 14 and it is cut at the end of the page instead of skipping the page in pdf, I have tried various css properties, including if conditions to manually add a div with the class or style of page-break and it still doesn't give me the page break, does anyone know about ?
I am using a html template to replace the html and then generate the pdf.
Html -->
<html lang="en">
<head>
<title>HOJA DE HORAS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css">
<style type="text/css">
html {
height: 0;
}
body {
margin-top: 20px;
color: #484b51;
}
.text-secondary-d1 {
color: #728299 !important;
text-align: center;
}
.page-header {
margin: 0 0 1rem;
padding-bottom: 1rem;
padding-top: .5rem;
border-bottom: 1px dotted #e2e2e2;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
}
.page-title {
padding: 0;
margin: 0;
font-size: 1.75rem;
font-weight: 300;
}
.brc-default-l1 {
border-color: #dce9f0 !important;
}
.ml-n1, .mx-n1 {
margin-left: -.25rem !important;
}
.mr-n1, .mx-n1 {
margin-right: -.25rem !important;
}
.mb-4, .my-4 {
margin-bottom: 1.5rem !important;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0,0,0,.1);
}
.text-grey-m2 {
color: #888a8d !important;
}
.text-success-m2 {
color: #86bd68 !important;
}
.font-bolder, .text-600 {
font-weight: 600 !important;
}
.text-110 {
font-size: 110% !important;
}
.text-blue {
color: #478fcc !important;
}
.pb-25, .py-25 {
padding-bottom: .75rem !important;
}
.pt-25, .py-25 {
padding-top: .75rem !important;
}
.bgc-default-tp1 {
background-color: rgba(121,169,197,.92) !important;
}
.bgc-default-l4, .bgc-h-default-l4:hover {
background-color: #f3f8fa !important;
}
.page-header .page-tools {
-ms-flex-item-align: end;
align-self: flex-end;
}
.btn-light {
color: #757984;
background-color: #f5f6f9;
border-color: #dddfe4;
}
.w-2 {
width: 1rem;
}
.text-120 {
font-size: 120% !important;
}
.text-primary-m1 {
color: #4087d4 !important;
}
.text-danger-m1 {
color: #dd4949 !important;
}
.text-blue-m2 {
color: #68a3d5 !important;
}
.text-150 {
font-size: 150% !important;
}
.text-60 {
font-size: 60% !important;
}
.text-grey-m1 {
color: #7b7d81 !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.breakpoint {
border: none;
page-break-inside:auto;
}
</style>
</head>
<body>
<div class="page-content container">
<div class="page-header text-blue-d2" style="width: 100%;">
<h1 class="page-title text-secondary-d1" style="text-align: center; width: 100%;"> HOJA DE HORAS </h1>
</div>
<div class="row mt-4">
<div class="col-12 col-lg-12">
<!-- #region Header -->
<div class="row">
<div class="col-sm-6">
<table>
<tr>
<td>
<span class="text-secondary-d1 text-105">Refno:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Refno%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Fecha:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Date%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Controlador:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%EmRgCode%} {%EmRgName%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Movil:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%DeviceCode%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Cod.Seg.:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%SecurityCode%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Long./Lat.:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Longitude%} / {%Latitude%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Notes:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Notes%}</span>
</td>
</tr>
</table>
</div>
<div class="col-sm-6 align-self-start d-sm-flex justify-content-end">
<table>
<tr>
<td>
<span class="text-secondary-d1 text-105">Proyecto:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%ProjectCode%} {%ProjectDesc%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Localización:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Location%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Brigada:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%LbCrewCode%} {%LbCrewName%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Empleados:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%WorkForce%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Horas Netas:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%NetTime%} | {%NetHours%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Supervisor:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Supervisor%}</span>
</td>
</tr>
<tr>
<td>
<span class="text-secondary-d1 text-105">Estatus:</span>
</td>
<td>
<span style="margin-left:5px; color: #478fcc">{%Status%} | {%InterfaceStatus%}</span>
</td>
</tr>
</table>
</div>
</div>
<!-- #endregion -->
<!-- #region Content -->
<div class="breakpoint">
{%Body%}
</div>
<!-- #endregion -->
<!-- #region BarCode -->
<div>
<img src="data:image/png;base64, {%Barcode%}" />
</div>
<!-- #endregion -->
<!-- #region Footer -->
<div style="margin-top:100px;">
<div class="row">
<div class="col-sm-4">
<hr align="left" />
<span class="text-secondary-d1 text-105">Firma Controlador</span>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4">
<hr align="right" />
<div class="align-self-start d-sm-flex justify-content-start">
<span class="text-secondary-d1 text-105">Firma Supervisor</span>
</div>
</div>
</div>
</div>
<!-- #endregion -->
</div>
</div>
</div>
</body>
</html>
Void
private async void PreparePDF(LbRg pdfLbRg)
{
try
{
LbRgLnService lbRglnService = new LbRgLnService();
var mLbRgLns = lbRglnService.GetLbRgLnsByLbRgId(pdfLbRg.LbRgId);
var htmlTemplate = Common.GetFileToString("LaborRegister.html");
string bodyContent = "";
int i = 0;
int linecounter = 0;
int page = 1;
// Add Lines
foreach (var lnRgLn in mLbRgLns.OrderBy(x => x.LbRgLnId))
{
string mainDiv = "<div class='mt-4' >" + Environment.NewLine;
string divRow = "<div class='row'>" + Environment.NewLine;
bodyContent += mainDiv + divRow + divMainCol1Close + divMainCol2Close + " </div>" + Environment.NewLine ;
linecounter++;
if (page == 1 && linecounter == 7)
{
bodyContent +="<div class='body' style='page-break-after: always'></div>";
linecounter = 0;
page++;
}
else
{
if (page > 1 && linecounter == 10)
{
bodyContent +="<div class='body' style='page-break-after: always'></div>";
linecounter = 0;
page++;
}
}
bodyContent += "</div>";
i++;
}
htmlTemplate = htmlTemplate.Replace("{%Body%}", bodyContent);
#endregion
if (pdfLbRg.Barcode.IsNotNullOrEmpty())
{
var imageBase64 = Xamarin.Forms.DependencyService.Get<IBarcodeService>().ConvertImageStream(pdfLbRg.Barcode);
var base64 = Common.ConvertToBase64(imageBase64);
htmlTemplate = htmlTemplate.Replace("{%Barcode%}", base64);
}
//Ajuste 2022-12-16
//string fileName = "LbRg_" + pdfLbRg.Refno + "_" + DateTime.Now.Ticks + ".pdf";
string fileName = "RPMO_" + pdfLbRg.EmRgCode + "_" + pdfLbRg.Refno + "_" + DateTime.Now.ToString("yyyyMMdd") + ".pdf";
var path = Xamarin.Forms.DependencyService.Get<IHtmlToPDF>().SafeHTMLToPDF(htmlTemplate, fileName);
if (path.IsNotNullOrEmpty() && path != "Access to the path")
{
Utility.DisplayInfo.ShowLoader();
await Task.Delay(5000);
Utility.DisplayInfo.HideLoader();
await Xamarin.Essentials.Launcher.OpenAsync(new Xamarin.Essentials.OpenFileRequest("PDF", new Xamarin.Essentials.ReadOnlyFile(path)));
}
else
{
await DisplayAlert("Error", path, "Ok");
}
}
catch (Exception ex)
{
await DisplayAlert("Exception", ex.Message, "Ok");
}
}
Part of Service
if (webpage == null)
webpage = new Android.Webkit.WebView(GetApplicationContext());
int width = 2102;
int height = 2973;
webpage.Layout(0, 0, width, height);
webpage.LoadDataWithBaseURL("", html, "text/html", "UTF-8", null);
webpage.SetWebViewClient(new WebViewCallBack(file.ToString()));
System.IO.File.WriteAllText(file.ToString(), html, Encoding.UTF8);
Resolve this issue as soon as possible.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am trying to align my modal to the right (like this question here: align Modal on the right side in Bootstrap 4) but using Bulma and overriding the modal class in that answer did not work.
I tried adding some random flexbox helpers (I don't really what I am doing here...) but that did not seem to make a different either. Could someone please show me how to align the modal to the right using Bulma?
Thanks!
Edit: I have created a jsfiddle here.
You can achieve this by rewriting the #modal.modal and #modal .modal-card styles. And changed the styles modal-card to look similar like this.
style.css
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
#media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
var open = document.querySelector('.open-modal');
var modal = document.querySelector('#modal');
var close = document.querySelector('#close');
open.addEventListener('click', function() {
modal.classList.add('is-active');
});
close.addEventListener('click', function() {
modal.classList.remove('is-active');
});
#modal.modal {
align-items: start;
flex-direction: row;
justify-content: end;
}
#modal .modal-card {
max-height: 100%;
min-height: 100%;
width: 300px;
margin-right: 0;
}
#media screen and (min-width: 769px) {
#modal .modal-card {
margin-right: 0;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<section class="section">
<div class="columns">
<div class="column is-4-tablet is-3-desktop is-2-widescreen"></div>
<div class="column">
<h1 class="title">Customers</h1>
<!-- modal content -->
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button id="close" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="title">
Modal content here but would like this to be right aligned.. something that looks like a right panel
</p>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
<nav class="level">
<div class="level-left">
<p class="level-item">
<button class="open-modal button is-success">Open Modal</button>
</p>
</div>
</nav>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th class="is-narrow">
<input type="checkbox" />
</th>
<th>Name</th>
<th>Email</th>
<th>Country</th>
<th>Orders</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html">
<strong>John Miller</strong>
</a>
</td>
<td><code>johnmiller#gmail.com</code></td>
<td>United States</td>
<td>
7
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<a href="edit-customer.html"><strong>Samantha Rogers</strong></a
>
</td>
<td><code>samrogers#gmail.com</code></td>
<td>United Kingdom</td>
<td>
5
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
<strong>Paul Jacques</strong>
</td>
<td><code>paul.jacques#gmail.com</code></td>
<td>Canada</td>
<td>
2
</td>
<td>
<div class="buttons">
<a class="button is-small" href="edit-customer.html">Edit</a
>
<a class="button is-small">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
When the button active is clicked it is replaced by deactive button and vice versa this is going all good in size greater than 768px but when the screen size is smaller than 768px the button active is not replaced by deactive button rather the two-button appears at a different position in toggling on the small screen
I think changes should be in display property when the screen is <=768px that it adjust it in a way that in toggling the button replaces each other in exactly the same position as it is working on big screen.
My code:
document.querySelectorAll('.activeBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.remove('active');
});
});
document.querySelectorAll('.deactiveBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.add('active');
});
});
tr a.activeBtn {
display: none;
}
tr a.deactiveBtn {
display: inline;
}
tr.active a.activeBtn {
display: inline;
}
tr.active a.deactiveBtn {
display: none;
}
<div class="detailsCategory">
<div class="recentCategory">
<div class="card-header">
<h2>Categories </h2>
Add Categories
</div>
<table>
<thead>
<tr>
<td class="serial">#</td>
<td>ID</td>
<td>Categories</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="serial">1</td>
<td>4202211</td>
<td>Men</td>
<td class="statusButtons">
<span><a href="#" class='status activeBtn' >Active</a></span>
<span><a href="#" class='status deactiveBtn'>Deactive</a></span>
<span><a href="#" class='status editBtn'>Edit</a></span>
<span><a href="#" class='status deleteBtn'>Delete</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
You have protected spaces after each span and therefor the line isn't empty and therefor isn't hidden. To prevent the issue you have to omit these. You could instead define a margin for the spans:
.statusButtons span {
margin-right: 3px;
}
Working example:
document.querySelectorAll('.activeBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.remove('active');
});
});
document.querySelectorAll('.deactiveBtn').forEach(btn => {
btn.addEventListener('click', function(e) {
e.preventDefault();
this.closest('tr').classList.add('active');
});
});
tr a.activeBtn {
display: none;
}
tr a.deactiveBtn {
display: inline;
}
tr.active a.activeBtn {
display: inline;
}
tr.active a.deactiveBtn {
display: none;
}
.statusButtons span {
margin-right: 3px;
}
<div class="detailsCategory">
<div class="recentCategory">
<div class="card-header">
<h2>Categories </h2>
Add Categories
</div>
<table>
<thead>
<tr>
<td class="serial">#</td>
<td>ID</td>
<td>Categories</td>
<td></td>
</tr>
</thead>
<tbody>
<tr class="active">
<td class="serial">1</td>
<td>4202211</td>
<td>Men</td>
<td class="statusButtons">
<span><a href="#" class='status activeBtn' >Active</a></span>
<span><a href="#" class='status deactiveBtn'>Deactive</a></span>
<span><a href="#" class='status editBtn'>Edit</a></span>
<span><a href="#" class='status deleteBtn'>Delete</a></span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a bootstrap table which is populated by an MVC loop of a model. However when my model renders a large number of records, it causes the table and panel the table is nested in stretch out too much in height. Is there a recommended way of making the table result scrollable when the records returned would exceed the max-height property of the table? A scrollable solution would be optimal.
Styles
.table{
width:100%;
}
thead,tbody,tr,td,th{
display:grid;
}
tr:after{
content: ' ';
display: block;
visibility:hidden;
clear:both;
}
thead th{
height: 30px;
}
tbody {
height: 120px;
overflow-y:auto;
}
thead {
}
tbody td. thead th {
width: 40.2%;
float: left;
}
Code below: (loop displays 34 records)
<div class="panel panel-primary">
<div class="panel-heading clearfix">
<h4 class="panel-title pull-left" style="padding-top: 7.5px;">My Team</h4>
<div class="btn-group pull-right">
<!--- Search bar-->
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search My Team">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
</div>
</div>
<table class="table table-responsive table-hover" style="max-height:150px; height:100px;">
<thead>
<tr>
<th>#Html.DisplayNameFor(model => model.Name)</th>
<th>LAN ID</th>
<th>Department</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach(var x in Model)
{
<tr class="info">
<td>
#Html.DisplayFor(modelItem => x.Name)
</td>
<td>
#Html.DisplayFor(modelItem => x.Lan_Id)
</td>
<td>
#Html.DisplayFor(modelItem => x.CurrDept)
</td>
<td>
#Html.DisplayFor(modelItem => x.Email)
</td>
</tr>
}
</tbody>
</table>
<div class="panel-footer"></div>
make a table structure as follows. Should resolve your issue
<div class="table-responsive">
<table class="table table-striped table-bordered">
//rest of code
</table>
</div>
I've been having quite a few issues with dynamic div tags that take into account static div tags. Here's the 2 styles I'm currently using:
Dynamic Div tag:
div.Display {
width: 95%;
color: #333333;
margin-left: 360px;
background-color: #333333;
height: 100%;
margin-right: 0px;
float: left;
}
Static Div tag:
div.LoginBox {
box-shadow: 0px 0px 3px 0px #000000;
width: 350px;
height: 350px;
background-color: #F0F0F0;
border: 1px solid #DADADA;
clear: none;
float: left;
color: #000000;
margin-left: 0px;
}
The issue I'm having is that the dynamic div tag won't size properly. It's taking into account the margin left (360px), but it's also defaulting to the bottom of the LoginBox div tag (so it's like it's taking a top margin of 350px). Here's the actual application of the Div tag: http://ordwurkz.com/
And the HTML:
<body onload="FP_preloadImgs(/*url*/'images/hover/minimize.png',/*url*/'images/click/minimize.png')">
<div class="Page" id="Page">
<div class="LoginContainer" id="LoginContainer">
<div id="divLoginTitleBar" class="TitleBar">
Login
<div id="divTitleButtonBox" class="TitleButtonBox">
<img id="LoginMinimize" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/click/minimize.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/minimize.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginMinimize',/*url*/'images/hover/minimize.png')" src="images\minimize.png"/><img id="LoginClose" alt="Button Text" onmousedown="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/click/close.png')" onmouseout="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/close.png')" onmouseover="FP_swapImg(1,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" onmouseup="FP_swapImg(0,0,/*id*/'LoginClose',/*url*/'images/hover/close.png')" src="images\close.png"/></div>
</div>
<div id="divLoginBox" class="LoginBox">
<div id="divLoginContent" class="LoginContent">
<img alt="System Image" src="images/loginsplash.png" />
<form method="post" action="processor\login_processor.do" id="frmLogin">
<table id="tblLoginContent" class="LoginContent">
<tr>
<td>Username:</td>
<td>
<input maxlength="50" name="txtUsrName" size="20" type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td>
<input maxlength="24" name="txtPassword" size="20" type="password" /></td>
</tr>
<tr>
<td><input name="btnLogin" type="submit" value="Login" /></td>
<td><input name="btnReset" type="reset" value="Reset" /></td>
</tr>
</table>
</form>
</div>
<div class="PlatformVersion">V1.0.0.0</div>
</div>
</div>
<div class="Display"></div>
</div>
<div class="Footer">Contact Us | Terms of Service</div>
</body>
Is there any chance you could put your .LoginBox inside of your .Display, then remove the margin-left on .Display so that .LoginBox just floats to the left of the content in .Display?? Hard to really say without seeing your HTML.