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
For some reason, when I use inspect element on my file input, it shows where it's supposed to be. But it doesn't behave that way. Go to oceankarma.co and click post at the top. Then try clicking the youtube icon. Please help
All the icons are of different dimensions. Youtube, Vimeo icons are placed in tags while other black icons are used as background. This is causing the different styles.
Use same dimensions.
Same styles(except for background image so that everything is either called as background or everything via <img> tag)
If you do the above, it should give the result you expect.
I believe the issue you're referring to is that the the hidden file inputs are overflowing into the youtube link, try adding this to your CSS to fix it:
#servicetable tr td {
position: relative;
}
#upload_video input, #upload_photo input {
position: absolute;
left: 0;
}
Also note that you cannot set the cursor property for file inputs. you can read this question for more info
Sorry, but none of the existing answers helped me. Kind of like what koala_dev said, the inputs are overflowing. So I added a simple overflow:hidden style to the container and that fixed it.
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 7 years ago.
Improve this question
I'm not sure how exactly I can make this "Live Chat - Online" button appear inline next to the "Login" button.
I've tried a few methods like using inline-block display, floating, etc. but I honestly feel like the issue is that I can't embed the parature div id inside the <form action ="/webapps/login"> form tag. Being outside of the tag makes this a positional nightmare.
Problem is this page doesn't actually allow me to directly insert my parature div id in it because some of the page is constructed from dynamic javascript on the fly that I don't have access to. Is there a proper way to align the Login button with Live Chat - Online horizontally? Ignore the blurry text I am going to fix it later.
site: https://com-bb-dev.com.edu/
You can use:
#loginBox{
position: relative;
}
#parature {
border-radius: 3px;
position: absolute;
bottom: 0;
left: 220px;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
I have a problem regarding the layout of my css. When i use Firefox the layout is ok. Just like i want to. But in Chrome there is a big difference. I have used css reset but it just messed up with my css. I don't know what to do, every tip will be helpful.
http: //83.212.122.240/
My site is in Greek.
There are differences in the navigation buttons and in my login form between the two browsers.
Here is my code:
https://www.dropbox.com/s/u68pv6t91p3lk24/index.html
And my css:
https://www.dropbox.com/s/fa7alsvsfhw62qy/templatemo_style.css
I check browser behavior for text-boxes only. You have to fix height and line-height of all text boxes as below :
.text-box {
height : 18px;
line-height : 18px;
padding : 2px;
}
Line height will take care of the text filled in text-box.
All browser is very sensitive to CSS. So you have to define all rules in CSS so that it should be same in all browsers.
So you have to take care of CSS for every DIV.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am working on a (html/css) website to improve my skills but I am not sure if I am doing it the right way, because I have a lot of floats and sizes. I also need help with some css things:
What I have:
What I need:
The red dimensions in the image are the dimensions I've tried to give the objects and which I am not sure if it is the correct way of doing it.
The black words are the things I would like to change, but I am not sure how I can do it in a good way.
All my code:
index.html:
http://pastebin.com/PZZY7bFA
style.css:
http://pastebin.com/HyEdM6qF
reset.css:
http://pastebin.com/gxqWzFHN
I did not post the css code of the navigation menu because it is already working in a correct way.
I would be very happy if anyone can help me.
Regards,
Engin
Well, I don't have that much time right now. But I tell you this:
Your logo is an object wich is an inline element, same as (link) and normal text.
To vertical center inline elements use line-height: ?px; in your css. Set the ? to the height of your header
To vertical center other elements, such as block elements (f.e. div) you can define the parent as a table cell display: table-cell; and assign vertical-align: middle; to your block element. Of course this would also work for inline elements but the first method is easier here, since you don't have to declare the parent as a table-cell.
Anyway, if you really want to design websites you have to get to know all the princeples and behaviors. Check the urls that were just posted and keep learning A LOT!
I hope you can finish the navigation now:)
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have an image inside a link like this:
<img src="img/post.png">
all I want is the image to change to "post_light.png" when user places mouse hover link. Any idea which is the easier way to do this?
Pure HTML
<img src="img/post.png" onmouseover="this.src='img/post_light.png'" onmouseout="this.src='img/post.png'">
You have already asked this. Please do not ask twice, instead edit your first question if needed.
With only HTML and CSS, it is not posible to change the source of image. If you change the IMG tag to a DIV tag, then you can change the image that is set as the background.
div {
background: url('http://www.placehold.it/100x100/fff');
}
div:hover {
background: url('http://www.placehold.it/100x100/000001');
}
Be aware of the possible SEO and screen reader complications that can arise from this.
You can do something like this:
<a class="switch-image" href="start_post_job.php">
<img class="main-img" src="img/post.png">
<img class="caption-img" src="img/post-light.png">
</a>
The styling:
.main-img{
z-index; // This might not be required
}
.caption-img{
z-index:10;
display:none;
}
.swith-image:hover > .caption-img{
display:inline-block; // either this or block
}
.swith-image:hover > .main-img{
display:none;
}
This should switch the images. Just you play around with it, I think you should beable to do this just by changing the display property of the two or just by changing the z-index.
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 am having 3 issues across two pages:
http://www.easythemepro.com/ - The button at the bottom of the text appears to have quite a bit of space between the text and the button. What code is adding in this extra spacing?
http://www.easythemepro.com/ - The boxshadowing on the page appears to stop right after the button. What do I need to do to make it extend around the entire page?
http://www.easythemepro.com/themes.php - I'm having the same problem with boxshadowing on this page as well, but it is extending a bit further. What needs to be changed to make it extend all the way down?
I've been staring at the same code all day and can't seem to figure out what's happening with these last 3 issues. I know it's problem simple stuff I'm overlooking after having stared at it all for so long...
1)
In your CSS (style.css) on line 201. You have the following rule:
bottom: 0;
Remove this rule.
Setting the position of the button to "bottom: 0;", puts it at the bottom of the parent container. In this case you do not want this.
2)
Set the height of body & html to 100%:
html, body {
height: 100%;
}
Setting the height of body & html to 100% makes them fill 100% of the height as you'd expect!
3)
Inside #wpwrap set your overflow to automatic.
overflow: auto;
This will make sure the contents of #wpwrap do not escape.