I have a website with an image that is absolutely positioned in the header. It looks like it's working everywhere but IE6/7. My image is positioned absolutely within a header that has relative positioning. The image continues to push down the height of the header.
/*div*/
#header{padding:0;overflow:visible;position:relative;min-height:140px;margin:0;}
/*image*/
#bod{position:absolute;top:0px;left:-95px;}
I tried to change to a fixed height but that screwed up the cart item on the right hand side.
The website is greatcaesars.com.
If anyone has a suggestion on what I might do to fix this, I'd appreciate it.
In older versions of IE, height is treated a lot like min-height, and min-height doesn't work at all.
Try this:
#header{padding:0;overflow:visible;position:relative;min-height:140px;margin:0;}
#header{height: 140px;}
html > body #header{height: auto;}
The use of > to indicate immediate children, isn't recognised by older versions of IE.
Related
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example
I am struggling to make a webpage backwards-compatible with IE7 (I know, 'IE7?!', but that's what is on our school computers). I am trying to show a div the full size of the page to darken the body and show two specific divs on top of that. However, when I view the page, the dark div appears over all other elements on the page - even those with a higher z-index.
You can see the page here and view it in IE7 using netrender.
I have applied positioning to all of the elements and it seems to have done nothing. Maybe it is just my eyes?
I think if you pulled the modal box div out of the #wrapper div, it might work. It appears older versions of IE compare sibling z-index values, so the #blackBg div is comparing itself to the #wrapper div, which has its z-index set to auto. If the modal box was a sibling to both and had its z-index higher, it just might solve the issue.
As far as I am concerned, it is not possible so I gave up in the end.
For some reason, if I load an html page that has position:fixed on something, but I load it in an iframe, the fixed positions to not seem to render as fixed, but look more like absolute positioning.
I'm not expecting the fixed divs to be fixed relative to the parent document. I would just think that they would be fixed in the iframe. Is this not possible in an iframe?
Chrome has a bug that doesn't fix elements with position:fixed if:
a) you use CSS3 transform in any element, and/or
b) you have a child element positioned outside the box of it's parent element
Oddly enough, the bug was reported back in 2009 and it's still open: https://code.google.com/p/chromium/issues/detail?id=20574
They seem to be fixed to the iframe based off this fiddle: http://jsfiddle.net/ww9mK/6/ (note: jsfiddle uses an iframe and my height's and width's were just to test scrolling).
Here is similar question fixed vertical positioning of css within an iframe
It looks like there is no problem with position fixed to be fixed to the iframe. Example: http://digitaldreamer.net/media/examples/iframe-site.html
Can you provide code you are working on?
How can I get this CSS declaration to work in IE6 please?
#mask{width:725px;height:495px;margin:0;border:0;padding:0;overflow:hidden;}
The problem is the content which is much larger than 725px and exactly 495px (much like a horizontal scrolling thingy) does not get hidden in IE6.
Edit:
1. The background images of the hidden divs shows.
2. I am also using Twin-Helix PNG Fix 2.0 Alpha.
Thank you.
This will be happening because you have relatively positioned elements inside your #mask container.
This is due to a bug where relatively positioned children are not correctly clipped and hidden for a parent element with overflow: hidden applied in Internet Explorer 6 and 7. The same problem also exists for overflow: auto and undoubtedly overflow: scroll as well.
It can be fixed by also applying position: relative to the element you are setting the overflow on.
I have no idea what I'm doing wrong, but for some reason, I'm experiencing a bug with my markup that is causing my body element and my html element to not take up the entire viewport in the browser.
I can't get to the bottom of this. It first reared its head when I tried to add a 10px purple border to the top and bottom of my body.
If you inspect the page in Firebug, you you can see that there's a huge chunk of the page that is not highlighted when you hover on the html element or the body element. And the border that I applied at the bottom is hanging up very far on the page.
Does anyone know why this is? Could it have to do with my using HTML5?
Here's the page in question:
http://electricorangecreative.com/test/index.html
And here are my style sheets:
http://electricorangecreative.com/test/reset.css
http://electricorangecreative.com/test/style.css
Use a sticky footer technique.
I've had a look at the current test page and it looks like the only outstanding issue is the vertical scrollbar still appearing without need to. Easiest fix for this is to simply remove any margin or padding you have on elements you've set to height:100%. The culprit I identified is div#wrapper. Take off the padding there and the issue is resolved (in FF at least - not tested on other browsers). Since the padding is added to the height you end up with an element that stretches over 100% vertically. Use margins on children instead of padding - should be fine!