I wrote a small web page without any functionality. When I open this page directly in a browser the white box will vertically resize with the browser. But if I run this in Meteor the white box won't get larger than 400px.
I compared all elements using the chrome tools but all css attributes seems to be identical in both versions.
To test it in a normal browser the stylesheet link must be enabled.
index.html:
<head>
</head>
<!--link href="main.css" rel="stylesheet"/-->
<body>
<div id="messages" class="relative content-box">
<div id="chat-box" class=""></div>
</div>
</body>
main.css:
body {
background-attachment: scroll;
background-size: cover;
background-color: #004269; }
.content-box {
background-color: white;
padding: 15px; }
.relative {
position: relative; }
#messages {
margin: 0;
position: relative;
min-height: 400px;
padding: 10px; }
#chat-box {
position: relative;
min-height: inherit;
padding-top: 0px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
overflow-y: hidden;
overflow-x: hidden; }
html {
min-height: 100%;
position: relative; }
body {
margin-bottom: 190px;
margin-top: 112px; }
.content-box {
margin-left: 0px;
margin-right: 0px;
margin-bottom: 5px;
margin-top: 5px; }
OK, so it's because of the which is added by Meteor. This changes the size of the document height. More details can be found here:
<!DOCTYPE html> prevents me from resizing my <img>
Related
#import 'https://fonts.googleapis.com/css?family=PT+Sans';
* {
font-family: 'PT Sans', sans-serif;
}
#headerpanel {
display: block;
background-color: red;
width: 100%;
margin: 0px;
padding 0px;
border: 0px;
}
<title>Test Site</title>
<body>
<div id="headerpanel">
TEST
</div>
</body>
What I'm trying to do is create a "header" that would start from the very left of the site to the very right, from the very top around 20px down.
But when I test the site, I see that there's this little space in top-left...
How do I get rid of it?
body,html {
margin:0px;
padding:0px;
}
You just need to reset the browser default margin style for body.
body {
margin: auto;
}
Have a look at your box-model through the "Computed" tab in your browser IDE/developer tool.
Add the following in your CSS
body{
margin:0;
}
remove body margin left side
#import 'https://fonts.googleapis.com/css?family=PT+Sans';
* {
font-family: 'PT Sans', sans-serif;
}
#headerpanel {
display: block;
background-color: red;
width: 100%;
margin: 0px;
padding 0px;
border: 0px;
}
body{margin: 8px 0px; }
<title>Test Site</title>
<body>
<div id="headerpanel">
TEST
</div>
</body>
Either I have misunderstood your question or all of the other answers have done so. I always thought that margin: 0; fixed the problem and it does on some browsers but Safari and Chrome to name a few add that little border. The code you should use top: 0; left: 0; to align with the edge of the page.
#import 'https://fonts.googleapis.com/css?family=PT+Sans';
* {
font-family: 'PT Sans', sans-serif;
}
#headerpanel {
position: fixed;
display: block;
background-color: red;
top: 0;
left: 0;
right: 0;/* since we are moving it left a little, we use right: 0; instead of width: 100%; */
margin: 0px;
padding: 0px;
border: 0px;
}
<title>Test Site</title>
<body>
<div id="headerpanel">
TEST
</div>
</body>
This is piece of bigger project but what happens is that use of negative margin on one element (.pag) takes the other element (#ar_wr_in) out from floated box (#ar_wr)?
It works fine in Firefox but does not in Chrome or IE.
HTML:
<body>
<div id="ar_wr">
<div class="pag">pagination</div>
<div id="ar_wr_in">
<section class="ar">isdjs fjs odifj</section>
</div>
</div>
</body>
CSS:
body {
color: #f00;
background: #191919;
font-family: LucidaGrande, Helvetica, Arial, sans;
}
section {
display: block;
float: left;
}
section {
margin: 0px;
}
#ar_wr {
width: 59%;
padding: 1%;
background: #ffddff;
border-radius: 5px;
margin-right: 1.5%;
}
#ar_wr {
float: left;
margin-top: 80px;
}
#ar_wr_in {
width 100%;
float: left;
margin-top: 17px;
}
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: relative;
}
.ar {
width: 100%;
margin-bottom: 40px;
position: relative;
background: #ddffff;
}
Here is JSFiddle
Is there some fix or hack for this to make it look as in Firefox?
Thank you
If you make your pagination element have absolute positioning then it can happily sit outside it's parent without affecting other non-absolute elements that come after it:
.pag {
font-size: 12px;
margin-top: -77px;
/* background: #ddffff; */
position: absolute;
}
Strange that Firefox treats it differently, but I would actually expect the result that you see in Chrome from using relative positioning like that.
I need to vertically align with CSS multiple elements inside my header.
At the moment, I am using this structure:
-Header
-Content div (This only set my width to 940 with paddings of 10px each side)
-Element 1 (Height: Known, 50px)
-Element 2 (Height: Unknown, bigger fonts)
-Element 3 (Height: Unknown, smaller fonts)
So I need to vertically align to the middle (50% of my header - size of the element) all of my elements and I need to make it cross-browser compatible...
I've found some suggestion by searching such as using a floater div, however I had a hard time trying to align all of my elements since they are not all of the same size...
EDIT
As requested, here is my HTML and CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/mediadevis.css" />
</head>
<body>
<header>
<div class="content">
<div id="logo"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Nos services</li>
<li>Notre compagnie</li>
<li>Nous joindre</li>
</ul>
</nav>
<div id="lang">English</div>
</div>
</header>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #336699;
}
header{
background-image:url('../IMG/bg_top.png');
height: 90px;
}
nav > ul{
float: left;
list-style-type:none;
margin:0;
margin-left: 10px;
padding:0;
color: #ffffff;
}
nav > ul > li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 10px;
}
.content{
margin: auto;
width: 940px;
padding-right: 10px;
padding-left: 10px;
}
#lang{
float: left;
}
#logo{
background-image:url('../IMG/logo.png');
height: 50px;
width: 180px;
float: left;
}
Try these suggestions from Smashing Magazine:
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
Specifically, try this code, using the TOP, LEFT, RIGHT, and BOTTOM properties to position your elements:
HTML
<div class="magix">
magix!
</div>
<div class="more-magix">
More Magix!
</div>
CSS
.magix{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
.more-magix {
background: blue;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 500px;
right: 0;
width: 100px;
}
OR, check out Chris Coiyer's methods:
http://css-tricks.com/centering-in-the-unknown/
I've been doing a site for tafe and I've gone over different ways to do this and none of them have worked so far. I am trying to add a button image to a list menu using div id but it just seems not to be working. This demo page is a online version of my page, Image menu is suppose to be on the left hand side with the text over it.
I am trying to put a image in a unordered list as a background image and it doesn't appear to be working.
I am trying to put it in this part of the css at the very ened
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Here is my html and my css:
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li>HOME</li><li>NEWS</li>
<li>
CONTACT</li><li>ABOUT</li></ul></div>
<div id="leftcolumn">
<div id="navcontainer">
<ul>
<li>Upcoming Events</li>
<li>Members</li>
<li>Specials</li>
<li>Who is Snap Nature</li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
CSS:
#charset "utf-8";
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
#wrapper {
background-color: #F90;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#header {
background-color: #6F0;
height: 124px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation {
background-color: #F3F;
float: left;
height: 25px;
width: 960px;
}
#leftcolumn {
background-color: #009;
float: left;
height: 350px;
width: 250px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#content {
background-color: #69F;
width: 710px;
float: left;
height: 350px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#footer {
background-color: #F00;
clear: both;
height: 25px;
width: 960px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 960px;
height: 0px;
}
#navigation li {
float: left;
background-color: #F3F;
}
#navigation a {
line-height: 25px;
text-decoration: none;
color: #000;
background-color: #F3F;
display: block;
text-align: center;
vertical-align: middle;
width: auto;
padding-right: 10px;
padding-left: 10px;
padding-top: 0px;
padding-bottom: 0px;
height: 25px;
}
#navigation a:hover {
color: #999;
text-decoration: none;
}
#navcontainer ul {
padding: 0px;
margin-left: 0px;
list-style-type: none;
width: 200px;
display: block;
line-height: 34px;
background-image: url(images/pg_menu_bg.png);
}
Please help TY
Jared
Edit:
Yes, this is exactly the problem. I just checked the link you posted, and the browser is looking for an image located at: http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - which doesn't exist.
See that "CSS" in there? I'm 99% sure that's unintentional. It's an absolute/relative path issue. Read on...
if your image is not appearing I'm gonna go out on a hunch and say it's because your image paths are messed up.
Solution:
This:
/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);
or maybe even this (depending on your file structure):
/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);
Explanation:
There is a big difference between:
background-image: url(images/pg_menu_bg.png);
and
background-image: url(/images/pg_menu_bg.png); /* note the leading slash */
The leading slash means an absolute path (ie. "path from your root domain url"), whereas no leading slash means a relative path (ie. "relative to the location of this file, in this case, your CSS file").
That means, presuming you have a file structure like this:
root
|
----images
| pg_menu_bg.png
|
----css
| mycss.css
from your css file, calling:
background-image: url(images/pg_menu_bg.png);
actually results in:
http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */
whereas calling:
background-image: url(/images/pg_menu_bg.png);
results in:
http://yourdomain.com/images/pg_menu_bg.png
So I think you need to have a look at your directory structure, and work from there. My guess is you need to use absolute paths.
But if you wanted to use relative paths with the dummy file structure above, you can use:
background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"
More info:Using relative URL in CSS file, what location is it relative to?
Second problem:
You have another issue, this style:
* {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
This style applies a blue background TO EVERY ELEMENT. So even if your paths to that background image are ok, they're being hidden by foreground elements with blue backgrounds.
Try change * to body:
body {
background-color: #6FF;
margin: 0px;
padding: 0px;
}
Note: if you actually want a margin:0; and padding:0; on every element, leave the above style as you had it (but remove the background-color), and define a new body style and put the background-color in there instead. Like this:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #6FF;
}
It's actually two part question regarding my simple page (that will be replaced some day with real content), HTML+CSS boilerplate used there for vertical centering and IE7.
http://engitize.net/
Can anyone provide detailed explanation why the page is displayed correctly in non-IE browsers (Chrome, Fx, Opera), almost all semi-recent to recent IEs (IE5.5, IE6, IE8, IE9), but not in IE7?
I am especially interested in: it works in IE6, yet it doesn't work in IE7, because... kind of explanation.
What should be changed to make div#c properly centered vertically in IE7?
I am using specific height for div#c, but used boilerplate is height-agnostic and fix should preserve this feature.
Spoiling other browsers is not an option, unless it's IE5.5 (ok, IE6 too, but only if it is really unavoidable).
Changing <!DOCTYPE html> and turning IEs into quirks mode is also not accepted (and it's a pretty bad practice for newly developed pages).
If you don't have IE7 (just as I), you can visit http://ipinfo.info/netrenderer/ or http://browserling.com/, paste URL there and choose IE7 to see the problem yourself.
Because the page will change after accepting some answer, I'm providing snapshot of relevant HTML and CSS parts from it (with logo URL changed to be absolute).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body { height: 100%; }
body { background-color: #fff; color: #000; margin: 0px; padding: 0px; }
div { margin: 0px; padding: 0px; }
#outer { position: relative; width: 100%; height: 100%; overflow: visible; }
#outer[id] { display: table; position: static; }
#middle { position: absolute; top: 50%; width: 100%; text-align: center; } /* for explorer only*/
#middle[id] { display: table-cell; vertical-align: middle; position: static; }
#c { position: relative; top: -50%; } /* for explorer only */
#c { width: 385px; height: 120px; margin-left: auto; margin-right: auto; }
#c { background-image: url(http://engitize.net/engitize.png); background-repeat: no-repeat; background-position: center top; }
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
</style>
</head>
<body>
<div id="outer"><div id="middle"><div id="c"><div>
because history is important!
</div></div></div></div>
<div id="footer"><div>
<p style="float:left;"><strong>Przemysław Pawełczyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div></div>
</body>
</html>
your Q#1 has been answered by #thirtydot, IE7 and below does not support the CSS table properties so another way has to be found for them. and his absolute positioning technique is usually the preferred way to do this as most times in a scenario like this (splash page?) the width and height of the centred content would be known.
addendum to above per comments:
In answer to why it was working in IE6 and not IE7 even though IE6 doesn't support the table properties either, IE7 was actually picking up the position: static rule from the #middle[id] {} rule - IE7 does understand this type of selector so this means the later absolute/relative positioning was not working the same as it was in IE6
Taking the above into account redoing the CSS to make sure IE7 and 6 got the same CSS and that it was placed later in cascade to override the "good" CSS it turns out the the positioning method is height agnostic too, in the comments there are various links to to test this, but here is the final working version:
Hybrid table cell/positioning method : here
That fiddle does include the image width and heights, but if you remove them and the positioning for the "sub text" it does (or should) show that whatever is in the middle does stay centered
HTML used is the same as the bottom of this answer.. minus the extra <i></i> element
CSS:
html, body { height: 100%; margin: 0; padding: 0;}
body { background-color: #fff; color: #000; }
#outer {
position: relative;
width: 100%;
height: 100%;
display: table;
}
#middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
#c {
width: 385px;
height: 120px;
margin: 0 auto;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
/**** for IE7 and below ****/
/* hacks but there is another method below */
#middle {
*position: absolute;
*top: 50%;
*width: 100%;
*text-align: center;
}
#c {
*position: relative;
*top: -50%;
}
/**** end IE7 and below rules ****/
#c div {
position: relative;
top: 100px;
width: 100%;
color: #666;
font-weight: bold;
font-family: serif;
font-size: 12px;
text-align: right;
}
#footer {
width: 100%;
text-align: center;
height: 15px;
padding: 5px 0 0 0;
margin: -20px auto 0 auto;
border: 0;
background-color: #def;
}
#footer div {
padding: 0px 5px 0px 5px;
text-align: right; font-size: 10px;
font-family: sans-serif;
}
#footer p {margin: 0;}
As pointed out in comments using the technique that the HTML5 boilerplate uses to class the HTML element conditionally see:
Conditional stylesheets vs CSS hacks?
Answer: Neither!
means you could replace the IE7 hacks with:
.ie6 #middle, .ie7 #middle {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
}
.ie6 #c, .ie7 #c {
position: relative;
top: -50%;
}
Original alternative - "Matchstick Technique"
You could likely mix the following technique with the "table-cell" technique via conditional comments or hacks, but this (hacky!) technique works across browser as far as my tests have seen
As you've asked for a height agnostic version.. you might or might not like the "matchstick" technique, this involves using inline blocks and lining them up.. the "matchstick" is a 100% high empty, off page, inline-block element with its vertical-alignment set to "middle" once it's in place the next inline-block (your actual content div) sits beside it and aligns to the middle or it, then using text-align: center; on it you have the horizontal centering too
here's a link to a working example fiddle
Note: I've left your widths intact, but you can test without widths/heights by removing the height & width off #c and also remove the CSS for the #c div text div - in a plain text scenario entering text into either of these divs should 'auto' centre.
and especially note the insertion of the extra <i></i> HTML just inside the outer div (that's likely why this is not a preferred method!), this is the "matchstick" that props the whole page open.
Code used in fiddle:
html, body { height: 100%; margin: 0; padding: 0; }
body { background-color: #fff; color: #000; }
#outer { position: relative; width: 100%; height: 100%;}
/* a matchstick spacer */
#outer i {
display: inline-block;
height: 100%;
width: 1px;
margin-left: -1px; /* to hide off page */
margin-right: -4px; /* to remove spacing between this and #middle block */
vertical-align: middle; /* will make inline block next to it center vertically */
background: #f00; /* red, not required just to see or not see it */
}
#middle {
display: inline-block;
width: 100%;
text-align: center;
vertical-align: middle;
}
/* image 385 * 120 */
#c {
display: inline-block;
/* presuming image heights, but it wouldn't matter if there was width/height here or not */
width: 385px;
height: 120px;
background: url(http://engitize.net/engitize.png) no-repeat 50% 50%;
}
#middle, #c { /* IE hack for inline block on block level elements */
*display: inline;
}
#c div { position: relative; top: 100px; width: 100%; color: #666; font-weight: bold; font-family: serif; font-size: 12px; text-align: right; }
#footer { width: 100%; text-align: center; height: 15px; padding: 5px 0 0 0; margin: -20px auto 0 auto; border: 0; background-color: #def; }
#footer div { padding: 0px 5px 0px 5px; text-align: right; font-size: 10px; font-family: sans-serif; }
a { text-decoration: none; color: #006; }
a:hover { color: #00c; }
p { margin: 0px; padding: 0px; }
HTML:
<div id="outer">
<i></i>
<div id="middle">
<div id="c"><div>
because history is important!
</div></div>
</div>
</div>
<div id="footer">
<div>
<p style="float:left;"><strong>Przemys?aw Pawe?czyk</strong>'s imprint | Coming in 2012!</p>
<p style="float:right;">Przemoc's network</p>
</div>
</div>
IE7 does not support display: table-cell, which you're using as part of your vertical centering technique.
Your page was relatively simple, so I simplified the HTML/CSS a lot. The centering now works properly everywhere I've tested it.
Complete code: http://jsbin.com/azuhe4
The line that's causing this behavior is...
position: static
...on the "#middle" CSS spec.
If I disable that line IE7 seems to render (more or less) the logo in the middle of the page.
It's the <!DOCTYPE>.
IE6 & 7 were a little flaky with that (that's what I've read, anyway).
If you do the following, you'll see things come around - with your code (no edits, save for a couple borders to see what's happening).
Here's what I did:
Deleted your <!DOCTYPE>
Added to your DIV {} CSS line - border:1px dotted gray
At your "outer", "middle", and "c" divs, a threw an inline border-color just to see which was which.
Hit Refresh
Then pasted <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">, and hit Refresh again. Looked fine to me. Centered vertically, horizontally.
As of April 20, 2011 W3C states <!DOCTYPE HTML> as "Not a Standard". Certainly, IE6/7 have no idea what that tag means. http://www.w3.org/QA/2002/04/valid-dtd-list.html
I got new and easy solution for that:
<style>
.vam{vertical-align:middle;}
</style>
<div style="line-height:200px; border:1px solid #000000; height:200px;
text-align:center;color:#FFFFFF; font-size:1px;">
.<img src="her-banner.jpg" alt="" class="vam" />
</div>