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.
Related
I'm wondering if this is a bug or (more likely) a misunderstanding in using the dev tools / CSS. I was playing around with a JSFiddle with the following style:
div.notrelative {
height: 100px;
width: 100px;
background: #eaf;
margin: 50px;
font-size: 9px;
position:relative;
font-family: Arial;
}
body {
margin:30px;
}
div.absolute {
height: 20px;
width: 20px;
position: absolute;
background: #eea;
margin-bottom: 10px;
top: 0;
left: 0;
and I was looking at the highlighted areas in dev tools both on JSFiddle and on a local copy, and I noticed something strange. Chrome was only highlighting a portion of the body in blue (after the top margin by the child element but strangely not the left margin), despite the body taking up the entire page (as seen by the gray background color). However, just creating something simple like a border around the body completely seems to fix the highlighting issue. Is there a reason why Chrome highlights differently in the two cases?
Margin collapsing causes div.notrelative to extend its margins outside of <body> vertically and push <html> to be bigger than <body>. Thus, when you highlight <body>, the area beyond <body> but within <html> is not highlighted. That unhighlighted area represents the margins of div.notrelative. Adding borders prevents margin collapsing in the case of parent and first/last child.
As for why that area outside <body> is affected by its background-color, based on the answer here, it is because <html> takes the background-color of <body>.
In my application, I have a few icons that are drawn on every page. For performance reasons, I have them grouped into a single file and drawn as CSS sprites. For some reason, IE will occassionally draw them incorrectly. If you zoom in on the image, it looks like IE is off by 1 pixel.
This only happens in IE, does not happen in Chrome.
The behavior in IE is inconsistent. For some people, the icons are drawn correctly.
Here is some sample CSS:
.bannerIconLogout {
height: 13px;
width: 12px;
margin-right: 2px;
background-image: url("#{resource['images/common-images.png']}");
background-position: 0px -13px;
position: relative;
top: 1px;
}
Has anyone else seen this? Is there a way to work around it?
I have a problem with an link's background.
For my exam this must work on all browsers down to IE 6. Problem is I am using a background image that should be positioned on the left of the links, but if the link is longer than one line IE 6 gets confused and positions the background image centered left, not top left...
I am using a 2colors .gif image and the anchor tag is located as follows
<style>
#right-menu {
float:left; width: 260px; border: 1px solid #e7e7e7; margin-left: 20px;
padding: 15px 20px;
background-color: #f6f6f6; min-height: 715px;
}
#right-menu .title {
font-size: 1.5em; color: #4a493f; font-weight: bold;
}
#right-menu a {
color: #4b4a41; font-size: 1em; padding-left: 15px;
background: url(../assets/bullet2.gif) left no-repeat;
display: inline;
}
</style>
<div id = "right-menu">
<h3 class = "title">
recent comments
</h3>
<ul>
<li>
<a href = '#' title = 'title'>
Etiam placerataaaaaaaaaaaaaaaaaaaaaaaaaaaaaa...
</a>
</li>
...
</ul>
</div>
If it cannot be done I will still appreciate someone stopping me from trying again and again.
Thank you for your time!
According to this article, several versions of IE just don't do the right things when rendering background images on multiline inline elements. There are several possible work-around mentioned in the article. The simplest looks to be using inline-block as the display style, but you can see the other work-arounds in the article.
There is also plenty written on the web about this issue so with the right Google search ("inline element background image"), you can find many other articles.
You also may want to make sure a background image is top/left by specifying both top and left:
You have this:
background: url(../assets/bullet2.gif) left no-repeat;
Might as well use this:
background: url(../assets/bullet2.gif) left top no-repeat;
It looks like top/left is supposed to be the default, but it doesn't hurt to specify what you want.
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.
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/