Edit: I had some code posted here but I couldn't get it to reproduce. So here is the link to the problem:
http://stackmobile.quickmediasolutions.com/questions.php?site=stackoverflow
No matter what I do, there is still a gap between the table and the DIV. This occurs on Google Chrome 5.0.375.70 beta on Linux. (And it seems to occur on other Webkit-based browsers too.)
How can I get rid of the space?
There might be a space character between the div and the table. If yes then try removing that.
Try giving
body
{
font-size: 1px;
}
and check whether the 4px has been reduced or not.
Try using the following CSS:-
div {
margin: 0px;
padding: 0px;
}
table {
margin: 0px;
border-collapse: collapse;
padding: 0px;
}
Try zeroing the div margin too:
div {
margin:0;
}
This is the full page I used, it seemed to work for me:
<!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" />
<title>Test</title>
<style type="text/css">
div {
width:2em;
height:2em;
background-color:black;
}
table {
background-color:red;
margin: 0px;
border-collapse: collapse;
padding: 0px;
}
</style>
</head>
<body>
<div></div>
<table>
<tr><td>Test</td></tr>
</table>
</body>
</html>
I finally fixed it!
All I needed to add was
height: 40px;
to
#topbar_logo {
float: left;
}
Related
I am trying to give the date a margin of 15px between the bottom of the header and the text itself, but it doesn't move no matter what I tried.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="myscripts.js"></script>
<title>The Impertus · Understand the News</title>
</head>
<body>
<div id="Preheader">
<img src="images/masthead.png">
<div class ="ph" id="hd"></div>
<p class="ph">May 14, 2016</p>
</div>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Oswald');
html, body {
background-color: #E1D4C0;
margin: 0 0 0 0;
}
.ph {
display: inline-block;
margin-bottom: 15px;
}
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
}
Created Fiddle here: https://jsfiddle.net/fhkh6ae0/
Add .ph { vertical-align:15px; }
See https://jsfiddle.net/fhkh6ae0/2/
Try
.ph {
padding-bottom: 15px;
}
I think your issue lies in your html elements display property.
I see you are using this for the .ph class:
display: inline-block;
In order for your elements to align next to each other, but I think what you are trying to achieve here is possible by applying a float to your #hd and .ph elements:
float: left;
Here is some detailed information on CSS Floats by CSS-Tricks. The method you are using can be a good thing to do in a lot of specific situations, but for your specific case, I think this is the right path to take.
Here is a Fiddle for you.
You can see I changed some things and I added new things. One is the float property I am referencing above, and I have added an overflow: hidden property to the main container #Preheader , this is a fix for floating elements that try to escape their position or break your layout in bits. Remember the last one.
Just add a padding in #Preheader and it will be okay. take a look https://jsfiddle.net/fhkh6ae0/3/
#Preheader {
height: 150px;
width:100%;
background-color: #104386;
font-family: Oswald;
color: #F5EDE3;
padding-bottom:15px; /*added*/
}
I seem to be having an issue with my Science project.
For some reason in Safari and Firefox (Haven't tested Chrome), There seems to be a padding/margin on the top menu, the iframe seems to be working fine, I'll replace it with a div for now and links to nowhere, yet the top of the document doesn't and has what I guess would be a top border, I don't recall adding it though. I honestly can't see whats wrong.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Science Project</title>
<style>
html, body {
margin: 0 0 0 0;
padding: 0;
width: 100%;
height: 100%;
background-color:#000;
}
div.header {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
height: 100px;
width: 100%;
font-family:Arial, Helvetica, sans-serif;
color: #000;
border-bottom:20px solid #09F;
border-top-left-radius:12px;
}
p.title {
padding-top: 20px;
padding-left:20px;
}
div.menu {
width:100%;
height:80px;
border-bottom-left-radius:12px;
background-color:#fff;
border-bottom: 1px solid #000;
}
a.button {
display:table-cell;
width:120px;
height:80px;
border-bottom-left-radius: 10px;
background-color:#999;
text-decoration:none;
color:#FFF;
text-align:center;
font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.content {
height:calc(100% - 221px);
width:100%;
}
</style>
</head>
<body>
<div class='header'>
<p class='title'>The Big Bang Theory Explained.</p>
</div>
<div class='menu'>
<a class='button' target='content'><div class="centertext"><p>What is the big bang?</p></div></a>
</div>
<div class="content"></div>
</body>
</html>
If you could let me know what exactly I'm doing wrong here, I was able to get this to work last time. I'm just finding this rather odd.
jsfiddle: http://jsfiddle.net/ny4fH/
Thanks!
Josh
You are experiencing margin-collapse.
<p class='title'>The Big Bang Theory Explained.</p>
Paragraphs, by default have a top and bottom margin. This is the problem. You can prevent margin collapse with:
.header { overflow: hidden }
Or other fancy tricks described here. (Fiddle)
your code is ok.
Just remember to reset values of the tags you use. In this case it was the paragraph tag.
p { margin: 0; }
You can as well avoid paragraphs margins by hiding the parent (.header) overflow
.header { overflow: hidden; }
I am trying to place a solid color banner that stretches across the top of the screen like on this website, facebook, and others. For some reason I am encountering difficulties doing this
I created a div tag in my HTML file for the banner and tried to apply CSS to the div tag but nothing is working.
<!DOCTYPE html>
<html>
<head>
<style>
#banner {
background-color: #333FF;
font-family: Arial;
position: absolute;
left: 0;
right: 0;
padding:15px;
height:800px;
background-size:100%;
}
</style>
<title>Random Password Generator</title>
</head>
<body>
<div id="banner"><h1>fdsfdsfdsfds</h1></div>
</body>
</html>
I also tried linking to an external CSS file but that isn't working either.
How can I make a simple, solid color banner at the top of the page, on every page?
#333FF is an incorrect color. It should be like this: #333FFF. See the W3C Specification for more info on the length of hex codes (hint: they need to be six characters long).
Working example : http://jsfiddle.net/ntim/SKnxP/
position:absolute; also doesn't seem necessary in your case.
You don't actually need to use position absolute unless you want it to be over the top of anything. Instead, you can just use the following:
<style>
#banner {
background-color: #333FFF;
font-family: Arial;
padding:15px;
height:800px;
background-size:100% 100%;
}
</style>
here is something based on a template I use:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="CSS-STYLE-SHEET.css">
<style type="text/css">
body
{
background-color: #E7E7E7;
text-align: center;
font-family: Arial, Helvetica;
font-size: 15px;
color: #000000;
border-spacing: 0;
border-collapse:collapse;
padding: 0;
margin: 0;
}
#Banner {
background-color: #333FFF;
top: 0; /* Probably not necessary... */
height: 40px;
width: 100%; /* Also probably not necessary */
}
#ContentMain
{
background-color: #FFFFFF;
height: 100%;
}
</style>
</head>
<body>
<div id="ContentMain">
<div id="Banner">Banner goes here</div>
Content goes here
</div>
</body>
</html>
should work.. the grey bit at the back is because the html and body tags dont fill the entire screen - something like this should fix it (I would use min-height), but I have not included it here as then if you want a page taller than the browser window and works in Internet Explorer things get annoying...
Jsfiddle here
As you can see from the example below, I have a black background and red links to emphasize this problem of dotted borders showing up on my links when they are clicked. I added border-style:none but it doesn't seem to have any effect. Is there some other way to remove the dotted border appearing around the links when they are clicked?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body
{
height: 100%;
margin: 0;
padding: 0;
font-weight:normal;
font-size:12pt;
font-family: Verdana, Arial, Helvetica, serif, sans-serif;
background:black;
}
#linksouter
{
margin: 0;
padding: 0;
border-style:solid;
border-width:0px;
position:absolute;
top: 0px;
left: 0px;
width: 80px;
text-align:left;
}
#linksinner
{
margin: 80px 0 0 .5em;
width:100%;
display:inline;
height:100%;
}
#linksinner a
{
color:red;
text-decoration: none;
display:block;
margin: 5px 0 0 0;
border-style:none;
}
</style>
</head>
<body>
<div id="linksouter">
<div id="linksinner">
1
1
1
1
1
</div>
</div>
</body>
</html>
the border you see is called an outline. you can get rid of it by putting this style into your a rules:
outline:none;
personally i always define it as a blanket a rule near the top of my stylesheets (i really dislike outlines even though i know they have a use)
a { outline:none; }
hope this helps
That´s not the border, it is the outline.
You can disable it by setting:
a {
outline: none;
}
I believe you need to define all the rules for your link such as Link, Hover, Active, and Visited.
More information: http://www.echoecho.com/csslinks.htm
Have you tried using those pseudo selectors on links?
like
a:hover
a:active
Coz when you set the css in just using a, it will only change the static appearance on the link.
I have just started making web pages and I'm having lots of trouble with this very simple web page. I can't make anything appear on IE but it works fine on everyother browser. I'll take the liberty of putting all the code in my question because it is really short. If anyone could help me it would be great!
The html is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Rhaya<title>
<link rel='stylesheet' media="screen" type="text/css"
href='rhaya.css'/>
</head>
<body>
<div id="masthead"> Rhaya </div>
<div id="content"> Aca va todo el
contenido </div>
<div id="footer"> ©2009 Rhaya | Teresa
Siu | Pía Fabry </div>
</body>
</html>
and the css is:
ul,ol,li {list-style:none}
body { margin:0 auto; padding:0;font-family: Tahoma;font-size:13px; background: #fff; line-height:15px; color:#000;}
a {color: #000;text-decoration:none}
a:hover {text-decoration:none;color:#000;cursos:default;}
/* Masthead */
#masthead {
margin:10px 0 10px 0;
height: 50px;
font-weight: bold;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
background-image: url(img/header.png);
}
/* Content */
#content {
margin-left:0px;
margin-bottom:10px;
padding:10px;
border:1px solid #000;
min-width: 300px;
min-height: 300px;
font-family: Tahoma;
font-size:13px;
}
/* Footer */
#footer {
clear:both;
padding:10px;
border:1px solid #a2ebf4;
background-color:#e1f2f9;
text-align:center;
}
#wrapper{
width:1002px;
clear:both;
height:auto;
margin:0px auto;
background:#fff;
}
I'm really sorry for asking so blatantly but I really am stumped.
Thanks!
For future reference: http://validator.w3.org/#validate_by_input
Use it for resolving html issues.
You have a mistake in your html head:
<title>Rhaya<title>
should be
<title>Rhaya</title>
Wow, it actually didn't show up at all in IE.
The reason is that you have the entire page in the title of the page. Change this:
<title>Rhaya<title>
to:
<title>Rhaya</title>
I suggest adding the following to you css:
div { position: relative; }
<html
tag isn't closed properly
title tag isn't closed properly.
I have tried and tested. it is your title problem. enclosed it title /title will definitely work.