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.)
Related
Why exactly is the padding calculated differently between a and button elements?
HTML
<button type="button">CLICK</button>
LINK
CSS
button {
padding: 10px;
height: 30px;
border: 0;
background: #ccc;
line-height: 30px;
}
a {
display: inline-block;
padding: 10px;
height: 30px;
background: #ccc;
line-height: 30px;
}
The default box-sizing value for buttons in Chrome (and Firefox) is border-box:
DEMO
I.e. the total height, including padding (and border and margin), of the element is 30px, not 50px like for the link. You can fix this by setting
box-sizing: content-box;
explicitly.
DEMO
More info about the box model.
Why the border-box is the default value I cannot say. I haven't found a specification for it. Chrome, Firefox and Safari seem to do this (didn't test other browsers).
<a href...>
Links never have a set-height, if you inspect the html, you can see that; what is really done is giving it a line-height and padding. when you write height: 30px, it is useless.
With respect to that, you are defining a height for the <button>, which is why it does not look the same as how you styled your link
Here is a fiddle to show how to make them the same, by removing the set-height of the <button>
Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting A to take up 70% of the remaining space and B the remaining 30%?
EDIT: Accepted the answer a little early before I actually tried. Whoops.
JSFiddles:
A Tale of Two Divs
Now separated, but now with the second one on a second line?
Try this out if it solves your problem.
<html>
<head>
<style type="text/css">
#Content
{
border: 3px solid blue;
position: relative;
height: 300px;
}
#divA
{
border: 3px solid red;
position: absolute;
margin-right: 25px;
left: 5px;
top: 5px;
bottom: 5px;
right: 70%;
}
#divB
{
border: 3px solid green;
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
left: 30%;
margin-left: 25px;
}
</style>
</head>
<body>
<div id="Content">
<div id="divA">
</div>
<div id="divB">
</div>
</div>
</body>
</html>
just set the margin-left or padding-left of div B
I believe your selected answer will not work:
http://jsfiddle.net/cNsXh/
edit:
Sorry, the above example was not correct at first. Now it is.
/edit
As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we're mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.
You'll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:
http://jsfiddle.net/k7LRz/
This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3's box-model will provide more flexible options here. But, admittedly, I'm not sure yet about cross-browser support for these new features.
#wrongusername; i know you accept that answer but you can check this solution as well in this you have no need to give extra mark-up & if you give padding to your div it's not affect the structure.
CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/
http://jsfiddle.net/efortis/HJDWM/
#divA{
width: 69%;
}
#divB{
width: 29%;
margin-left: 2%;
}
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/
Hey all - I've been googling this as much as possible, but nothing I do seems to help.
I've been working on a website (www.philipdukes.co.uk), and although the nav seems to work fine in FF, Safari, chrome, even IE6 (miraculously), on my system here it fails miserably in IE8: the navigation links don't work.
I hover on them, get the rollover animation, but they're not "clickable". They're basic text links, text-aligned off the screen, and then the area that they represent should be clickable. The image that fills the space isn't the link. If I remove the image I can click the area, and if I remove the text-align I can click the link text (but only the link text).
It's driving me nuts, as its the last thing I need to sort before everythings fully working...
The code for the nav bar is here:
<div class="navHolder">
<div class="nav current-home">
<div id="home"><img src="images/nav/home.png" alt="home." />home.</div>
<div id="bio"><img src="images/nav/bio.png" alt="biography." />biography.</div>
<div id="media"><img src="images/nav/media.png" alt="media." />media.</div>
</div>
<div class="nav2 current-home">
<div id="press"><img src="images/nav/press.png" alt="press." />press.</div>
<div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." />Plane Dukes Rahman Trio.</div>
<div id="contact"><img src="images/nav/contact.png" alt="contact." />contact.</div>
</div>
and the css styling is here (any optimization here is also welcome!):
/*
*
* BEGIN NAV SECTION
*
*/
.navHolder{
position: relative;
width: 100%;
height: 100px;
margin: 0;
padding: 0;
}
.nav, .nav2 {
width: 600px;
height: 50px;
position: relative;
overflow: hidden;
margin: 0 auto;
padding: 0;
top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
position: absolute;
top: 0px;
overflow: hidden;
width: 200px;
height: 50px;
background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
position: absolute;
z-index: 100;
display: block;
top: 0px;
height: 50px;
width: 200px;
text-indent: -9000px;
}
.nav img, .nav2 img{
position: relative;
z-index: 50;
width: 200px;
height: 50px;
}
#home, #press{
left: 0;
}
#bio, #pdr{
left: 200px;
}
#media, #contact{
left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
background-position: 0 -246px;
}
You are missing:
.nav a, .nav2 a {
left: 0;
}
That should fix the problem. Always set a vertical (top or bottom) and horizontal (left or right) placement when using position:absolute.
UPDATE
Anytime a background is set, it starts working as expected. Through a lot of testing, you will probably find a different way of fixing the problem. But this is what I would do:
BEST WAY:
Either get rid of the img tags or hide them, and instead apply them as background-image to your a tags.
Change the position on the a tags to relative instead of absolute as they would be the only visible child of the parent div
QUICK WAY
.nav a, .nav 2 { background: url(/images/shim.png) }
Where shim.png is a 8-bit fully transparent, one pixel PNG. A 8-bit PNG shim is smaller than the same dimension (1 pixel) gif, and everything will still work as planned.
Serve the same styles to IE8 that you serve to IE7, and then put the following element in the document head:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
This will make IE8 emulate IE7. Because you are having no issues with IE7, I presume this would work for you.
Not entirely sure what's going on there, but seems to be some kind of problem (maybe an IE8 bug) with the layering of the link and image elements. When I change the z-index of .nav img, .nav2 img to any negative value instead of 50, then the links become clickable.
I'm not sure if that is a practical possibility in this case, though, since the negative z-index might cause the images to no longer be visible.