Elements not hiding properly on lightbox open - html

would really appreciate some help please!
I used some lightbox code I found online (like I do for every bit of code I need, the noob I am), but when you open something in the lightbox you can still scroll the page and see some of the content behind. I made the z-index like 9999 or whatever, but that's obviously not the issue.
Would anyone mind having a look and letting me know how to fix? Thanks in advance!
Site: https://runplymouthharbour.co.uk/test#step12 (click image to open in lightbox and you can see content below it showing on top)

You should try to include a code sample in your questions as it makes it easier to answer.
But to answer the question, your z-index fix won't work as your class row__container has z-index: 1 rule, which overrides the z-index you set in the span that displays your image (it does this because the row__container div is a parent of the span).
To fix, remove that z-index: 1 from row__container.

Related

Page wight with scroll

Link: http://shahinlertour.com
I have problem with index page: bottom scroll. I want to remove it and fix page width like on other pages for example on http://shahinlertour.com/batumi-tour.html
Can't find what is the reason of this problem. Please help.
If you could send a snippet of the css for the scrollbar that would help answer you question much better. However from what it seems based off the code it's coming from the offline tab at the bottom and played with the styling and had gotten it work while making the width 100% and margin 0, but again it would be easier to give a better answer with your code.

White Space on the right in mobile view

I need some help finding what exactly is causing the white space on the right in mobile view of my site.
http://shahil229-001-site1.smarterasp.net/
I've tried using overflow-x : hidden in the css but it stops the top navbar animations from working in the normal desktop view so thats out of the question.
Any help would be appreciated. Thanks
I found the issue! In the box where it says "SYSPRO" your link seems to be overflowing. Therefore causing it to make the page wider then it should be, and you can't see it because the link is white.
EDIT
Specifically the link http://www.syspro.com/product/what-is-erp.
EDIT 2
As Jesse Dockett said, also add width: 100% to your code. Thank You Jesse! :)

Margin not displaying properly

I'm creating my personal website build on wordpress and now I'm remaking template. After whole day of doing css, html and php...and looking for a lot of things of internet, I encountred for a lot of people known problem.
Somewhere in my site, some element is giving me margin which i don't want. You can see it on the picture below:
I know the rules of this website, to give code and you will try to help me, but now, I don't know where is the problem. So if someone with bigger experience and little bit of time can look at my page, I would be really thankfull.
My site si svrcek.webfix.sk
You front slider has a <p> in it that has margin.
delete this node and the space goes.
As it is empty do you need it? and if so can you add styling to it?
I don't know why you have this margin, but this CSS will fix that :
.front-slider {
float: left;
}
Your .front-slider element is causing the gap. Add a position:absolute to fix it. (If it's not the markup of the slider, you could also remove the redundant <p> which initially is causing the problem.)
To have really clean code, you should remove all absolute positioning from the child elements and just position the .front-slider wrapper accordingly. Also it seems like your green navigation buttons don't work. Probably there is an option to position and style the soliloquy-next and soliloquy-prev buttons which seem a but redundant at the moment.

Cannot select text on my page

Thanks for reading and any help will be gladly appreciated.
My problem is that I cannot select text on a webpage that I built. I'm new to programming, and still do not understand the ins and outs of everything. But I'm trying hard to learn.
The entire page is positioned relative, and I have done research and read other posts about the relative positioning being an issue when selecting text. I know I can get around this issue, because the page I modeled mine after is positioned relative, and you can select text just fine on this page.
This is my page: www.the-daily-prophet.com
I'm sure this might be an easy fix, but I cannot figure it out.
Thanks for any help, and I can provide more info if needed.
Your footer is ending up above your main text columns. Removing position: relative; margin-left: 562px; from the footer resolves that problem for me in Chrome, although it may have unintended consequences.

expanding the menu appearing underneath the gallery in IE7

I have a colorful menu ("Destaques", "Roupas", "Sapatos" and "Fale Conosco") who is working, but IE7 is behind the gallery is on the page, as I tried to solve using z-index, but nothing seems to work, does anyone have any tips?
page link
Hovering the mouse over the menu using IE7 realize what I'm talking about.
There's a lot going on here, but I'll try to take a crack at it.
First, try to work on getting your HTML to validate. There's a lot of invalid HTML that could be leading to issues.
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.montepage.com.br%2Finfantile%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Second, I believe IE7 does something funny with z-index. It sort of resets it's z-index based on it's parent. I know I've ran into this issue in the past. Basically, if two parent elements like this:
<div id="parent1">...</div>
<div id="parent2">...</div>
If "parent1" has a lower z-index than "parent2", all children of "parent1" will be lower than "parent2", regardless of their z-index value. What you can try to do is make sure "parent1" has a higher z-index.
From looking at your code, it seems like the parent elements are:
<div class="colorido"> <!-- the menu container -->
...
<div id="corpo"> <!-- the image promotional container that rotates -->
...
See if setting "colorido" to a higher z-index than "corpo" works. You might have to set them to "position:relative" so that it works.
It's hard for me to read that HTML and CSS, there's a lot going on here. So, I might have the wrong containers, but hopefully the idea can help you.
This page might help lead to some answers as well as some other tricks to try:
http://aplus.rs/css/ie7-bug-will-not-render-z-index-change-on-lihover/
Hope that helps!