Earlier The Table showed borders. Then I added a property to my container
text-align:center;
The table did not move to center so I added
display:inline-block; to the table.
That moved the table to the center and it looked good in Chrome and Firefox but it is not looking well in IE 11
The Table borders are missing.
table{
margin:2px;
width:200px;
padding:4px;
display:inline-block;
}
I tried Google search and tried to set the zoom of IE 11
table{
margin:2px;
width:200px;
padding:4px;
display:inline-block;
}
This is how my table looks in IE 11
Remove display:inline-block; first and add margin. It should help
table {
/* Remove this: margin:2px; */
width:200px;
padding:4px;
margin: 2px auto;
}
Or check the link
https://www.granneman.com/webdev/coding/css/centertables
Try to add in to your html code border = "1"
<table border = "1"></table>
https://www.w3schools.com/tags/att_table_border.asp
Related
Fist of all, pls see this Question and the Demo
You can see even set the margin:0px; to the element, there's still a space between the text and the element border. It's a problem when I put Chinese and English text in one line, because the space for English and Chinese is not the same. Anybody know how to solve this?
I know it's not a big issue, but want to make it perfect to look, also want to learn more about css and html. Thank you for your attention.
You can reduce the height's lines of paragraphs with the line-height property:
* {
margin:0px !important;
padding:0px !important;
}
.di_header{
display:table;
width:100%;
}
.di_h_en{
width:30%;
height:100px;
display:table-cell;
vertical-align:bottom;
text-align:left;
border:solid 1px red;
}
.di_h_cn{
width:70%;
display:table-cell;
vertical-align: bottom;
text-align:right;
border:solid 1px red;
}
.di_h_en p{
font-size:32px;
line-height:30px;
border:dashed 1px black;
}
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
}
<div class="di_header">
<div class="di_h_en"><p>I'm left</p></div>
<div class="di_h_cn"><p>I'm chinese 我是中文</p></div>
</div>
Here, I put a line-height a little smaller, so it reduces the margin with border. Play with the 30px value to see the change.
this is happening becuase both <p> contains different font-size.. you can fixed them by using line-height property.
Add the line-height in the CSS. you use 32px font-size on another p element.
.di_h_cn p{
font-size:24px;
border:dashed 1px black;
line-height:38px; /* Add this line*/
}
Here is a DEmo. http://jsfiddle.net/kheema/TkfSx/13/
Can you try using margin-bottom:0 for <p>.
Just keep font-size same for both or like mentioned above use line-height and play with it until you are satisfied.
demo:
Jsfiddle
or
Jsfiddle2
I think you want to remove the margin at the top of text inside the cell. If this is what you want then remove the height:100px from the .di_h_en{your-styles-here}
I want to publish some in table where the table td widths, BG colours are different. I designed the following css which is working fine in Chrome and Fire fox but not giving required out-put in Internet explorer. Can any body help me in this regard.
HTML:
<td class="td_1">Games</td>
<td class="td_2">Sports</td>
CSS:
.td_1 {
width:200px;
height:50px;
max-width:200px;
min-width:200px;
max-height:50px;
min-height:50px;
background-color: yellow;
color: red;
}
.td_2 {
width:300px;
height:50px;
max-width:300px;
min-width:300px;
max-height:50px;
min-height:50px;
background-color: blue;
color: white;
}
there is no way in the world you would get wrong color. please see that your Internet Explorer's user-agent styles dont override your stylesheet. try using a reset.css sheet to reset all IE's default values.
include the reset.css first before all other stylesheets. you can get a free one Here
css:
* {
margin:0;
padding:0;
}
.blue-button
{
width:auto;
display:inline-block;
}
.blue-button:before
{
/*background-image:url('blue-button.gif');*/
background:red;
width:5px;
height:21px;
display:block;
content:"\00a0";";
float:left;
}
.blue-button span
{
background:#00AEEF;
display:block;
height:100%;
text-align:center;
margin-left:5px;
padding:3px;
padding-left:8px;
padding-right:8px;
color:white;
}
body:
<div class="blue-button"><span>abcdef</span></div>
So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF - in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?
This is a problem due to IE being unable to recognize the attribute
display: inline-block;
IE explorer will display it inline, and to achieve the desired effect you need to give the content 'Layout' using
zoom: 1;
or similar.
This article was helpful to me, check it out to fully understand what I'm trying to say!
http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html
I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?
content:"\00a0";";
should be
content:"\00a0";
Can you confirm that this is just a typo, or does it fix it for you too?
I have created a stack of div tags and used z-indexes to make them appear behind each other.
They overlap enough for them all to be visible and mouse-overable. I then assigned a :hover to change the z-index and make the div tag which is being hovered over come to the top of the pile.
An example of what I have would be...
CSS
#red-box {
position:fixed;
width:170px;
height:210px;
margin-left:70px;
top:40px;
background-color:red;
z-index:3;
}
#red-box:hover {
z-index:5;
}
#blue-box{
position:fixed;
width:170px;
height:210px;
margin-left:150px;
top:70px;
background-color:blue;
z-index:2;
}
#blue-box:hover{
z-index:5;
}
HTML
<a id="red-box"></a>
<a id="blue-box"></a>
I have also created a jsFiddle to help highlight what's going on.
This works great in the latest versions of all the browsers but the div tags' z-indexes do not change in IE8.
Could anyone help me fix it?
This ought to fix it:
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Basically, just set it to a ridiculously high number.
Edit: I just tested this in my version of IE on your JSFiddle, and it worked.
I don't know why this is happening.
I have this code here.
It works fine but "sometimes" (and many times in a row) for no apparent reason, this happens:
To all the .box class.
Sorry I have to share "all" my code but I have no idea why this is.
This is what it should look like:
I don't know if this is usual but id you want, you can download the two files from here (HTML and CSS + Images) because in jsfiddle seems to work all of the times,
I don't know whether it matters or not but I'm using chrome (latest) on a mac.
EDIT: I seems to work fine in safari every time.
Thanks in advance!! Please ask for any clarification needed!
By the way my title is absolutely horrible, sorry! but I have no idea what the problem is so I can't really describe it, feel free to edit or comment any suggestion.
On your style.css
Remove overflow:hidden on #container
Set overflow:hidden to the .box
Set float:left to the .box img
Set float:right to the .follow
new
#container {
height:100%;
width:520px;
position:relative;
left:50%;
margin:20px 0 0 -250px;
}
.box {
border:1px solid gray;
height:200px;
width:500px;
float:left;
margin:0px 0 20px 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
overflow:hidden;
}
.box img {
width:140px;
height:140px;
margin: 15px 0 0 15px;
float:left;
}
.follow {
/*outline:1px solid red;*/
height:80px;
width:260px;
float:right;
margin:25px 30px 0 0;
}
To make your css cleaner, when you state styles for .box:hover, you don't need to redeclare things that already apply to .box. All .box styles are inherited by .box:hover . (Example, how you have float:left on both).
That being said, this is almost certainly a float issue. Adjust both the float and clear properties of the two inner divs, the outer div, and the img to see if you learn anything from that. It's difficult to give help when the problem doesn't occur in the fiddle.