I have a text engine that generates HTML/CSS. Below is some text that it generated.
#text516 {
position: absolute;
left: 197px;
top: 168px;
width: 201px;
height: 81px;
visibility: hidden;
z-index: 1;
background-clip: padding-box;
border-style: solid;
border-width: 5px;
border-color: rgb(0, 120, 228);
outline-style: solid;
outline-width: thin;
outline-color: rgb(0, 120, 228);
}
span.text516Font1 {
font-size: 16px;
font-family: "Arial", sans-serif;
color: #010101;
}
<div id="text516" style="width: 201px; height: 81px;">
<a tabindex="1" id="text516anc" style="display:block;height:0px;width:0px;"></a>
<table style="border-collapse:collapse;top:0px;position:absolute; border-spacing:0; width:100%; height:100%">
<tbody>
<tr>
<td style="position: absolute;top:0px;left:0px;box-sizing:border-box;width:100%;vertical-align:top;height:100%;padding:5px">
<div style="height:100%;width:100%;overflow-y:hidden;overflow-x:hidden;">
<p style="margin-left:0px;text-indent:0px;line-height:1.350;margin-top:0px;margin-bottom:0px;text-align:left;" dbg_tag_42="" leglh="1.409" dbg_tag_34.1a="">
<span class="text516Font1" style="position:relative;top:-2px;" dbg_tag_95="">hi my name is matthew and I like pie.
</span></p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Also, here is a JSFiddle Link to see the problem ( Only in IE/Edge )
There are a few things I can do to fix this problem, such as removing the style attribute from the span encapsulating the text. I can also remove the table elements and leave just the p tag, but when left as it is above, the outline always shows regardless of the fact that the outer div is set to be hidden. Is this a bug with the browser, or is it some HTML functionality that I am missing?
Related
I have a custom table and what I would like to have is some text box appearing after you hover over its row. Some of the rows will be blurred, so I will add this in the example code as well. The issue that I'm facing is that I am clearly not good at CSS or HTML and I can't quite figure out how to adress the table row for that to work correctly and I have not found any solutions for that. I have successfully added the same tooltip to the column names, so you will se what I want to achieve in the example below:
<style>
* {
box-sizing: border-box;
}
.tooltip {
font-size: 15px;
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
max-width: 60vw;
background-color: white;
border-style: solid;
border-color: #1a7bc9;
color: #000;
text-align: left;
border-radius: 6px;
padding: 15px 15px;
position: absolute;
z-index: 100;
bottom: 100%;
left: 50%;
margin-left: 0%;
/* I think this ↑ is supposed to help with it skewing to the right
but it does not... */
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
.styled-table:hover .tooltiptext {
visibility: visible;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr:nth-of-type(even):hover,
.styled-table tr:hover {
background-color: #c7c7c7;
}
.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
max-width: 57vw;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
position: relative;
margin-left: 15vw;
cursor: pointer;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr.active-row {
font-weight: bold;
}
</style>
<div class='tooltip'><Tooltip>
<span class="tooltiptext">this is just a minimal tooltip</span>
</div>
<table>
<thead>
<tr>
<th id="C1">Column_1
</th>
<th id="C2">
<div class="tooltip">Column_2
<span class="tooltiptext">This is my favourite column, it's so epic ngl</span>
</div></th>
<th id="C3" >
<div class="tooltip">Column_3
<span class="tooltiptext">This one is also good, but I like column 2 a little more</span>
</div>
</th>
<tr class="styled-table" style="text-color: #1a7bc9
filter: blur(4px) -o-filter:blur(4px)
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter: blur(4px);
"> <!-- For some reson blur ignores text-color -->
<span class="tooltiptext">This is not supposed to be visible</span>
<td>Wow, hidden</td>
<td>Shhhh</td>
<td>Epic</td>
</tr>
</table>
Here you can see that I have a table row of class styled-table and inside of it there is a class tooltiptext. I am trying to adress it using .styled-table:hover .tooltiptext, but nothing happens. Also, the tooltip appears to be skewed to the right and blur removes the text color, but this is not the main concern :)
Getting This Output on my Blog. (Language is Bengali)
I want it to float always on the front of all element. But Some Contents are overriding it. how to solve it?
Blog: http://www.blogger-tawsif.ga/
Code is,
<div class="grplusbd_floating_likebox">
<span class="iconContainer">
<img class="ico" src="http://lh3.googleusercontent.com/-jpijNi_XBh4/AAAAAAAAAAI/AAAAAAAAB_0/P3R_olWI_KI/s512-c/photo.jpg"/>
</span>
<iframe id="floatfollow" allowtransparency="true" frameborder="0" height="50" scrolling="no" src="https://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Ftawsif.torabi&width=64&height=65&layout=box_count&size=small&show_faces=true&appId=164293520647951" style="border:none;overflow:hidden; vertical-align: middle; float: right;" width="64"></iframe>
</br>
<span style="font-weight: bold; color: white;">
Tawsif Torabi
</span>
</br>
<small style="font-weight: bold; color: white;">
Web Developer, GR+ Bangladesh
</small>
</div>
<style>
.grplusbd_floating_likebox {
position: fixed;
top: 500px;
left: 0px;
border-radius: 0px 10px 10px 0px;
padding: 10px 15px;
background-color: rgba(255, 0, 0, 0.93);
box-shadow: 1px 1px 7px black;
}
.iconContainer {
border-radius: 50px;
display: inline-block;
overflow: hidden;
vertical-align: middle;
}
img.ico{
vertical-align:middle;
height: 45px;
width: auto;
}
</style>
Do you mean in front? If so add:
z-index: 9999;
If top yeah someone already answered the top and left positions
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 7 years ago.
Improve this question
Hopefully this is a simple one:
I have 2 tables one over the other, but don't want the box shadows being cast on each other. Is there a way to resolve this? I've not had any luck with z-index.
I've included all my CSS code, just encase something there is relevant — Example.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
body {
color: rgb(000,000,000);
background: rgb(256,256,256);
background: -webkit-linear-gradient(rgb(42,109,142), rgb(111,197,228));
background: -moz-linear-gradient(rgb(42,109,142), rgb(111,197,228));
background: linear-gradient(rgb(42,109,142), rgb(111,197,228));
height: 800px;
background-repeat: no-repeat;
background-color: rgb(111,197,228);
font-family: verdana, arial, sans-serif;
font-size: small;
}
table {
word-wrap: normal;
border-style: outset;
border-width: 0px;
border-style: solid;
border-color: rgb(75,75,75);
margin-left: auto;
margin-right: auto;
color: black;
width: 400px;
font-family: verdana, arial, sans-serif;
font-size: small;
text-align: right;
vertical-align: text-top;
padding: 15px;
border-radius:0px;
background-color: rgb(256,256,256);
box-shadow: 5px 5px 15px rgb(50,50,50);
}
tr {
border: solid;
border-width: 2px 0;
}
table tr:nth-child(odd) td{
background-color: rgb(202,233,244);
vertical-align: text-top;
}
table tr:nth-child(even) td{
background-color: rgb(80,183,222);
vertical-align: text-top;
}
tr:first-child {
border-top: none;
}
tr:last-child {
border-bottom: none;
}
th {
white-space: nowrap;
text-align: center;
color: rgb(20,85,109);
}
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
<td>
blah blah blah blah
</td>
</tr>
</table>
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
</tr>
</table>
I'm not sure if this meets your needs but one option is to add a pseudo-element having a white background color to the 2nd, 3rd, ... tables — using adjacent sibling combinator + as table + table::after — in order to cover the shadow between tables.
Example Here
table {
/* other declarations... */
padding: 15px;
background-color: white;
box-shadow: 5px 5px 15px rgb(50,50,50);
position: relative;
}
table + table::after { /* to target adjacent table elements */
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
height: 10px;
background-color: white;
z-index: 10;
}
A few ways to go outlined here:
1) just put it all in one table, but use <tbody> to separate things or use colspan to have different content,
2) use a pseudo class like table:last-child, or table:last-of-type or table:nth-child(x) - to differentiate and put a different drop shadow on the last table and then for the general drop shadow use a different one that just highlights the right side of the table, or
3) make a div wrapper to all the tables, put the drop shadow on that, remove the drop shadow on the tables.
You don't have this type of control over box-shadow. The best you can do is to change the shadow position for tables immediately preceded by another table:
table~table {
box-shadow: 5px 10px 15px rgb(50,50,50);
}
Please note that it does make the shadow a little different
https://jsfiddle.net/vk45mnb6/5/
Other possible solution is to have a wrapper div. You can then then apply the box-shadow to it:
HTML
<div class="table-wrapper">
<table>
[...]
</table>
<table>
[...]
</table>
</div>
CSS
div.table-wrapper {
box-shadow:5px 5px 15px rgb(50,50,50);
}
div.table-wrapper > table {
box-shadow: none;
}
You have to position the elements with relative to use z-index. With a box-shadow spread of 15, and two adjacent elements, you're going to have some overlap. If you reduce it to 5, the shadow doesn't overlap. See that solution below:
Your CSS:
table {
word-wrap: normal;
border-style: outset;
border-width: 0px;
border-style: solid;
border-color: rgb(75,75,75);
margin-left: auto;
margin-right: auto;
color: black;
width: 400px;
font-family: verdana, arial, sans-serif;
font-size: small;
text-align: right;
vertical-align: text-top;
padding: 15px;
border-radius:0px;
background-color: rgb(256,256,256);
position: relative;
}
#table-1 {
box-shadow: 5px 0 5px 0 rgb(50,50,50);
}
#table-2 {
box-shadow: 5px 5px 5px 0 rgb(50,50,50);
z-index: 99;
}
Your HTML:
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
<td>
blah blah blah blah
</td>
</tr>
</table>
<table>
<tr>
<td>
blah
</td>
<td>
blah
</td>
</tr>
</table>
Putting both of the tables inside of a div with a shadow would be a better approach. This would ensure there isn't a gap between the horizontal shadow on the right side (seen in the example above).
New here, I am creating a website and there seems to be a problem with a table I made to hold an image and a table I made to hold content. Content on left image on right. When I float the Image table right the content table moves completely underneath it. When I float it left there is too much space in between the 2. The code in question is table and table 3.
I want it to display the image block next to the link buttons and the context block underneath the buttons but next to the image block.
The second problem is my logo heading which is an image is removing the background image.
HTML Code
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<link href="Articlepage.CSS" rel="stylesheet" type="text/css">
<title>BEADLES BEADING</title>
</head>
<body id="wrap">
<h1><img src="logo.jpg" alt="logo"></h1>
<a class="mouseover" href="Home Page.html"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<a class="mouseover1" href="Article Page.html"><img src="Buttons/New button About us pressed.jpg" alt="about_us"></a>
<a class="mouseover2" href="Section Page.html"><img src="Buttons/New button Products Unpressed.jpg" alt="products"></a>
<a class="mouseover3" href="Contact us.html"><img src="Buttons/New button Contact us Unpressed.jpg" alt="contact_us"></a>
<a class="mouseover4" href="url"><img src="Buttons/New button Home Unpressed.jpg" alt="home"></a>
<table3>AD SPACE(Image)</table3>
<table>
<tr>
<td>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<br><br><br><br><br><br><br><br><br><br><br>
</td>
</tr>
</table>
<table2>
<tr>
<td>
FOOTER
</td>
<tr>
</table2>
</body>
</html>
CSS code
div {
text-align: left;
position: relative;
font-size: 2.5em;
font-weight: bold;
}
div1 {
text-align: left;
position: relative;
font-size: 1.5em;
text-shadow: 2px 2px black;
font-family: Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
h1 {
text-align: left;
font-family: Arial, Helvetica, sans-serif;
text-shadow: 0.1em 0.1em 0.2em black;
font-size: 2em;
font-style: italic;
float: inline;
border: 3px solid black;
width: 800px;
height: 196px;
padding: 0;
}
h2 {
text-align: left;
position: relative;
font-size: 1.5em;
font-family: Verdana, Helvetica, sans-serif;
text-shadow: -1px -1px black, 1px 1px;
}
p {
position: relative;
text-align: left;
font-size: 1em;
font-family: Georgia, Times, serif;
text-shadow: -1px -1px black, 1px 1px;
}
li {
position: relative;
font-size: 1em;
}
a {
padding: 0;
float: left;
}
b {
border: 3px solid black;
width: 180px;
height: 10.5em;
padding: 10px;
float: left;
}
b1 {
border: 3px solid black;
position: absolute;
width: 40px;
height: 23em;
padding: 10px;
float: right;
position: relative;
}
b2 {
border: 3px solid black;
position: absolute;
width: 40px;
height: 23em;
padding: 10px;
position: relative;
}
body {
background-image: url("background.jpg");
background-size: 100%;
margin: 20px;
width: 800px;
padding: 30px;
position: relative;
}
.centeredImage {
text-align: center;
margin-top: 0px;
margin-bottom: 0px;
}
table {
display: inline-block;
width: 640px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 5px;
text-align: center;
height: 400px;
padding: 0;
}
table2 {
display: inline-block;
width: 625px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 5px;
text-align: center;
height: 50px;
}
td {
text-shadow: 0.1em 0.1em 0.2em black;
font-family: "Times New Roman", Times, serif;
}
table3 {
float: right;
width: 150px;
border-style: solid;
border-width: 5px;
text-align: right;
height: 490px;
padding: 0;
}
p2 {
border: 10px solid black;
float: rights;
}
select {
width: 200px;
}
#wrap {
width: 900px;
margin: 0 auto;
}
Image link.
Look I am sure you get the just of what it should look like. Plus the white background should have a lilac image I placed into the body as background.
I think the two main problems are:
You are using tags that don't exist and
You aren't considering the width of the borders when setting your sizes
You set the width of the body to 800px, the first table to 640px, and that table3 to 150px. But the borders on both are 5px wide. 640 + 10 (left and right border of the first table) +10 (left and right border of the second table) + 150 = 810. Even if the tags were correct they're too wide to go next to each other.
Change
<table3>Ad Space</table3>
and
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b><br>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
<b>IMAGE/CONTENT</b>
To
<div id="adCol">Ad Space</div>
and
<div id="#imgDiv">
<img />
<img />
<img /><br />
<img />
<img />
<img />
</div>
In your CSS change "b" to "#imgDiv img", "table" to "#imgDiv", and "table3" to "#adCol". Then either reduce the width of the borders or make one of them at least 10px smaller in width.
Don't forget to also remove the table2 tag and change whatever you've called b1 and b2 to use real HTML tags and change b1 and b2 in your CSS to class names or ids.
Also, consider not setting the width of the body. You probably don't need that.
In this case I see what your trying to accomplish but you should really use divs it would make it easier.
But why don't you just build (1) table with a layout like this below and place / position it in your content. Instead of creating multiple tables. You can still use CSS to add your effects.
<div id="apDiv3">
<table width="100%" height="335" border="1">
<tr>
<td width="87%" height="207">CONTENT</td>
<td width="13%" rowspan="2"><span class="style5">AD SPACE(Image)</span></td>
</tr>
<tr>
<td height="50">Footer</td>
</tr>
</table>
</div>
We don't have tag <table2>. You should use <table>.
If you want to bring two elements near each other, you have to create a div and set the display to flex and bring 2 or more elements into it. You have to set the width of elements to 50% if you want to bring 2 elements. If you want more, you must divide 100 to the number of elements. For example, if you want 5 elements next to each other you must set the width of elements to 20%.
Some controls on the parent screen are bleeding through the div (see image). I need this div to be on top of all other controls. Right now the radio button list and the tabs are somehow on top.
Here is the declaration of the dialog box:
<div id="divSaveAnalysis" style="display: block; opacity: 100; width: 350px; font-size: 40px; position: absolute; top: 35px; left: 100px; background-color: rgb(247, 219, 111); padding: 15px; border: 1px solid #000;">
<div id="saving" style="font-size:medium; font-weight:bold;">
<span id="savingSpan" style="font-size: xx-large">Saving Analysis...</span>
<img src="css/images/Indicators/Activity/GearGreen_66x66.gif" style="float: right; height: 80px;"
title="Saving FLSA Analysis" alt="Saving..." />
<br />
<br />
<div><span id="savingReport" style="font-size: small;"></span></div>
<div><span id="savingInputs" style="font-size: small;"></span></div>
<div><span id="savingResults" style="font-size: small;"></span></div>
<div><span id="savingComplete" style="font-size: small;"></span></div>
</div>
</div>
The computed styles for the div are:
background-color: rgb(247, 219, 111);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: solid;
border-bottom-width: 0.9090908765792847px;
border-left-color: rgb(0, 0, 0);
border-left-style: solid;
border-left-width: 0.9090908765792847px;
border-right-color: rgb(0, 0, 0);
border-right-style: solid;
border-right-width: 0.9090908765792847px;
border-top-color: rgb(0, 0, 0);
border-top-style: solid;
border-top-width: 0.9090908765792847px;
color: rgb(51, 51, 51);
display: none;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 40px;
height: auto;
left: 100px;
line-height: 17.99715805053711px;
opacity: 1;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 15px;
position: absolute;
text-align: left;
top: 35px;
visibility: visible;
width: 350px;
You can use z-index to change the way the contact stacks. By default it's based of the order the content loads with the page.
By default z-index is 'auto'. Try setting it to an integer like 100.
z-index:100;
position:absolute;
When you use z-index you have to also change the position value for the content.
You can read more about z-index here http://www.w3.org/TR/CSS2/visuren.html#z-index
Setting the z-index will control the stacked order of elements.
#divSaveAnalysis {
z-index:10000;
}
you need to add property of
z-index:99999;
and make sure to add
position: relative;
for the z-index to work.