I often look at code and see stuff like "-moz such and such CSS rules, -webkit such and such CSS rules" and think I need to do something like that in my case.
My page http://scope-stage.scholastic.com/ needs to appear as it does in firefox, but when I look at it in Chrome and Safari, it's completely backwards. In Firefox I could not get the margins how I wanted them to be with regular margins, that is - I had to use negative integers for the margins. What can I do to have the margins be the same in all browsers?
Here's my CSS on just one of the divs (I think I can apply any answer to the rest)
.colorScheme {background-color:#B9E9DA; width:500px; height: 340px; margin-top:-45px; padding:0;}
but you will clearly see the brokenness of it when you look at it in any browser other than FF.
Thanks for looking and helping.
I'm not 100% sure on this you will have to test but I believe you can solve your problem as follows.
* {
margin:0;
padding:0;
}
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin-top:-45px;
padding:0;
}
This will set all elements to have no padding or margin. Giving you control using CSS for all paddings and margins.
Alternatively you can just assign hardcoded to the single class but you will need to assign a value to EACH margin/Padding as follows
.colorScheme {
background-color:#B9E9DA;
width:500px;
height: 340px;
margin:-45px 0 0 0;
padding:0;
}
Try those and see if they work out for you.
Related
This has probably been asked a million and one times, but I would appreciate it if someone could explain the behavior of the divs to me..
I have a container div which I am aligning in the center of the page, which has a gap between the top and the top of the page. I want it to be flush against the top of the page. I am assuming that there is some sort of margin or padding that I need to remove but I can't think what it could be. Even with nothing in the div there is still a gap.
<body>
<div id='mainContent'>
</div>
</body>
body
{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
}
#mainContent
{
width:1200px;
height:500px;
background-color:#FFFFFF;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
Here is a JSFiddle to give you an idea of what I mean.
Can someone please explain why the div is pushed down as it is? Is there a robust solution that doesn't affect any content that is put in the div??
NOTE: If the screen width is smaller than the div width, there will be a gap on the left hand side aswell.
You need to reset the default margin of the body that is 8px aprox.
body,html {
margin:0;
padding:0;
}
The Demo http://jsfiddle.net/H76bq/3/
For default all elements has some properties:
http://www.w3.org/TR/CSS21/sample.html
You can reset this in your own css.
You could use a star selector and reset everything so that you can set everything yourself:
* { margin: 0; padding: 0; border: none; }
Or if you wanted to use a master reset stylesheet you could use Jonathan Neal's Normalize CSS via Google CDN.
Normalize.css is a customisable CSS file that makes browsers render all
elements more consistently and in line with modern standards. We researched
the differences between default browser styles in order to precisely target
only the styles that need normalizing.
Just put this in your head:
<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />
Add margin: 0px; to body like below. The reason is because body by default introduces a margin.
body{
background-color:black;
background-image:url("img/background.jpg");
background-repeat:repeat;
margin: 0;
}
Demo Fiddle
It can also been caused by line-height property.
So set the line-height to as you wish!
I had similar problem and I solved it by setting negative margin. You could test the below setting.
#mainContent {... margin-top:-25px;}
I have two styles defined:
img.feedback-sprite-22{
display:block;
background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
height:22px;
border:0 !important;
padding:0;
margin:0 !important;
z-index:0;
}
img.feedback-sprite-22:hover{
background-position:0px -22px;
}
img.fb {
display:inline;
margin:auto 0;
border: none !important;
vertical-align: middle;
}
And I display the image like so:
<img class='fb feedback-sprite-22' height='22' width='65'>
Works great in ff & chrome but not ie (i've tested ie10 and ie8). IE shows the image (is it a simple gradient), but also shows the square img missing box (see below). Any ideas how to fix this? Thanks in advance.
Because you have no src in your img tag, which is needed.
Use div <div class="fb feedback-sprite-22"></div> instead of img. And define width and height in css. If you realy want to do it using css...
But in my opinion you should use clear img - like <img src="/img/feedback-sprite-22.png" alt=""> and not background in css for element like this.
If its just a gradient, why not using a CSS, gradient?
http://www.colorzilla.com/gradient-editor/
With support for every broweser including IE6-10
So the answer, I've discovered, as Choinek pointed out, is that IMG obviously has to have 'src' defined for IE. I assigned it to blank.gif and all is good. Since I already use a blank.gif on the site, it isn't another image to load.
However, I really like the idea of using a CSS gradient. This would reduce the number of images (always good).
I have a div under a float:right div. For some reason, the top margin cannot be applied to the first div. here is the css
#over{
width:80%;
float:right;
color:#e68200;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:10px auto; /*does not work!!!*/
width:95px;
height:20px;
}
does anyone know what's going on?
Floated things are kind of floated out of the normal layout, so generally don't affect other things that aren't floated like them. Of course the float behaviour in different browsers differs, but that's the general idea.
After the floated div you'd need something (like an empty div) that will clear the float (has style="clear:both;").
However, like I said, browser behaviour will still vary, on where it then decides the margin should be counted from. There are of course workarounds for that. See this page for more on that.
A solution without extra <div>
What you see, is the problem of collapsing vertical margins in CSS3. This problem will be more easily solved with the advent of CSS4. In the mean time, it is not a good idea to add an extra <div>, as easy as it may sound. It is generally better to keep content and presentation strictly separated.
Here is how I solved this issue on my website. The solution exploits the absence of vertical margin collapse inside inline blocks.
#under should contain at least the following items:
#under {
clear: both;
display: inline-block;
width: 100%;
}
try this css snipe, i think this will solve your problem.
#over{
width:80%;
float:right;
color:#e68200;
background-color:#234fdd;
height:auto;
margin-bottom:30px;
}
#under{
clear:both;
background:url(../images/anazitisi.png) no-repeat;
margin:auto;
width:200px;
height:20px;
background-color:#23ffff;
}
there seem to be a few posts on this subject but i can't find anything conclusive one way or the other, so thought i'd try on here for someone far more knowledgeable in CSS than me! I have 3 container divs which have background images to give the impression of a tapered out line effect at the top and bottom of the main content. I can't get the middle div to dynamically expand as far as i need it to, it seems to need a specific height. Is there any way to get height: auto or 100% working on this? The site is here - thanks!
Edit: Sorry, you are trying to stretch the background image.
The technique is to remove the float:right; style and add a margin to the left:
#main_body {
float: right; //remove this
margin-left: 320px; //add this
}
-works on Chrome
There are solutions described. You can use pure css to do it or even use javascript.
I am considering that you are only requiring a css solution. Try the following CSS.
body {
margin:0;
padding:0;
height:100%;
}
or
html{
width:100%;
height:100%;
}
or check out this link, a better solution. Click here
http://redlineautoleasing.com/beta/
what could be causing the bottom scrollbar? i cant figure it out.
i tried this
http://blog.josh420.com/archives/2007/11/fixing-the-ie-overflow-vertical-scrollbar-bug.aspx
but the page kind of got messed up the bottom content got chopped off.
From your CSS:
body {
background-color:black;
background-image:url(../images/contentbg.jpg);
background-repeat:repeat-x;
height:536px;
background-position:top left;
color:white;
}
try adding overflow-x: hidden; and possibly also width: 100%;
or try adding
html{
width:100%;
overflow-x: hidden;
}
play around with these, the right combination should make it work OK.
It looks like your CSS has several things with large widths or margins which could be invisibly going off the side of the page - most likely a positioning difference between IE and other browsers.
In firefox, the firebug addon allows you to inspect all the elements of your page. If there's something like that for IE it should help you identify the offending element. Otherwise, maybe try setting all borders to a width of 1 pixel with various colours to try to highlight which element is sitting out there.
Had the same problem and this solved it for me:
html
{
overflow: auto;
}