I have a div and I have content inside of it. When I make this div position:relative; it renders all the content inside unclickable only in IE7. When I change it to absolute, static or fixed it works again. Only happens in IE7. Anyone know why? Thanks
See this post: http://verens.com/archives/2005/07/15/ie-z-index-bug/
I will say you have some z-index conflict and the DIV goes on top of your clickable elements rendering them unclickable. The solutions can vary, can you post the whole HTML code you have.
Related
Whoever is reading this, please, help me out. i have a simple website, a header with a dropdown menu for when it goes responsive and below there's the main content div, called 'porta-contenido' and with only an image inside. header has a position fixed and z-index:1, so 'porta-contenido' has a relative position and top property so it doesn't get behind the header. Now, all is working correctly, but when i try it on mobile, 'porta-contenido' shows an unwanted top padding (you can see it is that div specifically because of the color yellow). i've no idea why this is happening, if i set an element inside this div it will be fine in desktop mode, but when on mobile, it shows the padding.
You can see the website sample here: http://iniziografico.pe/beta/portafolio.html (you can check the mobile effect if you reduce the size of the browser)
And here's the html and css:
jsfiddle(.)net/on3xavwz/
Thanks in advance.
It looks like div#header has position: relative applied under your 480 break-point. Changing this to position: absolute looks like it clears it up.
I have a trivial page with body having an image background, with background-size:cover. I set html { height:100% } to fill up the entire page regardless of the content amount. Up to this point everything worked as expected.
I've added a div and set position:absolute; right:0; width:200px; This, again, worked as expected, until I added content.
When this div is populated so much that the contents take up more space than the height of the page, the scroll bar appears. Scrolling down reveals that the background image does not actually cover the entire page.
This is due to the fact that my div is taller than 100% of the HTML height.
How can I address this?
You could add background-attachment:fixed; to your body element.
The caveat with this approach is that the background is now fixed in the viewport and does not scroll with the document.
https://developer.mozilla.org/en-US/docs/CSS/background-attachment
Do it like i did in this codepen, and it should work fine.
Update: (using some JS)
see this codepen for more complete solution.
Instead of positioning any items via position:absolute I utilized float as much as possible.
I also added a <div> wrapper to the entirety of contents inside of <body> this helps the proper formatting and stretches the containing <div> accordingly. The body tag and its background properties now behave properly!
I want my logo be aligned to center and that be clickable outside the margins without html img tag - with css background-image or something that remove right click > view image.
http://jsfiddle.net/qhU5u/
Thanks.
Solved
You should really use an img tag. However if you don't want to for some reason:
http://jsfiddle.net/qhU5u/1/
I've completely removed the div and just used tha a tag to display the logo.
Just use an img element. This is far better for accessibility purposes.
For example, if someone is viewing your page without the CSS enabled, they will be able to see your logo if it is an img, but not if it is a background-image.
However, if you wish to use a background-image, I would recommend using a div with a fixed height and width which matches your image.
Then, place an a element inside the div giving this the same dimensions as the div.
Your way of nesting div inside an a is invalid HTML.
See Demo: http://jsfiddle.net/qhU5u/2/
try this example and see if it's what you're looking for:
http://jsfiddle.net/qhU5u/8/
Actually I don't know how to find solution to this problem and how to name it.
Here's the link to my site:
http://www.portalpraktyk.pl/podstrona_itp
The problem is that I have page divided into 3 standard parts: top, content, footer. Between content and footer there's also facebook div to put social plug-in. What happens is that content of both divs (facebook and footer) stays under content div, but both divs actually goes up to content area (you can see dark background div right under header and behind content div).
I won't show you a code, because I don't know where the problem is. The best way is to check how this is written with web developer and firebug browser plugins.
Does anybody know solution to this problem?
Your problem is a classic problem of floats not clearing.
Look for information on .clearfix.
Basically the div#contents, has a height of 0, because #box_left and #box_right are floated, so div#contents is not containing them, and because of this your page gets all messed up.
Another tip is that instead of using position:relative and asigning a top:30px value, use margin-top:30px.
You need to clear your floats right after your #content div closes.
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!