As the title says I am having the issue of no scroll bar showing up on my web page. I have viewed similar questions to this one on stack overflow and I don't have some of the other common issues such as overflow: hidden. I thought it was a problem with bootstrap but I commented out all off the links to bootstrap CSS and I still dont get a scroll bar. I also added overflow: scroll to my CSS file and while a scroll bar showed up it still didnt work. My code is below and any help would be greatly appreciated.
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
`<title>Cosmic Bowling!!!</title>`
<!-- Bootstrap -->
<link href="bootstrap-3.3.2-dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="css/homepage.css" rel="stylesheet">
</head>
<body>
<div id="banner"></div>
<table class="score-table" id="table1">
<thead>
<th>FR</th>
<th>RD</th>
<th>SCORE</th>
</thead>
<tbody>
<tr>
<td class="_frameCol">1</td>
<td class="_roundCol">
<div class="big_div">
<div class="_roll">
<p>cat</p>
</div>
<div class="_roll">
<p>cat</p>
</div>
</div>
</td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">2</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">3</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">4</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">5</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">6</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">7</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">8</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">9</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
<tr>
<td class="_frameCol">10</td>
<td class="_roundCol"></td>
<td class="_scoreCol"></td>
</tr>
</tbody>
</table>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</body>
</html>
and the CSS file
body
{
background-image: url("images/stardust.png");
}
th
{
padding: 10px;
text-align: center;
}
#banner
{
/*position:fixed;*/
background-image: url("images/bowling_banner.jpg");
background-position: center;
width: 100%;
height: 10%;
}
#table1
{
/*positioning*/
position: fixed;
top: 50%;
}
.score-table,th,tr,td
{
border: 1px solid white;
border-width: 2px;
color: white;
}
._frameCol
{
text-align: center;
}
._roundCol
{
height: 50px;
width: 90px;
}
._scoreCol
{
width: 10px;
}
._roll
{
display: inline-block;
background-color: yellow;
position: relative;
}
.big_div
{
height: 100%;
background-color: red;
}
Sorry for the delay, here is the fiddle
http://jsfiddle.net/ryyanj/us9undLf/
Assuming you're referring to the table going off the bottom of the page...
This is because of the #table1 CSS (in css/homepage.css), more specifically position:fixed
position:fixed is makes your element "float" - it is positioned relative to the browser window rather than the content. Because of this is won't expand the content so as to create scroll bars, even if it did you would be scrolling the content, not the window.
Since you didn't mention why the table was fixed I can only assume it's to space it 50% down the page, in which case your problem can be rectified by switching:
position:fixed to position:absolute
The CSS for #table1 would then be:
#table1
{
/*positioning*/
position: absolute;
top: 50%;
}
Related
I'm just trying to get some help making the table in vertical alignment. My problem is that it shifted the td text to the left.
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table,td, th{
border: 1px solid black;
border: double;
}
td{
display: table-row;
vertical-align: middle;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
This is what it should look like but it doesn't
This is what it actually looks like
This is what it looks like but it needs the colors to fill the table and the text to be the center
Try this!
Hope it helps :)
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<title>Web Colors</title>
</head>
<style>
table, th {
border: 1px solid black;
border: double;
}
td {
display: block;
text-align: center;
border: 2px solid gray;
}
</style>
<body>
<table style="width: 60%; margin: 0px auto;">
<tr>
<th>Web Colors</th>
<tr>
<td style="background-color:#ffffcc;">
#ffffcc
</td>
<td style="background-color:#66ffff;">
#66ffff
</td>
<td style="background-color:#ffff22;">
#ffff22
</td>
<td style="background-color:#999999;">
#999999
</td>
<td style="background-color:#ff0000;">
#ff0000
</td>
<td style="background-color:#ff8429;">
#ff8429
</td>
</tr>
</table>
</body>
</html>
If you need each color on its own table row then your missing some code
for each row you need:
<tr> <!-- Start of row -->
<td>Color 1</td>
</tr> <!-- End of row -->
so your table code should look like:
<table>
<tr> <!-- 1st row -->
<td>Color 1</td>
</tr> <!-- End of 1st row -->
<tr> <!-- 2nd row -->
<td>Color 2</td>
</tr> <!-- End of 2nd row -->
<tr> <!-- 3rd row -->
<td>Color 3</td>
</tr> <!-- End of 3rd row -->
</table>
Once the table starts getting filled it keeps giving me these blank lines on the table.
I am using a w3schools template but I don't think that's whats causing the problem. I put an image below of an example of what it would look like once the table gets filled in.
I tried different things with CSS but nothing worked and I can't find any post with similar problems, please help.
<!DOCTYPE html>
<html>
<title>CaBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<head>
<style>
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
</style>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
top: 40px;
}
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</body>
</html>
Try removing top: 40px; from your css...
I also added a margin-top to the table since it got hidden behind the navigation which uses position:fixed
snippet below:
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
table {
margin-top: 70px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
/* top: 40px; */
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
</tbody>
</table>
</body>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
I am making a newsletter with foundation. I need to get my background to go to full width, but at the moment the full width is defined in center:
My Example
How can I make the background color go full width? Foundation has made a prewritten CSS, where the width should be defined:
.wrapper {
width: 100%; }
#outlook a {
padding: 0; }
body {
width: 100% !important;
min-width: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
Margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>A title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
<style type="text/css">
.bgcolor {
background-color: #fff;
}
.bgcolor--blue {
background-color: #ccd8db;
}
.bgcolor--content--light {
background-color: #ebe4cf;
}
.bgcolor--footer {
background-color: #e8e8e8;
}
</style>
</head>
<body>
<!-- <style> -->
<table class="body" data-made-with-foundation>
<tr>
<td class="float-center" align="center" valign="top">
<center>
<table class="container" align="center">
<tbody>
<tr>
<td>
<!-- Row 1 -->
<table class="row collapse" border="1px solid red">
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<center>
<img src="http://bbacher.weebly.com/uploads/8/4/6/2/8462405/6449752.jpg" alt="Logo" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<center>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</table>
</body>
</html>
Table have padding and cellspacing by default. You'll need to manually remove these in order for your content to take up the full width and height of the element.
You'll need to do this on every table tag.
<table cellpadding="0" cellspacing="0">
https://jsfiddle.net/wb9qg34e/
With regards to the table not being responsive. You have set static widths to the table and there is a class pulling through that has a min width on
td.large-12 center, th.large-12 center {
min-width: 532px;
}
If you remove the width from the table.container and add a new class like below, it should be fully responsive.
td.large-12 center, th.large-12 center {
min-width: auto;
}
I have a problem with Internet Explorer 9 and fixed height of a td
I need a td with 5px height but in IE9 its bigger than 5px.
In Chrome, Firefox and Safari it works
I tried with a transparent 1px gif to insert in the td, I set the font-size: 0px; line-height: 0px and it still won't work.
My test code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>test</title>
<style>
.space{
height: 5px;
width: 5px;
font-size: 0px;
line-height: 0px;
background: none;
}
table{
border-spacing: 0px;
table-layout: fixed;
}
td{
background-color: red;
}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" style="width: 1200px;">
<tr >
<td rowspan="5"> test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td rowspan="5"> test2<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br><br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br>test1<br> </td>
<td rowspan="5" class="space"> </td>
<td> test3</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
<tr>
<td class="space"> spacer</td>
</tr>
<tr>
<td> test 5</td>
</tr>
</table>
</body>
</html>
I have two images:
Chrome (working):
IE9:
You can place a div inside the td with a height of 5px. http://jsfiddle.net/aCrbz/3/
<td><div class="foo"></div></td>