Hi
mine css class is as below for table records
table.tblBaseTblData{
margin:0px;
padding:0px;
*margin-left:10px;
*margin-left:0px;
border-bottom:1px solid #003366;
border-collapse:collapse;
}
table.tblBaseTblData th{
font-family:Arial,Verdana;
font-size:10px;
font-weight:bold;
background-color:#003366;
color:#F4EFEC;
height:25px;
margin:0px;
border:1px solid #003366;
}
table.tblBaseTblData td{
font-family:Arial,Verdana;
font-size:10px;
font-weight:normal;
color:#000000;
padding:2px 2px 2px 2px;
height:15px;
border:1px solid #003366;
}
table.tblBaseTblData .oddRow{
background-color:#DDDDDD;
}
table.tblBaseTblData .evenRow{
background-color:#FFFFFF;
}
when add additional css like below table border getting hidden
table>tbody {
overflow: auto;
height: 280px;
overflow-x: hidden;
}
table>tbody tr {
height: auto;
}
table>thead tr {
position:relative;
top: 0px;/*expression(offsetParent.scrollTop); IE5+ only*/
}
what will be solution for this happens only in mozilla not in IE
In the section table.tblBaseTblData you have two different margin-lefts. Take one out.
Related
Whilst designing a page i come across a conflict (i guess) in a div that holds a group of divs.
How it currently looks http://castellvmaqvae.nl/exposities/
img is how it should look. enter image description here
Change the following, your div inside the main div are wider than they should be, which in your case you want them the same width as the image, here is the updated CSS :
.col-md-4 third {
width:25%; //You may want to play around with this on different screen sizes
}
OR FIXED WIDTH:
.col-md-4 third {
width:200px; // Same width as the picture
}
Somehow the wrappers background color has no effect but giving background color to the individual divs and borders seem to work great.
code:
.verwikkeld {width:316px;
height:auto;
background-color: #FFF;
border:#999 1px solid;
margin-left:20px;
margin-right:30px;
}
.verwacht{color:#666;
border-left:#000 1px solid;
border-right:#000 1px solid;
border-top:#000 1px solid;
width:220px;
background-color:#FFF;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
padding-top:10px;
padding-bottom:10px;
font-size:32px;
}
.verwacht_img{border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
}
.verwacht_naam{color:#666;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:28px;
}
.verwacht_titel{color:#000;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:16px;
}
.verwacht_datum{color:#F90;
border-left:#000 1px solid;
border-right:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
font-size:12px;
}
.verwacht_text{color:#000;
border-left:#000 1px solid;
border-right:#000 1px solid;;
border-bottom:#000 1px solid;
background-color:#FFF;
width:220px;
font-family:Arial, Helvetica, sans-serif;
padding-left:10px;
padding-top:10px;
padding-bottom:20px;
font-size:12px;
}
Thank you guys for your time.
Just do this modify:
`col-md-2` --> `col-md-1`
`col-md-6` --> `col-md-7 second`
`col-md-4 third` --> `col-md-3 third`
Also in the existing, add text-align: center; to col-md-3 third.
I hope this is what you want.
I need to place the promo div in the right side of the alert div, just like this:
Please, can some CSS expert help me with this code: https://jsfiddle.net/08rnpxbt/4/
body {
width:640px;
float:left;
margin:0 6px 0 6px;
padding:18px;
font-family:Arial, Helvetica, sans-serif;
}
p {
padding:0;
margin:8px 0 0 0;
}
div.alert {
padding:8px 12px 8px 12px;
margin:20px auto 20px auto;
text-align:justify;
border:2px solid #389CF2;
border-radius:8px;
background-color:#F5F5F5;
background-image:url(http://i61.tinypic.com/1oxi50.png);
background-repeat:no-repeat;
background-position:8px 11px;
}
div.alert span {
display:block;
//float:left;
padding-bottom:2px;
margin-left:40px;
font-size:15px;
line-height:1.3em;
color:#5C5C5C;
}
div#promo {
display:block;
width:80px;
height:32px;
padding:4px 2px 2px 2px;
text-align:center;
line-height:15px;
font-size:14px;
color:#FF0000;
border:2px dotted #585858;
border-radius:16px;
background-color: #FFFFD5;
}
<body>
<div class="alert" style="width:530px; margin:0 auto 10px auto;">
<span>
<b>Windows 7 Home Premium - 02 License(s)</b><br>
Price: U$ 225.00 up to 10X or R$ 210.00 in cash
</span>
<div id="promo">15,00% de desconto !</div>
</div>
</body>
Just add this CSS rule to your #promo element:
#promo{
float: right;
}
and change this in your CSS:
div.alert span{
display: inline-block;
}
If you don' set inline-block the #promo will break in new line like you had it before.
Try it here
You can use flexbox attribute for this
just add display:flex and justify-content:space-between
div.alert {
display:flex;
justify-content:space-between;
padding:8px 12px 8px 12px;
margin:20px auto 20px auto;
text-align:justify;
border:2px solid #389CF2;
border-radius:8px;
background-color:#F5F5F5;
background-image:url(http://i61.tinypic.com/1oxi50.png);
background-repeat:no-repeat;
background-position:8px 11px;
}
I need to display two divs one next to another on the same line, but I can't understand why the second one is slightly lower than the first one.
<div class="cont-title">
<div class="triang-header"></div>
<div class="h2-stripe">
<h2 itemprop="name">
Title
</h2>
</div>
</div>
This is the css:
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('../images/titlebar.png') no-repeat top left;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
What am I doing wrong?
I think you did not count the line-height,
should be like this the style for .h2-stripe:
.h2-stripe{
position:relative;
line-height: 23px; // <----
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
box-shadow: 2px 3px 5px 0 #555;
}
here it is an example with line-height:23px for .h2-stripe: http://jsfiddle.net/6a0ga3uq/
you misspelled your class
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
should be
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
The margin of your h2 element causes the second div to shift down. Also, you should vertical-align inline-block elements. See this updated snippet (also with corrected class name in CSS).
.cont-title{
margin-right: -7px;
min-width: 90%;
max-width: 100%;
height:51px;
float:right;
text-align:right;
white-space: nowrap;
}
.cont-title > * {
vertical-align: middle;
}
.triang-header{
position:relative;
width:39px;
height:38px;
display:inline-block;
background:url('http://placehold.it/39x38') no-repeat top left;
margin: 0;
}
.h2-stripe{
position:relative;
z-index:10;
display:inline-block;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
h2 {
margin:0;
}
<div class="cont-title">
<div class="triang-header"></div><div class="h2-stripe"><h2 itemprop="name">
Title
</h2>
</div>
</div>
In the second div, you have line height and lot of other stuff. So other elements can extend your div. If you want your div to be the same size regardless to its other elements you should change display attribute like this
.h2-strispe{
position:relative;
z-index:10;
display:inline-block;
box-sizing:border-box;
text-align:left;
background-color: #2A58AE;
margin:0;
height:38px;
min-width:80%;
line-height:38px;
box-shadow: 2px 3px 5px 0 #555;
}
You can see i added box-sizing to border-box and that will save the position of your div no matter what you do to inner elements
I have made a jsfiddle to show my problem:
jsFiddle
<section class="text clearfix" data-theme="white">
<div class="bemassung">
<h3>BESCHICHTUNGEN BIS ZU FOLGENDEN MAXIMALEN ABMAßEN DURCHFÜRBAR:</h3>
<table>
<tr>
<td>Art der Beschichtung</td>
<td>Länge</td>
<td>Breite</td>
<td>Höhe</td>
<td>Gewicht</td>
</tr>
<tr>
<td>
<img src="assets/images/charts/leistungsangebot/nasslack.png" /> <b>Nass</b>
</td>
<td>18.000 mm</td>
<td>4.000 mm</td>
<td>4.000 mm</td>
<td>40.000 kg</td>
</tr>
</table>
</div>
</section>
section {
background-color:black;
}
.bemassung {
border:20px solid transparent;
border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
-webkit-border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
border-left:0;
border-right:0;
border-bottom:0;
box-sizing:border-box;
width:924px;
height:100px;
margin-top:50px;
background-color:rgb(219, 215, 213);
}
.bemassung h3 {
padding-left:20px;
padding-top:20px;
}
.bemassung table {
width:100%;
height:100%;
background-color:rgb(219, 215, 213);
}
.bemassung table tr:first-child {
background-color:rgb(237, 236, 235);
}
.bemassung table td {
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
border:1px solid #999;
color:rgb(98, 89, 87);
font-weight:normal;
}
.bemassung table td b {
font-size:1.2em;
color:rgb(98, 89, 87);
}
.bemassung table td:first-child {
border-left:0;
}
.bemassung table td:last-child {
border-right:0;
}
.bemassung table tr:last-child td {
border-bottom:0;
}
.bemassung img {
height:40px;
padding-right:40px;
vertical-align:middle;
}
.clearfix:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
As you can see the section is not the full height of the table. I tried to search for solutions, like 100% height, etc., but nothing seems to work. What can I do? I can't use a fixed height.
Use the following CSS. (I have removed the table color so you can see the sizing for section)
http://jsfiddle.net/rutk5mLb/4/
section{
position: absolute;
height: auto;
background-color:yellow;
}
.bemassung{
border:20px solid transparent;
border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
-webkit-border-image:url(../images/charts/leistungsangebot/ruler.png) 150 0 stretch;
border-left:0;
border-right:0;
border-bottom:0;
box-sizing:border-box;
width:924px;
}
.bemassung h3{
padding-left:20px;
padding-top:20px;
}
.bemassung table{
width:100%;
height:100%;
}
.bemassung table tr:first-child{
background-color:rgb(237,236,235);
}
.bemassung table td{
padding-top:10px;
padding-bottom:10px;
padding-left:20px;
border:1px solid #999;
color:rgb(98,89,87);
font-weight:normal;
}
.bemassung table td b{
font-size:1.2em;
color:rgb(98,89,87);
}
.bemassung table td:first-child{
border-left:0;
}
.bemassung table td:last-child{
border-right:0;
}
.bemassung table tr:last-child td{
border-bottom:0;
}
.bemassung img{
height:40px;
padding-right:40px;
vertical-align:middle;
}
.clearfix:after{visibility:hidden;display:block;content:"";clear:both;height:0}
thanks a bunch in advance!
i was able to make a rounded corner button using CSS. i like to be able to mouseover the button, and the entire thing changes its color, not just the inner most div. plz help!
my assumption is that iam supposed to have some kinda javascript with onmouseover="", correct?
here's the page: http://biozenconsulting.com/new/
(also, how do i get rid of the small boxes that appear on the right corners when viewed in IE8 and Chrome?)
this is the HTML code:
<div class="nav_menu" onclick="location.href='index.htm'">
<b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
<div class="top_menufg">
<!-- content goes here -->
Home
</div>
<b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</div>
and here's the CSS:
.nav_menu {
text-align: center;
color: #353535;
font-size: 20pt;
font-family: Verdana, Geneva, sans-serif;
float: left;
width: 33%;
}
#about {
margin: 0 .5% 0 .5%;
}
<!-- For rounded boxes -->
.top_menu {
display:block
overflow: hidden;
}
.top_menu *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#AAAAAA
}
.top_menu1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
}
.top_menu4{
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menu5{
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menufg{
background:#AAAAAA
}
.top_menufg:hover{
background-color: #888888;
cursor: pointer;
}
<!-- For rounded boxes -->
Stu Nicholls's site css play has a lot of examples of how to do this without javascript. It's a really excellent resource.
I replaced the outer div with a link and added a little bit of CSS.
HTML
<a class="nav_menu" href="index.htm">
<b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
<div class="top_menufg">
<!-- content goes here -->
Home
</div>
<b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</a>
CSS
.nav_menu {
text-align: center;
color: #353535;
font-size: 20pt;
font-family: Verdana, Geneva, sans-serif;
float: left;
width: 33%;
text-decoration: none;
}
/* For rounded boxes */
.top_menu {
display:block
overflow: hidden;
}
.top_menu * {
display:block;
height:1px;
overflow:hidden;
font-size:.01em;
background:#AAAAAA
}
.top_menu1 {
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu2 {
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
background:#AAAAAA
}
.top_menu3 {
margin-left:1px;
margin-right:1px;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
}
.top_menu4 {
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menu5 {
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA
}
.top_menufg {
background:#AAAAAA
}
a.nav_menu:hover b, a.nav_menu:hover div {
background-color: #888888;
cursor: pointer;
}
/* For rounded boxes */