I am having problems placing a logo in my header. The header is in a span of 257px. It "appears" to place fine in Firefox/Chrome/Safari on both Mac and PC. With IE 8/9 it "appears" the problem exits. The twist here is that it actually works in IE and not the other browsers. I really need at least 21px for the padding-top.
With the CSS below, IE is actually correctly rendering it but all the other browsers are adding close to 20px in the padding-top.
The CSS as it stands now, after many different iterations is.
.img {
display: block;
padding: 1px 0 21px 8px;
width: 200px;
height: 40px;
}
Any help tracking this down would be appreciated.
how about using absolute positioning withing a relative positioned span/div?
say for example:
<div style="position:relative;">
<img src="..." style="position: absolute; top: 21px">
</div>
this would place the image 21px from the top of the parent div.
to illustrate it better. i made a jsfiddle
http://jsfiddle.net/RD26R/
Related
I'm experiencing a really annoying bug that seems to only happen on Windows and OS X: the z-index of an element whose parent has fixed position doesn't work on Chrome! I converted my odd situation to a simple code:
html:
<div id="mask">
</div>
<div id="box">
<div class="below-mask circle">
should be below the mask
</div>
<div class="above-mask circle">
should be above the mask
</div>
</div>
css:
body {
font-family: Verdana;
font-size: 9px;
margin: 0px;
}
#box {
position: fixed;
}
#mask {
position: absolute;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 9998;
}
.circle {
position: relative;
background-color: rgba(255, 204, 0, 0.75);
border-radius: 75px;
line-height: 150px;
margin: 50px;
text-align: center;
width: 150px;
height: 150px;
}
.above-mask {
z-index: 9999;
}
.below-mask {
z-index: 9997;
}
sandbox: http://jsfiddle.net/gibatronic/umbgp/
I tested on Internet Explorer 9, Firefox 15, Opera 12.02 and Safari 5.1.7 on OS X and Windows and all of them displayed as expected.
I also tested on Ubuntu 12.10 and it worked just fine for every browser including Chrome!
I even tested on Kindle 4 browser and it worked!
I wonder if anyone knows any kind of fix to workaround this issue!
one800higgins's answer is along the right lines. The real answer is that on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is auto. So the stacking context hierarchy looks like this:
document root (z-index 0)
#mask (z-index 9998)
#box (z-index 0)
.above-mask (z-index 9999)
.below-mask (z-index 9997)
That means that 9998 is never compared with 9999 or 9997 to determine stacking order. Instead, 9999 is compared with 9997 to determine which of .above-mask and .below-mask is further in front, and then once everything inside #box is stacked in that context, it's treated as a single layer at z-index 0 which gets stacked behind #mask at z-index 9998.
This also explains why #TheNextBillGates's answer of moving #mask inside #box works - because then #mask is in the same stacking context as .above-mask and .below-mask. I highly recommend the above link for more comprehensive details, and you should also see the announcement for the stacking change for fixed elements in Chrome.
I just came across this bug, and its still happening in Google Chrome v26. I could set the z-index as high as I wanted to from code or Chrome's CSS editor and it made no difference (and the element's position was set to absolute). The same z-index setting was working as expected in Firefox and even IE8-IE10. When I switched the parent element from position:fixed to position:absolute then the child element's z-index worked fine in Chrome.
If you move the #mask inside of the #box it works just fine.
<div id="box">
<div id="mask"> </div>
<div class="below-mask circle">should be below the mask</div>
<div class="above-mask circle">should be above the mask</div>
</div>
Here's a fiddle http://jsfiddle.net/TheNextBillGates/jKm4b/
Not sure why this is just yet.
Assign a z-index to your fixed div. That should cause chrome to respect the z-index values for all it's children as well.
The multiple z-index stacks is unfortunate and confusing in my opinion, however you may be able to solve this without changing your html structure if you raise the z-index of any of the target element's parents. Try to find a parent element that is a sibling of the troublesome element overlapping your content. Apply this styling:
position: relative; z-index: [# higher than overlapping element's z-index];
Your milage may vary depending on your project, however this solution worked for my project.
I think its because its not at the bottom of the page like modal windows are suppose to be. Easy fix is to just grab all of the modal windows and throw them into a div before the ending body tag. Example below fixes every chrome issue i have.
$('body').append('<div id="modelContainer" />');
$('.modal').each(function() {
$(this).appendTo('#modelContainer');
})
Change or remove the position: fixed on #box, and you're set.
jsFiddle
I have a problem with an absolutely positioned DIV - it's not sitting in exactly the same spot across browsers. The issue is that most of my content is being generated by a JSP file and I have to apply the CSS and create my content in a CMS, outside of this file. Here's how the code is structured:
<div id="automatic-container">
<div class="one">
<div class="oneWeird"></div>
<div id="content-container">
<div id="some-content1"></div>
<div id="some-content2"></div>
</div>
<div id="absolutely-position">plain text is inserted here via JSP file, wrapped only in div tags. adding/styling p tags does not help</div>
</div>
</div>
Everything other than the "content-container" is automatically generated by a JSP file. The content in the "absolutely-position" div should be laid on top of the content in "content container" and sit in a specific spot. oneWeird is a div being created by the JSP that seems to serve no purpose that I can tell...
I have applied the following CSS and the absolutely-position DIV is off by a few pixels in every browser (I checked Chrome, IE7,8,9, FF, Safari). It matches in Chrome, Safari & IE8. In FF, it's about 3 pixels higher, IE 9 it's 5 pixels higher, and in IE7 it's dropped down by about 10 pixels.
#automatic-container{position: relative; padding: 0px; margin: 0px auto;}
#automatic-container div.one {position: relative; padding: 0px; margin: 0px auto;}
#automatic-container div.one div.oneWeird{display: none;}
#content-container{margin: 0px auto; width: 848px; height: 354px; background:url('bkg_confirm.jpg') no-repeat; font-family: Helvetica,Arial,sans-serif; position: relative; padding: 0;}
#some-content1{position: relative; margin: 0px; text-align: center; padding: 0; width: 490px; height: 354px; left: 343px; top: 30px;}
#some-content2 {position: relative; width: 490px; height: 55px; border-top: 1px solid #cccccc; padding: 0px; margin: 60px 0 0 0; overflow:hidden;}
#absolutely-position{height: 20px; left: 420px; position: absolute; text-align: center;top: 125px; width: 465px;font-weight: bold; padding: 0px; margin: 0px;}
Any ideas on how to get the absolutely position DIV consistent across browsers? None of the articles I've found on SO or elsewhere have been helpful. I have tried changing the positioning to relative and using z-index, but that also produced inconsistent results. My code is clean when I run it through online validation as well.
Thanks in advance for any help.
Apply a reset: http://meyerweb.com/eric/tools/css/reset/ or Normalize.css http://necolas.github.com/normalize.css/ to your pages before applying your normal css. I almost gaurantee what you're running up against is the different default styles different browsers use.
What a reset does is sets all styles to a baseline before you start applying your own styles. So if Chrome applies x amount of margin to an element and IE applies Y amount the reset puts them both at 0. The downside is every element that you use has to be restyled. For example lists no longer have a default style, nor do block quotes etc.
Normalize.css is a little easier for newcomers to use because it sets base styles for everything much like a reset does but it gives most things a style rather than just setting them to 0, so your lists will still be indented with a bullet but they will look the same on all browsers (or should.)
I'm trying to AP a div in the header of my blog containing a bg image and a link. I looks correct in Chrome, but incorrect in Safari and Firefox. I suspect it's not the AP div itself but other elements causing the shift, though I can't figure out what, and I'm using a reset.
Here's a link to screenshots show you what I'm talking about:
http://imgur.com/a/hP8dM
Here's a link to the website:
http://www.artyst-tyrant.com/blog
Here's the css I'm using:
#trex-blog {
margin-left: 435px;
position: absolute;
top: 50px;
z-index: 50000;
}
#trex-blog a, #trex-blog a:visited, #trex-blog a:hover {
background: url(../img/blog-trex.png) no-repeat scroll 0 0 transparent;
display: block;
height: 121px;
width: 356px;
font-size: 0;
line-height: 0;
overflow: hidden;
text-indent: -9999px;
}
Here's the html
<div id="trex-blog">Artyst Tyrant - Victor Beazzo Designer for Hire</div>
Designer by trade who's trying his hand at learning to code, but I'm by no means a pro, so please, go easy.
Thank you in advance for your help, it's really appreciated.
Chrome v18 on Win7 renders the image in the same place as my other browsers - perhaps you were browsing a cached version on chrome only?
The only caveat to absolute positioning elements is if they are wrapped in a relatively positioned element - then the absolute position is relative to the parent - http://css-tricks.com/absolute-positioning-inside-relative-positioning/
I looked at your source code and didn't notice any position relative attributes on the parent elements.
I adjusted the css top attribute value to 20px and it aligned for me in all current browsers.
I have been searching for an answer for a good hour without luck so It may be OK to ask my silly question:
I am trying to overlay a legend over a map. The map is generated with openlayers and lives in a div called map. the legend is an html table but could be a picture as well and lives in another div called legend.
hence the HTML
<body>
<div id="map"></div>
<div id="legend"></div>
</body>
and the CSS
* {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: none;
font-family: Arial;
font-size: 9px;
text-decoration: none;
text-align: left;
}
html, body {
background-color: red;
}
#map{
position:relative;
}
#legend{
position:absolute;
top: 1%;
left: 100px;
}
This works just fine in Firefox, Safari and Chrome, but not in IE8.
In IE8 the legend is shown in its place, the red page background is behind but the map div has disappeared. Note that IE still loads the map tiles etc but seems to be putting them either behind the background or somewhere not on the screen...
If you have any suggestions, greatly appreciated!
Without the whole HTML page, it can be hard to give you a correct answer, to know what's exactly going on. Though you can use conditional IE tags to make your design work in Internet Explorer. More information here.
You will find that most IE8 quirks can be fixed by changing the positioning by a few pixels, position type, the display: value, or making elements at display:none;.
Firebug is your friend.
I'm working on a web version of an old document, and it has sidenotes. I've managed to get it looking right in Firefox and Chrome, but there's a problem with printing: the sidenotes are all jammed together at the top of the first page (image).
I've put up the first section of the old document here, so that you can try it out yourself: http://www.dinkypage.com/117588. As you will see with Print Preview, the paragraph numbers and page numbers work fine (with only one minor problem), it's just the sidenotes that are causing a major problem.
I think the code is fairly easy to understand, but here's the most important snippet of the CSS style:
.sidenote, .widenote {
position: absolute;
left: 745px;
margin-top: 12px;
text-align: left;
line-height: 1.17em;
font-size: 12px;}
.sidenote {width: 200px;}
.widenote {width: 400px;}
.sidenote span, .widenote span {
display: block;
position: relative;
text-indent: 5px;
padding: 0px 0px 8px 0px}
I've messed with the position:relatives and the position:absolutes, but I can't get it to work properly. Any help would be appreciated. Thanks!
EDIT: I've put it up on jsfiddle, but it refuses to increment the page numbers for some reason: http://jsfiddle.net/KDzRp/
You need to specity "top" for ".sidenote, .widenote", FF and Chrome can determine the Top of your absolutely positioned element by it's appearance in the HTML, but older browsers (and apparently your printer) can not do so.
When using position:absolute always take care of both "hoziontal (left/right)" and "vertical (top/bottom)" position.
If you can not specify the exact top position of your site/wide notes, you need to wrap each page in a position:relative container and give top:0 to your sidenotes.:
<div class='page'>
<p>...</p>
<aside class='sidenote'>...</aside>
</div>
.page {position:relative;}
.sidenote {position:absolute; top:0; right:0; ...}
this way your sidenote will stick to the top of it's own section.