I've had a real search through the existing questions here, and I've trawled Google for hours looking for a solution - but it seems this issue is quite specific.
In a nutshell, I have a fairly large table that contains multiple rows (a person on each line). There's a single column in each row, which I "split" into multiple DIVs using W3.CSS. (I use DIVs instead of additional TD's because the width of each DIV is will be different for each person - sort of like a Gantt chart style workforce management system).
The problem I'm having is that specifically in Chrome (not IE or Edge), I'm experiencing this random margin:
The page in Chrome
The page in IE/Edge
I've used Chrome's Dev Tools to try to figure it out, and you can see from this snip that the whole row (whether it's the TD or one or the DIVs - I don't know) seems to be 30px high, yet the content is only 24px.
It's driving me nuts, so I would really appreciate any support - even if it's to tell me I'm missing something obvious! Coding wise, I'm only just past the point of beginner, so I'm open minded that I'm not doing this right!
<div class="w3-container" style="width: 100%; margin:auto; ">
<table id="php_siteid" style="width: 100%; border-spacing: 0; border-collapse: collapse;">
<tr>
<td style="border-bottom: 3px #FFFFFF solid; padding: 0px; " class="<?php print rowClassChange($i); ?>">
<div style="width: 100%;" class="w3-cell-row">
<div style="width: 100px; padding-left: 10px;" class="w3-cell w3-left-align">
<div class="w3-cell-row" style="width: 100%;">
<div class="tooltip w3-cell" style="width: 100%;"><?php if (hasAccess("scheduler")) { ?><strong><span class="fakeLink" onclick="document.getElementById('id<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } else { include('inc/inc_agentsummary.php'); ?><strong><span class="fakeLink" onclick="document.getElementById('id_summary_<?php print $agentLineDetails["agentid"]; ?>').style.display='block'" style="font-weight: bold;"><?php print $agentLineDetails["agentname"]; ?></span></strong><?php } ?><span class="tooltiptext"><strong><?php print $agentLineDetails["agentname"] . "<BR>" . $shiftTime; ?></strong></span>
</div>
</div>
</div>
<div class="w3-cell w3-left-align w3-rest">
<div class="w3-cell-row" style="width: 100%;">
<div class="w3-cell w3-left-align" style="background-color: transparent; width: 10%;"></div>
<div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
<div class="w3-cell w3-left-align" style="background-color: #a32985; width: 15%; color: white; padding-left: 10px; border-left: 1px #E7E7E7 solid; border-right: 1px #E7E7E7 solid;">MFMT</div>
<div class="w3-cell w3-left-align" style="background-color: #7CBD85; width: 20%;"></div>
<div class="w3-cell w3-left-align" style="background-color: transparent; width: 35%;"></div>
</div>
</div>
</div>
<?php if (hasAccess("scheduler")) { include('inc/inc_agentweeklinks.php'); } ?>
</td>
</tr>
</table>
</div>
Thanks so much in advance - happy to provide more information/code if needed :)
Jamie
It's all about each browser default behavior. Chrome dose not set any value for vertical-align. Just define that property (In your case dosen't matter which value you will assign) to .w3-cell class which has that specific display value:
.w3-cell{
display:table-cell;
vertical-align:middle
}
Related
I am working on Bootstrap. I wanted to make block inside table responsive.
As I resize the browser, block (bluebox) inside table is not adjusting according to screen size. I am new to Bootstrap.
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
min-width:267px;
width:100%;
display:block;
overflow:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page_info">
<div class="breadcrumb">
Home
<span class="delimiter fa fa-arrow-circle-right"></span>
<span class="current" style="font-weight: 300;font-size: 12px;color: #666;">Link us</span></div>
<div class="page-title">
<h1 style="font-family: 'Roboto';font-size: 40px;line-height: 44px;color: #339933;font-weight: 300;">Link us</h1>
</div>
<div class="clearfix"></div>
</div>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>
<p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>
<table class="table table-bordered" style="margin-left:18px;">
<thead>
<tr>
<th>Banner</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72">
</td>
<td>
<div class="bluebox"><a href="http://www.dubaiexporters.com/"><img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers & Suppliers" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Link: https://jsfiddle.net/1h0bt35f/4/
Update: Add word-break: break-all; to the CSS class.
Also, you would need to define width in percentage in order to make it responsive.
Currently, you have given bluebox a width of 267px.
Try the below code where you can set a min-width of 267px and it will handle automatically when it scales due to width as 100%.
.bluebox {
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow: hidden;
width: 100%;
display: block;
overflow: auto;
word-break: break-all;
}
Try this:
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
width: 26%;
display:block;
overflow:auto;
}
I'm trying to put a banner image (with transparent section) in a div, over a gradient background that I can change dynamically, and then overlay a table on top of it all.
<div style="margin: 0; padding: 0; width: 796px; position: relative; ">
<img src="LeftSlice.gif" style="margin: 0; padding: 0; position: relative; float: left;">
<div style="margin: 0; padding: 0;
background: -webkit-linear-gradient(white, blue);
background: -o-linear-gradient(white, blue);
background: -moz-linear-gradient(white, blue);
background: linear-gradient(white, blue);
">
<img src="MiddleSlice2.gif" style="margin: 0; padding: 0; position: relative; float: left; z-index: 250; ">
</div>
<img src="RightSlice.gif" style="margin: 0; padding: 0; position: relative; float: left; ">
<table style="padding: 0 20px; width: 796px; position: absolute; left:10px; top:10px; z-index: 500 " >
<tr>
<td valign="bottom" align="left"><img src="IFFUlogo.gif" height="80px" width="200px" ></td>
<td valign="top" align="right">About Us | Register | Login</td>
</tr>
<tr>
<td colspan="2" valign="bottom" align="center" style="padding: 30px 0 0 0; color: white; "><h1>Custer County District High School</h1></td>
</tr>
</table>
</div>
I'm getting no gradient (body bg is showing under transparent portion of the banner .gif)
When I look at the element in Firebug, I get this:
element.style {
background: linear-gradient(#FFFFFF, #0000FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
margin: 0;
padding: 0;
}
I don't think we are allowed to post URLs, but if so, I can do so.
Looks like everything inside your divs is either floating or position:absolute. This will cause the divs to collapse in on themselves, so that you can't see the background. Anytime you float something inside of a container that you want to expand to contain its contents, you either need to insert a clear like this:
<div id="myContainer" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
<div style="clear:left;"></div>
</div>
Or better yet, don't do that, and use a Clearfix instead (See http://nicolasgallagher.com/micro-clearfix-hack/ for accompanying css):
<div id="myContainer" class="cf" style="background:red;">
<img id="myFloatingElem" style="float:left;" />
</div>
For position:absolute, neither option will work, you need to specify a height for the parent in this case.
I tested your CSS gradient code and it works. I see the problem is in the float: left of the image inside the div tag with the gradient background but I don't know what output you wish to see because the image files are not available. Maybe you can post it clearly.
I got a Problem with CSS ! :)
I want to style a box to look like this one here:
http://dribbble.com/shots/1151646-Home-AgenceMe/attachments/148910 (Chart + 3 boxes right).
Right now i tried:
.wktcontent {
float: left;
width: 80%;
}
.wktinfo {
float: right;
width: 20%;
}
.wkttitle {
height:34px;
padding:5px;
border-bottom:1px solid #000000;
margin-bottom:20px;
}
.wktinfocontent {
font-weight:bold;
border-top:1px dashed #000000;
}
and in html:
<div class="wktcontent">
<center><h2>Title</h2></center>
<p><h3>Content</h3></p>
</div>
<div class="wktinfo">
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
<div class="wktinfocontent"><p><h4>27/7/2013</h4></p></div>
</div>
I think everything aligns fine. But as soon as I add a border to the boxes by defining
border: 1px solid lightblue;
the title is placed over the infos on the right.
My second part of the Question is: How can I align the numbers on the right (as in the example on dribble) to the text next to it?
thank you so much!!
Adding a border changes an elements dimensions. If you add a 1px border to an element, then remove 1px from it's width and height. Failure to do this will result in issues with layout.
I couldn't reproduce your error on jsfiddle and chrome, what browser are you using?
As for the numbers, I'd suggest using a table in each div so you can align both halves properly.
Something along the lines of:
<div class="wktinfocontent">
<table>
<tr>
<td width="30%">
07
</td>
<td width="70%">
Hours play game today
</td>
</tr>
</table>
</div>
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
I am all in favor of CSS based layouts, but this one I just can't figure out. With a table it is oh-so-easy:
<html>
<head><title>Three Column</title></head>
<body>
<p>Test</p>
<table style="width: 100%; border: 1px solid black; min-height: 300px;">
<tr>
<td style="border: 1px solid green;" colspan="3">Header</td>
</tr>
<tr>
<td style="border: 1px solid green; width: 150px;" rowspan="2">Left</td>
<td style="border: 1px solid yellow;">Content</td>
<td style="border: 1px solid blue; width: 200px;" rowspan="2">Right</td>
</tr>
<tr>
<td style="border: 1px solid fuchsia;">Additional stuff</td>
</tr>
<tr><td style="border: 1px solid green;" colspan="3">Footer</td></tr>
</body>
<html>
Left is fixed width
Right is fixed width
Content is liquid
Additional stuff sits beneath content
Now here is the important part: "Left" may not exist. Again this is easy with the table. Delete the column and "Content" expands. Beautiful.
I have looked through many examples (and "holy grails") of liquid and table less three-column CSS based layouts, but I have not found one which is not using some kind of margin-left for the middle column ("Content"). Any margin-left will suck once "Left" is gone as "Content" will just stay at it's place.
I'm just about to switch to old school table based layout for this problem, so I'm hoping someone has some idea - I don't care about excess markup, wrappers and the like, I would just like to know how to solve this with plain CSS. Btw: look at how easy equal height columns are...
Cheers
PS: No CSS3 please
body {
width: 600px;
}
.left {
float: left;
width: 200px;
}
.center {
float: right;
width: 100%;
}
.right {
float: right;
width: 200px;
}
this should let the .center expand to the full width when left is removed