Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have a selling webpage which uses Asp.net and CSS. Something is overlaying the text boxes and hyperlinks so it doesn't allow me to click in to them when using a mobile device. I've tried eeverything I know and wondered if anyone would be so kind to try and help me with this by looking at the page souce code and using Inspect Element as I'm quite new to programming and not sure how to use it fully.
The web page is http://www.onlinecarbooty.com/go-booting2.aspx
BUT you need to be logged in using..
Username: test12345#aol.com and Password: qwerty
on this page: http://www.onlinecarbooty.com/loginmob.aspx
As I say, it works on a laptop but on a mobile you can't click anything apart from the photos (sellers items).
The code is big and will confuse matters if I post it here so if possible, can anyone please have a look at the page directly for me. Really appreciated.
I can take a look, but credentials you provide seems to be wrong.
Edit:
All right. You can put in the CSS file this code:
.stallNew > div:nth-child(2) > div {
position: absolute;
transform: translateX(-50%);
left: 50%;
width: 320px;
pointer-events: none;
}
.stallNew > div:nth-child(2) > div select, .stallNew > div:nth-child(2) > div textarea, .stallNew > div:nth-child(2) > div input, .stallNew > div:nth-child(2) > div a {
pointer-events: auto;
}
Edited:
Your html is very messy and it should be refactored. Above I use pointer-events attribute which allows element to be transparent, so you can click through it, however if you want to specific elements of the elements which attribute pointer-events: none to be clickable you have to set their attribute to pointer-events: auto.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I want to make the class .cart to be fixed at the bottom the the screen at all times like a fixed footer. Currently user has to scroll all the way to the bottom of the page to view this div. I have tried the following css but to now avail.
Although this code works fine for my in JS fiddle but not on my webpage (link below)
JS Fiddle -- > http://jsfiddle.net/Lec5yu1d/2/
My webpage -- > http://omgjewelz.com/create-your-set
.cart { position: fixed;
left: 0;
bottom: 0;
width: 100%; }
Hi adding this code to your style will make it work,
You need to make footer sticky along with positioning it, So here I added bottom:0px for you.
footer.site-footer {
position: sticky;
bottom: 0px;
}
For better view, I will suggest you to use background white behind the text div, as right now its transparent so it will mess up with content,
.footer-bottom {
background: white;
}
This question already has answers here:
How to remove margin space around body or clear default css styles
(7 answers)
Closed 6 years ago.
Web Page
In the above web page photo I have taken a <div> with height : 100vh; and width : 100%;
I don't want the white body border.
Someone please help !!!
Well, that margin is there because the body element has a default margin, set by the browser. To get rid of it, you need to set margin: 0 on the body element.
This question has actually been asked many times before, in various ways. For future questions you may have, it may be useful to take the follow steps;
Open the developer tools in your browser
Chrome Developer Tools
Safari Developer tools
Firefox Web Console
Inspect the elements to see which one is the problem
Search Google, or StackOverflow for questions with similar scenarios as yourself
If, after inspecting and googling, you still cannot solve your problem; post a question on here, along with examples of your code, and details of your research. Having more information definitely helps us to figure out your problem.
As you haven't add any coding.So in general you can add this and try:
width:100%;
max-width:100%;
margin-left:auto;
margin-right:auto;
I think this is an issue with default padding or margin creating a white border... Add the below to ur css....
.your_div_class{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
Use that code on your style or .css file and you'll be fine:
body {
height: 100%;
width: 100%;
margin: 0px;
I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am not able to delete the last part of the menu in Wordpress site of my client.
The original line of code is this:
ul # top-menu li {
padding-left: 19px;
background: url (images / menu-bg.png) no-repeat right 3px;
}
which CSS code should I use?
Its not smart to remove it like Fahad says, you can just remove the links in the menu.
Log in on the admin account of the site and go to:
From the 'Appearance' menu on the left-hand side of the Dashboard, select the 'Menus' option to bring up the Menu Editor.
Select the menu where the link is in, and remove it from that list. Save it, and you're done...
This should work:
ul#top-menu li:last-child
{
background: none;
}
This will remove the background image from the last menu item (in your case it will remove the line on the right).
EDIT: As ninja has pointed out, using last-child won't work on some versions of IE, so this method should work if you want to support them:
ul#top-menu > li + li + li + li + li + li + li + li
{
background: none;
}
This will remove the background from the 8th menu item (each li is referring to a menu item), you will need to remember to update this is you add/remove an items from the menu.
Since you haven't included any proper code and the website link which you've included opens up a coming soon page, I am not quite sure what you're referring to but from what I understand, you'd like to remove the last <li> present inside your menu. If yes, you can do that by setting the display property of the last <li> to none using the last-child psuedo-selector like this:
ul#top-menu li:last-child {
display: none;
}
UPDATE:
Since you've clarified that you want to remove the background image from the last <li>, you may use this CSS:
ul#top-menu li:last-child {
background: none;
}
If you want a solution which would work for older versions of IE then what you can do is that you can define a class for the last menu item by logging into your Wordpress Dashboard, navigating to Appearance>Menus, clicking on the screen options button in the top-right corner and placing a check on CSS classes. Next, scroll down, click to open the last menu item and type the class-name inside the CSS Classes (optional) input field. After saving the menu, you can set the background to none for the last menu item by targeting the CSS class which you set for it, like this (I've assumed the class-name of the last menu item to be last-menu-item):
ul#top-menu li.last-menu-item {
background: none;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have no doubt that this will end up being some rookie css error on my part, but I can't figure out why Chrome and Safari render this page the way I would like and expect, while Firefox and IE9 will not:
http://turtlemountainbrewing.com/wordpress/beers-on-tap/
For the text "Guest tap:" and "TMBC DRAFT LIST" I have a div at width 100% with the css set to align the text-center, with a bottom margin and border, but Firefox seems to ignore these rules entirely, which don't even show up in the css when I inspect the element. It also won't render some colored circle divs I have floating next to the beer titles.
This is also affecting the links I have in the right footer area in a similar fashion.
It seems something is canceling these style rules out but I can't figure exactly what.
In this stylesheet you have a syntax error.
You have:
.beerheader {
text-align: center;
width: 100%;
margin: 0 0 40px 0;
border-bottom:solid 1px #b3b59b;
!important
}
This it what it should be:
.beerheader {
text-align: center;
width: 100%;
margin: 0 0 40px 0;
border-bottom:solid 1px #b3b59b !important;
}
I am not positive this is the problem. But it would be my first guess. Also on a side note I would suggest using header tags for headers instead of paragraph tags. And like others have mentioned, validating your code is also a good idea.
Page checked: http://turtlemountainbrewing.com/wordpress/beers-on-tap/
Total errors found: 76 (Parsing: 13, HTML: 63)
Total warnings found: 1 (Parsing: 1)
(X)HTML used for this page: HTML 5.1
When it 'bugs' in a browser or 2, and not in another browser or 2, i validate the html and MOST OF THE TIME, it fixes what some say beeing 'bugs' but what i say is broken markups.
About validating : http://jigsaw.w3.org/css-validator/ and http://validator.w3.org/
line 370 in css/other/custom.css remove double quote mark
line 442 in the same file !important should be before the ; mark
You can use a css validator in order to check these kind of errors ;)
for example http://jigsaw.w3.org/css-validator/validator