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
Related
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
I'm having this weird problem with this website I just started building. I want to get the header to align completely flush with the top of the page. But for some reason, there's a small space, about 20px high, that won't go away no matter what I try. I'm assuming there's just something about CSS and html that I'm not getting so can you guys help me out?
CSS:
#header {
background-color:#3429C9;
/*-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;*/
display:block;
position:relative;
z-index:2;
margin-top:-20px;
border-bottom:2px solid white;
margin-bottom:20px;
height:60px;
}
body {
text-align:center;
font-family: Georgia, Serif;
background: #000000;
margin:0;
height:100px;
display:block;
border:2px solid red;
}
Every browser (firefox,chrome,IE) have a default CSS it comes with which give default styling to elements. It also gives some default margin/padding, so usually when starting a web site design you should use a css reset file to reset all default styling.
That way you get the same basic behaviour for all browsers.
For a quick solution to yuor problem, just set the header padding/margin to 0.
I don't know how to ask/write this, so feel free to update the name or point me to the correct question/title.
I am designing a cross html5-css3 site, and trying to make it look the same for every (common) browser.
This is what I have:
http://www.pojotlan.com/example1/
It works fine with Firefox 14.0.1, Chrome 21.0.1180.6 and Safari 5.1.7, this, with (file:estilo.css) #contenido line height is used to make it fit in Safari and Chrome.
this is the short version of the included 3 css files...
html {height:100%;}
body {height:100%;}
div#Tabla {display:table; height:100%;}
div.row.main {display:table-row-group; height:auto; min-height:100%;}
div#main {display: table-cell; position: relative; height:auto; min-height:100%;}
div#contenido {display:inline-block; position: relative;
height:100%; min-height:100%; line-height:100%;}
section {height:auto; min-height:100%;}
if I change its position to absolute, i got the same look on Chrome 21.0.1180.6 and Safari 5.1.7, Opera 12.
as you can see, #contenedor wont fit 100% height on Opera and IE. How can I fix this?
I'm really new to css styling and stuff, so I don't get what is wrong.
Thank you in advance :)
ps. yes, maybe I am messing everything with css display:table and stuff, but thats where google sent me... haha xD so, yes, you can basically tell me to start again without tables. (I am trying that already, with less results.)
I couldn't make it as I were, so this is what I did.
CSS File:
body, html {border: 0px; margin: 0px; padding: 0px;
height:100%; position:relative; width:100%;}
#head
{
position:absolute;
background-color: #98a;
height: 100px;
width:100%;
top:0px;
}
#footer
{
position:absolute;
background-color: #e46;
width:100%;
height:20px;
bottom:0px;
}
#content
{
position:absolute;
background-color: #dee;
height:auto;
top:100px;
bottom:20px;
width:100%;
}
body:
<body>
<div id="head">#head</div>
<div id="footer">#footer</div>
<div id="content">#content</div>
</body>
The important part, was that content is absolute, and top/bottom.
so, this is all.
thank you :D
You may try to use the min-height IE hack :
body, html {
min-height:100%;
height:auto !important;
height:100%;
}
Hope this helps!
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 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.