I wonder why does this style not work in IE and FF, but in Chrome ONLY
#show{top:10%; position:relative; margin: 0px auto; width:100%;}
[Edit]
If I want to make the same work in IE and FF, what do I have to do
Thanks
Jean
Can you provide the relevant HTML markup too? And which version of IE you are using.
One problem could be additional CSS styling that the element with ID 'show' inherits.
To separate styles between IE and FF, Chrome, etc use Conditional Comments.
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
This will tell IE to use a different stylesheet than IE, FF and other browsers.
IE is a beast that won't work without some trial and error, so set up that stylesheet and play with it til it does what you want.
To separate styles within your stylesheet, use this; it's a great resource and has helped me a great deal! CSS browser selectors. It's a Javascript plugin that will read any styles that start with .webkit, .ie, etc and apply those styles only to that browser.
Are you trying to position your #show div 10% down from the top of it's containing div? If so try this:
html:
<div id=#your_container>
<div id=#show>
Content
</div>
</div>
css:
#your_container {height: 200px; position: relative}
#show {top: 10%; position: absolute}
top:10%; position:relative;
10% of what? For a relative-positioned element, percentage dimensions are measured relative to the parent element's size. Does the parent element have a height: applied? If it doesn't, that's why you're getting no movement: you're saying “move the top by 10% of ‘auto’, which is an indeterminate amount”.
If you want 10% of the browser viewport height, you must tell every element between the root html and the element you're positioning to use the full height of its parent. ie.:
html, body { height: 100%; }
Related
A third party product outputs a webpage with iframes and I'm not in full control of the content. The main iframe is missing doctype declaration and this forces IE8 into quirks mode.
I'm maintaining a javascript application that adds several buttons to the right edge of the screen. The problem is that the layout is off in IE8 quirks mode. The buttons are not visible (probably due to incorrect IE z-index behavior) and their position is off.
I was thinking about creating a separate CSS for IE8. How should I go about tuning the CSS for quirks mode?
If you do have control over the (separate) Javascript files, and presuming that a JS file is already called in the head, you could set a conditional class on the html element, like this:
<html>
<head>
<title>Demo Conditional Class Quirks Mode</title>
<script type="text/javascript" src="folder/js_file.js"></script>
<style type="text/css">
div {
width: 100px;
height: 100px;
background: red;
position: relative;
left: 100px;
}
.ieQM div {
left: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
While adding this to the js_file.js:
if (document.documentMode == 5)
document.documentElement.className += ' ieQM'; // IE in Quirks Mode
.
By the way, I wonder whether it is just a problem in IE8, the document not having a doctype? Don't all IEs revert to quirks mode without it?
a little css problem that i cannot quite find on SO - although I assume it has been asked before, apologies.
So, here is the html:
<html>
<body style="color:white">
<div class="a" style="width: 70%; background: blue;"><p>helloes helloes helloes</p></div>
<div class="b" style="width: 70%; background: pink;"><p>talk talk talk</p></div>
<div class="a" style="width: 70%; background: blue;"><p>yay! yay! yay!</p></div>
</body>
</html>
lovely.
If i open this in ff, i get three vertically stacked divs - but with space in between them! This is not what i wanted! Drama-rama!
ie renders this as i'd expect, which raises some alarm bells.
ie is 9, ff is 11
cheers,
andrew!
UPDATE a lot of mentioning the "p" tag - why/how is the p tag affecting anything? Isn't it wrapped by the div, and the div has the background color applied? Shouldn't, in fact, the div just be internally bigger, but with no space between adjacent divs?
UPDATE:
So i tried this html instead:
<html style="margin:0px; padding:0px;">
which didn't fix the issue, and also this:
<body style="color: white; margin:0px; padding:0px;">
which also didn't fix the issue - shouldn't the css be inherited by the "p" tag in both cases? Interestingly, i also examined the resultant css with firebug, and the p tags all have a margin and padding of 0...
ideas?
UPDATE: a lot of responses asking me to set padding to 0. This doesn't work. Any more answers stating that and i'll down vote 'em.
UPDATE: the question is really specific about using inline css. I don't actually care for inline css myself, but why is everybody providing css stylesheets for their answer?
UPDATE: somebody mentioned -webkit, and while i'm not using a google chrome at all, it is an interesting idea. I cannot see any ff related extra css that might be causing this problem, anybody have any ideas?
I tried it with Chrome and saw the same behavior. After looking at the underlying CSS (F12), Chrome is applying the following two lines to the <p> tag:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
If I add the following to the css the blank lines go away:
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
Hope that helps!
Basically the P tags are by default taking margin. Add css
p{margin:0px; padding:0px;}
This is because of the auto-generated margin of a <p> element.
Firefox (and others) do this differently than IE.
You can "reset" this simply by doing a p{margin: 0} in your css.
You can do the same for all elements at once (which I recommend) by simply adding * { margin: 0; padding: 0;} in your css.
Small tip: Install a browser extension to inspect the behavior of your elements such as Firebug.
Your <p> tags have vertical margins. Vertical margins in CSS collapse, so that child margins can sometimes apply to parents. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins
I resolved this be specifying a CSS 'line-height' I just set it to the same as the font size and then I got consistent DIV spacing across all browsers.
I want to implement a empty div with background color in it.
<html>
<head>
<style>
.dark_green {
background-color: #00D100;
width: 20px;
height: 4px;
}
</style>
</head>
<body>
<div class="dark_green"></div>
</body>
</html>
Under IE7/8/9 the height of this div is not 4px, it automatically change to 19px; Under FF and other chrome it is right.
Any suggestions?
It kind of depends on what you are trying to do. There are a few things that would work:
.dark_green {
[...]
line-height:4px;
}
or
.dark_green {
[...]
overflow:hidden;
}
Would both work.
The reason this is happening is because the text in your DIV (even if it's just whitespace) has a rendered line-height of 19px. The problem browsers are using that value instead of what you are setting as a fallback to not cut off text. Telling the browser that you want the text smaller (font-size:4px;), the line height smaller (line-height:4px;), or the text to get cut off (overflow:hidden;) should correct the issue.
The reasons I wouldn't use font-size in this context are:
It only works because the the line-height that is inherited when you
apply the new font size, so you might as well just set the correct
property.
Certain browsers have a minimum font size which is larger than 4px
(11px on FF, not sure if you can set this in IE), meaning that if
the user had a larger minimum set, your fix wouldn't work.
Add a doctype as the very first line such as <!DOCTYPE html>, to escape quirks mode. This is an important thing to do, or you'll have endless problems with IE.
Once you've done this, your original code will work in IE7 and greater just like it does in Firefox/Chrome.
I found this solution:
font-size: 4px;
add any item to the div you want to collapse, and set the display on that element to none.
if your problem div is
<div class="collapseToZero"></div>
Add something like this:
<span class="nothing"></span>
and add this style for the class
.nothing{display:none;}
and your resulting HTML will look like this
<div class="collapseToZero">
<span class="nothing"></span>
</div>
Now ie 7 will render your problem div with a height of zero instead of font size.
Another way - just to throw this into the mix: add an empty comment as the divs content. Yes its adding extra markup but it does work:
<div><!-- --></div>
I have a navigation with a padding-top: 148px; in Firefox, Chrome, Safari, IE 9 & 8 its looks perfect, but in IE 7 its gives it too much, you can see an example of this at http://willruppelglass.com/index.php why is it doing this and how do I fix it?
Here is the CSS
.headerNav{
color:#000;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
Any help would appreciated, thanks in advanced.
Try to use below structure and adjust the padding of the <div class="headerNav"></div> because the upper elements have float:left property and you are using padding-top:148px; in IE7 the padding is applying inside the headerNav itself in comparison of other browsers.
In other browsers the padding is applying from the top of view port.
<div class="headerText"></div>
<div style="clear:both"></div> <!--this will clear the floating property for below elements and make the space and adjust all the elements below this div -->
<div class="headerNav"></div>
In below image (IE7) you can see the padding-top:148; is applying with in the div not from the top of the body.
See the padding-top:148px applying from the top of the body/viewport. in below image (Firefox)
I have html that looks like this:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Some title thing, who knows</h1>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</header>
</body>
</html>
If I give header an auto margin and a width, it's horizontally centered. What's the least horrible way to ensure that it's vertically centered, as well?
I am aware of the following articles which provide some discussion of the topic:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
http://www.vanseodesign.com/css/vertical-centering/
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
http://www.brunildo.org/test/vertmiddle.html
Since this question was tagged CSS3, here's a "least horrible" solution using CSS3's "flexbox". Unfortunately only recent versions of Safari, Chrome and Firefox support it.
html, body {
margin:0;
padding:0;
height:100%;
background:#eee;
}
header {
width:30em;
background:#fff;
}
body {
display:box;
box-pack:center;
box-align:center;
box-orient:horizontal;
}
A more complete demo can be found here.
If you do NOT know the height of the header the only way I often use, requires extra html if done properly, tough you could do without.
You make the header vertical-align: middle by making it a table-cell
html{
height: 100%;
}
body {
display: table;
height: 100%;
margin: 0 auto;
padding: 0;
}
header {
display: table-cell;
vertical-align: middle;
}
note that I set 100% height on the html node, which really isnt proper css as far as I know, it should be on the body and header should be in a encapsulating div wich has display: table http://jsfiddle.net/bgYPR/2/
Unfortunately, there's still nothing elegant for vertical alignment, only hacks.
I don't know if there's a best way, but there are a number of different ways (depending on your situation), and many are thoroughly discussed in this article.
Usually when I need vertical centering I use a pair of inline-block elements. You have one element that is the full height of the container, and a second element that is only the height of the content to be centered. Both are display:inline-block;vertical-align:middle.
I like to use b tags for this, because they have no semantic significance and are tiny:
<style>
.mycontainer {text-align:center;}
b.vcenter {display:inline-block;height:100%;width:1px;vertical-align:middle;}
b.vcenter+b {display:inline-block;vertical-align:middle;}
</style>
<div class="mycontainer">
<b class="vcenter"></b><b>This is my centered content<br>It makes me happy!</b>
</div>
Mind you, this specific code example wont work in IE7 because of the lack of inline-block and sibling selectors (+), but the same technique can be done using more complex code that IE7 will handle.
I would generally not verticially center, but specify a small top margin like 20px. We don't always know enough about the end user's equipment to make an assumption about what is convenient or usable for the platform they are viewing the site on.