Is there CSS elements that block hyphens from working? [closed] - css

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 27 days ago.
The community reviewed whether to reopen this question 27 days ago and left it closed:
Original close reason(s) were not resolved
Improve this question
I've been looking into it and can't figure it out. In my page, the hyphens that are on a *{} selector work in most places, just not the titles. And I verified, nothing comes up that undoes the *{} selector
I'm trying to figure out; is there something that blocks hyphens from working? Like how a sticky wont work if anything the sticky is over has an overflow property?

There was a discussion on SO about this these days: The words "Navigation" and "Databases" in your h1 are not hyphenated because they start with a capital letter, which most browsers apparently interpret as not-to-be-hyphenated nouns.
You might want to spell them as "navigation" and "databases", wrap <span> tags around those and apply text-transform: capitalizeto those, either in a dedicated class or in style attributes. Or you use soft hyphens (­) in those words.

Related

Z-index is causing incorrect stacking [closed]

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 6 years ago.
Improve this question
I have a calendar at the following page:
http://www.plumgrid.com/calendar/category/events/2016-03/?tribe_events_cat=events&tribe-bar-date=2016-03
When we mouseover the event on March 2nd "OpenStack Meetup | Washington, DC", the popup goes behind the header banner image.
I have looked into the z-index and the opacity, and tried to figure out whats going wrong in terms of stacking order and context but cannot find a solution.
Any ideas?
It's simple, you have an overflow hidden on the div with id "main"
So even with a z-index, the div is hidden when outside the box (try commenting the line 7743 of style.css)
For z-index to have any effect on stacking, the element should have the attribute position to relative or absolute.

Links clickable in Firefox but not Chrome [closed]

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
Have a curious issue with my footer links in chrome.
http://www.kfc-uerdingen.de/
Firefox has no problem displaying the links in the footer. However in chrome only the ones in the first column are clickable.
Before that I had another issue with chrome where all but the last columns disappeared as soon as there were more than two, but I solved that by adding the footerContainerInner-div, which took over the column related css.
It's not a z-index issue from what I can tell.
Has anybody encountered this before of can see what's going on?
One solution is to avoid nesting transforms.
Instead, you can use transform: rotate(-2deg) skew(-2deg) on #footerContainer.
Transforming an element modify its stacking context; it seems chrome doesn't handle it very well when you use columns.
It may be a bug.
Try running in compatibility mode. Also, I understand that z-index is not the only step. In order for the reference to be cross-browser compatible, the push and footer classes also need to be position relative for the z-index to be recognized (add -webkit-transform:translate(0,0)).

List item first row not aligning properly [closed]

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 8 years ago.
Improve this question
I have this unordered list
http://neaen.com/frying/neaen-masterfry-continuous-fryer.html
Whichever combination I tried using FireBug, I can't get the first row to align properly. I am sure this is an easy fix, but I am missing it somehow.
These are caused by line breaks in the list items. Do one of two things. Either remove all spaces between each </li><li> or remove the closing </li> altogether. This is valid.
I would get rid of the unordered list code entirely and use divs to make this work. Then you could put only a single link for each of the boxes and have the entire box be the link for each one.
You will have more options for styling and positioning your content that way.
Here is a source you can look at for that: http://css-tricks.com/creating-clickable-divs/
Apologies if this doesn't answer the specific question.

Wordpress menu z-index [closed]

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 8 years ago.
Improve this question
My wordpress menu is underneath the elements in the body of the page, when it shouldn't be.
I have checked the z-index over and over again.
The elements in the menu have a z-index of 99 and the elements in the body don't have a z-index value. So in theory the menu should be over lap the elements in the body of the page, but it does.
So if it's not the z-index then that is it?
Note: I know people always want to have some code pasted in the question but the css is 1969 lines long and I don't know which part of that is wrong. And I'm not going to paste 1969 lines into this question.
okay here is the solution
move to the file http://www.kodemagd.de/wp-content/themes/spun.2.0.2/spun/style.css?ver=3.9.1
go to 889 line and find
.hentry
just remove
position: relative
from this and then check the output

how to get a css that does not cause overflow of words beyond box [closed]

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 8 years ago.
Improve this question
I've got a problem with long tag words (like Best Practices below).
I'd really appreciate if someone could go to the URL http://www.siliconvalley-codecamp.com/ and make specific recommendation for the correct CSS change that would get the words like "Best-Practices" to clip when it goes over the edge rather than just flood over the edge into the screen. Sadly, I'm not very good at css and general instructions will not do me much good since I'm not and don't have a css guy to help me.
It will be good for you karma and we will appreciate it very much.
If I add word-wrap:break-word to the .TagCloud element, the words effectively wrap to the next line. You don't need a fixed width, just adding the word wrap property should effectively work.
Another alternative would be FitText. It is a jQuery plugin that condenses the font size to always fit in the allotted space.
It works for me on Chrome ! Do you still have the problem?
By the way you should give a fixed width to your div TagCloud and maybe use this
http://www.impressivewebs.com/css-white-space/
or this
div.TagCloud {
width: 250px;
word-wrap: break-word;
}
Why not just add overflow: hidden to the box? If you just want it to clip.

Resources