I have a td styled with CSS like this:
table{
border-collapse:collapse;
color:#FFF;
width:100%;
}
table td{
border:1px solid #FFFFFF;
vertical-align:top;
text-align:left;
padding:0px;
}
.tbs{
font-weight:bold;
height:20px;
}
.tbs a{
color:#B8B6B4;
padding:5px;
display:inline-block;
}
.tbs a.act{
color:#FFFFFF;
background-color:#1E1E1E;
}
.tbs a:hover{
color:#FFFFFF;
}
.tbs is the td, on Firefox it's all good, but on IE, even if it's explicitly declared height to 20px it shows me a height of 28.5px, why this? I could understand this if I omitted height, but it's declared, what can I do to fix it, is there a CSS only solution without editing the structure?
Thanks.
EDIT:
I'm adding a Jsfiddle, even if I think it's useless, cause most of my code don't work...
http://jsfiddle.net/2TZ2Z/
Related
I have a list with floated <li> elements, the heights are different, thats the problem. I know I know theres an alternative, display:inline-block but this propery adds extra spaces, and I dont know why.
My css:
ul {
padding:0;
margin:0;
list-style:none;
width:700px;
}
ul li {
float:left;
border:1px solid #000;
width:24%;
margin:0 0.3% 20px 0.3%;
font-size:11px;
}
.yellow {
background:yellow;
}
online preview: http://jsfiddle.net/f3CA3/1/
you can do it clearing the sides as:
clear:both;
or maybe
clear:right;
just as an example, could be also;
clear:left;
I've been trying to get the overflowing text to go to a new line, to no avail.
In the thumbnails section of my website, the thumbnail title is set to "overflow: hidden":
.thumb_title a {
color:#333333;
line-height:18px;
overflow:hidden;
text-decoration:none;
white-space:nowrap;
}
.index .thumb_title a:hover {
background:none;
text-decoration:underline;
}
.thumb_title {
overflow:hidden;
padding-top:2px;
white-space:nowrap;
width:280px;
font-size:11px;
font-weight:bold;
}
I've read that if the width of the element is set, it will automatically wrap itself.. but the thumbnail_title is already set to 280px. I changed it to max-width but nothing happened. I've also tried adding "word-wrap: break-word" (CSS3), but there was no effect. Any ideas?
Remove white-space:nowrap; That prevents text from going to new lines.
These two selectors have nowrap and need it removed: .thumb_title and .thumb_title a
Fixing this will also change the layout. I recommend this:
.index .module {
display: inline-block;
vertical-align: top;
/* remove float: left */
}
There are few things preventing the wrap to happen.
Here the css changed :
.thumb_title a {
color:#333333;
line-height:18px;
/*overflow:hidden;*/
text-decoration:none;
/*white-space:nowrap;*/
}
.index .thumb_title a:hover {
background:none;
text-decoration:underline;
}
.thumb_title {
/*overflow:hidden;*/
padding-top:2px;
/*white-space:nowrap;*/
width:280px;
font-size:11px;
font-weight:bold;
}
But, you will have another issue with the floating statement , the next image will move right.
I have this css below. Some how my this css's clicked link gets over written by some other css once I click the link. It turns the link color to red. I tried to keep it white in code below but thats not helping. What can I do to get it working
.grey {
background-color:#545154;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #120c12;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
}.grey:hover {
background-color:#a8a5a8;
}.grey:active {
position:relative;
top:1px;
}
.grey a:visited{
color:white !important;
}
.grey a:link{
color:white !important;;
}
html
Site
The selector for the white color is off. It should be .grey:visited or a.grey:visited.
I'm trying to create a table with div tag instead of table tag
I wrote following in my css file:
.div-table{
display:table;
border-collapse:collapse;
border:1px solid lightgray;
margin-right:1%; margin-left:1%;
width:99%;
font-size:13px; font-family:Verdana;
}
.div-table-row1{
display:table-row;
background-color:White;
width:33%;
clear:both;
}
.div-table-col{
float:left;
display:table-column;
border:1px solid lightgray;
width:33%;
}
I applied this to my table but the borders are coming according to the size of content in each cell individually.
So sometimes i get double border...
I cannot apply height attribute here as data coming through tables so it is dynamic in size
I dont know how to remove those double borders from a cell and make all cell's size in a row equal.
Please help !!!!!
Change
border-collapse:collapse;
to
border-collapse:separate;
or
remove border-collapse
Changes
.div-table{
display:table;
border-collapse:collapse;
border:1px solid lightgray;
margin-right:1%; margin-left:1%;
width:99%;
font-size:13px; font-family:Verdana;
}
to
.div-table{
display:table;
border-collapse:separate;
border:1px solid lightgray;
margin-right:1%; margin-left:1%;
width:99%;
font-size:13px; font-family:Verdana;
}
I believe that if you apply
table-layout:fixed
...to .div-table and set the width of the cells, they should behave the way you like.
I have a UL that looks like this:
<ul class="popular-pages">
<li>California</li>
<li>Michigan</li>
<li>Missouri</li>
<li>New York</li>
<li>Oregon</li>
<li>Oregon; Washington</li>
<li>Pennsylvania</li>
<li>Texas</li>
<li>Virginia</li>
<li>Washington</li>
</ul>
And CSS that looks like this:
ul.popular-pages li a {
display:block;
float:left;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #8d8d8d;
padding:10px;
background-color:#ebf4e0;
margin:2px; color:#526d3f
}
ul.popular-pages li a:hover {
text-decoration:none;
border-left:1px solid #b0b0b0;
border-top:1px solid #8d8d8d;
border-right:none;
border-bottom:none;
}
So it's working fine in modern browsers, but it's looking like this in IE6. Any suggestions?
The reason for your layout is probably because you have the float on the anchor, move it to the list-item instead.
ul.popular-pages li {
float: left;
}
Since you're not setting any width in your LI's, I suggest skipping the float and set display: inline on your LI's instead, if you want them on a row.
Adjust with padding/margin to get appropriate spacing between them, and line-height to get correct behaviour for any eventual 2nd line.
That way you won't have problem with your UL not taking up space, without the need of a hidden clear-element at the end of the list (which is your other alternative)
What DOCTYPE are you using? DOCTYPE has an impact on how browsers render.
try use this CSS hack for IE6.
*html ul.popular-pages li a {
display:block;
float:left;
border-right:1px solid #b0b0b0;
border-bottom:1px solid #8d8d8d;
padding:10px;
background-color:#ebf4e0;
margin:2px;
color:#526d3f
}
*html ul.popular-pages li a:hover {
text-decoration:none;
border-left:1px solid #b0b0b0;
border-top:1px solid #8d8d8d;
border-right:none;
border-bottom:none;
}
then adjust your CSS definition for IE6
You're floating your elements, so their parent needs to clear/reset the flow via the clearfix 'hack'.