- Last post
- 17 Responses
Im working on a site that looks great on PC and Mac in Chrome and Safari. Im having a positioning issue in IE9 on the PC (yes, I have to make sure it works for this for my client).
On IE9 the DIVs are like 2 or 3 pixels lower than they are everywhere else. I've tried some different approaches, absolute, relative, wrapping all the divs in a parent div with absolute 0 positioning...
Is it even possible to get divs positioned perfectly everywhere?
You've already included a well-developed CSS reset code, I take it?
^ No. Here's the thing, this is going into a CMS where I have no access to the CSS. Any CSS that I do has to be inline styles.
Basically when I create a div, it looks like this:
<div id="apDiv2" style="position:relative; width:159px; z-index:1; left: 777px; top: -159px;">
try changing the CSS properties with the browser developer tool, you may find what's causing that
pixel perfection, cross browser, with only inline styles... probably not going to happen...
What CSS properties? Im not using any CSS outside of the positioning of the DIVs.
I think he means like right-click Inspect Element in Chrome, etc - I do all my css tuning in that - it shows the css that an element is subject to, from the ground-up. You can go an edit it 'live' and see results, and just nudge things a pixel or 3 this or that way, add various properties and see how it would really look.
My guess is that if you can't edit the other css that's acting on just a div, then you can see what other style data is there, and try to maybe counteract it with some !important declarations etc..
margin issue likely. zero them.
If it's an anchor tag set to display:block, that may be the issue as well.
I seem to be having more luck with relative than absolute (still not perfect), but for some reason when I switch all the troublesome divs to relative, they seem to be actually taking physical space up on the page. Meaning even though I have them floating to the right over a table, they are actually shifting tables down. Only when set to relative though. Whats the deal with that?
^thats just how position relative works.
Position absolute essentially takes the div off the page and floats it (either above or below depending on the zindex). Position relative is often the default position style for most HTML elements. So adding it often does nothing.
As you've said it doesn't have a CSS reset so it's very likely a margin or padding issue. Be sure to set them to 0 if not being used. If its not that it may be a border-box: issue. You can see this in the chrome inspector (apple+alt+I).
If you wanted to use position relative and the div in question has a set size, you could position relative the element, zindex 2, and put a minus margin on the bottom to pull up the content below it to be behind (just like position absolute). But this method isn't ideal at all.
If you could use css you could use an ie only conditional CSS rule.
Hope that helps
Welp nothing worked. Tried everything mentioned here and plenty of other things. This must just be an issue between IE9 and every other browser. Its just displaying the divs like 3 or 4 pixels lower.
It seems like the only way to fix this is if I could use different CSS for IE9 with different positioning settings, but of course I cant do that here.
I would do this with tables but the issue is this design is unusual, very strange layout with elements that actually have angles, and trying to line other elements on the page up with these angles. Its a tough one.
Yeah I tried !important. Here's the code. I know its a disaster, Im building this outside of the CMS, but it will need to get pasted into the source editor when its done, and I have no access to the CSS.
<div id="apDiv2" style="position:absolute; width:85px; height:78px; z-index:1; left: 767px; top: 70px; margin:0px !important;; padding:0px !important;; display:block !important;; box-sizing: border-box !important;"><img src="images/photo1.png" width="85" height="78" border="0" style="margin:0px !important; padding:0px !important; display:block !important; box-sizing: border-box !important;"/></div>
Just put this shit in a jsfiddle so people can see what the hell is going on. It's just random stabs in the dark without knowing what else is effecting the styling.
The CMS isnt why I cant post it to jsfiddle, Im building the page locally outside of the CMS, it will just get posted into the source editor when its done, ive done this many times before. The problem is there is a lot of sensitive private information in the code, it would take forever for me to make it generic and remove all that.
Im guessing this is just a pain in the ass difference between IE9 and every other browser. The page looks perfect in all other browsers on mac and pc, its just a 3 pixel difference in IE9.
I have a workaround, to do the entire piece im having trouble with as just an image, but I really wanted to avoid that. I wanted all elements in this hero space area to be separate elements.
Fuck I finally I got this shit to work. Although it doesnt look pixel perfect in all browsers when I work on this locally, once I get it into the CMS everything is showing up correctly. So this piece of shit CMS is actually fixing my problem. smh
One last question. Im using this rounded corner inline CSS style, works in every browser, even in IE9 when I just preview my local build in the browsers.
When I look at it once this is in the CMS, it suddenly doesnt work in IE9, so something about the CMS wont let it display. Aside from using images for the corners which I would really like to avoid, are there any other ways to do this with CSS that I can try?
-moz-border-radius: 10px; -webkit-border-radius: 10px;