I can't seem to find anything that quite matches my issue, here.
.nav.top .main .buttonsWrap .button {
display: inline-block;
position: relative;
line-height: 32px;
height: 33px;
padding: 0 27px 0 28px;
vertical-align: top;
}
That's my CSS. For some odd reason, the line-height isn't working. No matter what I set it to, it's just not doing anything and Chrome debug has it disabled. Any help is much appreciated!
Related
I've never had this problem before, but for some reason, my 'overflow: auto' tags are not working correctly. They show scrollbars, but I can't actually scroll the scrollbars. The scrollbar appears if a section is larger than the height of the container, as it should, but the actual scrolling capability is defunct. It's as if the scrollbar is simply frozen and won't move. I've searched across the internet for why this may be happening, and couldn't find an appropriate solution. I also tried removing the 'overflow: hidden' from my parent element, thinking that it may somehow be affecting the entire code, but removing that elicited no effect whatsoever. I've also double-checked that everything has a width and height, since I know that missing those can adversely affect an overflow. I also checked the positioning of each item. (And I also know it isn't just my mouse messing up because scrolling on other sites/pages is perfectly fine)
I'm frustrated and entirely at a loss at this point, so I'm hoping extra sets of eyes may spot something that I'm missing.
Here is my project: https://codepen.io/royalstandard/pen/RwMxrLB
Main container -
.ldmainprofile {
width: 1100px;
height: 1400px;
padding: 0px;
background-image: linear-gradient(80deg, rgba(163,135,135,1.0), rgba(163,135,163,1.0));
border-radius: 15px;
position: relative;
overflow: hidden;
z-index: -10;
}
The first "frozen" container -
.basics {
height: 300px;
width: 270px;
border: 20px solid rgba(92,65,92,0.6);
background-color: #CCC;
border-radius: 10px;
position: absolute;
margin: 20px;
}
.basics ttl {
display: block;
font-family: aclonica;
font-size: 22px;
height: 22px;
width: 250px;
text-align: center;
padding: 20px 10px 10px 10px;
border-bottom: 1px dotted #888;
color: rgba(92,65,92,0.8);
}
.basicscroll {
height: 247px;
width: 240px;
background-color: #FF7777;
padding: 0px 15px;
overflow: auto;
}
.basics cat {
display: block;
font-family: poppins;
font-size: 15px;
text-align: left;
margin: 10px 0px 10px 10px;
color: rgba(92,65,92,0.6);
letter-spacing: 1px;
text-decoration: underline rgba(92,65,92,0.3) 4px;
}
The sections being affected so far are ".basicscroll" (currently coded with peach color as I do to clearly see what I'm working on) and ".info2 trig" at the bottom.
I am having an issue with IE11 and utilizing the CSS calc() function along with display: inline-block and/or display: inline-table.
Currently I have a text input and a button that should be next to each other (inline), with the button always being a fixed width and the input should take up the available space leftover (i.e. calc(100% - 92px)). Both elements are display: inline-table;. In all other browsers, doing this calc() worked fine. In IE11, it drops the button to the next line.
Included in the JSBin are a couple styles at the bottom that make the elements appear inline, although this fix will not work for an end result. What I did was added display:inline-block to both the input & button and also removed padding and border from the input. At the end of the day, the input **must have padding & border` so this will not work for my use case.
^^ box-sizing: border-box fixed that "hack", but the issue as a whole still exists in IE11.
Here is the JSBin (in order to see the issue, you must be using IE11)
The CSS, as it stands now, looks like this...
body, dd, figure, form {
margin: 0;
}
form {
margin-top: 1.6875rem;
width: 100%;
margin-right: auto;
margin-left: auto;
}
form fieldset {
margin: 0;
padding: 0;
border:0;
}
input {
border: none;
border-radius: 0;
outline: 0;
margin: 0;
padding: 0;
text-align: left;
}
input {
font-size: 12px;
line-height: 15px;
display: inline-table;
padding: 4px 12px 5px;
border: 1px solid #000;
border-radius: 0;
background-color: #fff;
color: #999;
font-style: italic;
font-weight: 300;
vertical-align: top;
margin: 6px 0 14px;
margin-top: 0;
margin-bottom: 0;
width: calc(100% - 92px);
height: 40px;
}
button {
border: 0;
height: 40px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 13px;
display: inline-table;
position: relative;
padding: 0;
background-color: #000;
color: #fff;
width: 92px;
}
I'm assuming there is a bug with IE11 and calc() in which calc() doesn't take into account the border/padding when an element is display:inline-block or display:inline-table, although I could not find anything in my research to suggest this 100%.
Ultimately my question is, how do I get two elements to be "inline" with one being a fixed pixel value and the other a percentage width that is cross browser compliant.
EDIT: added box-sizing: border-box which made the display: inline and padding/border: 0 obsolete at the bottom of the JSBin. The issue still persists in IE11 though.
The answer to my question is as follows...
As Adam mentioned in the comments above, adding box-sizing: border-box; to, at the very least, the input & button elements fixed the issue where the border/padding was not being calculated in the calc() function.
In addition to that, changing display: inline-table to display: inline-block fixed the issue in IE11.
We've just launched a new site and are experiencing some problems in older versions of Safari with text-indent. A live link is supplied below, hopefully somebody can help me to debug this issue? I've never experience text-indent issue before.
HTML
<ul>
<li>Prev</li>
<li>Next</li>
<li>Scroll Down</li>
</ul>
CSS
li {
padding: 2px 0;
display: inline-block;
vertical-align: text-top;
font-size: 0.9em;
overflow: hidden;
}
#slide-prev, #slide-next, #scroll-down {
margin-left: 10px;
padding: 0;
}
#slide-prev {
width: 18px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat 0 -406px;
text-indent: -9999px;
}
#slide-next {
width: 18px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat -40px -406px;
text-indent: -9999px;
}
#scroll-down {
width: 14px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat -80px -406px;
text-indent: 9999px;
}
Cross Browser Screenshots
Live Link
A better way to hide text is using this method:
.hide-text{
text-indent: 101%;
white-space: nowrap;
overflow: hidden;
}
.slide-prev {
width: 18px;
height: 14px;
background: url(images/ui-sprite.svg) no-repeat 0 -406px;
}
You can add this class to each of the items to hide the text. In your code above, you are repeating a lot and I also wouldn't recommending using IDs like this in your CSS.
<li>Prev</li>
I have resolved this issue with help from this article.
text-indent only works on block level elements, so it's a case of adding that to the CSS. I have changed my text-indent technique to include white-space and overflow as suggested by #paul-redmond, for a more full proof text-indent solution.
The key was being a block level element however.
CSS
#slide-prev, #slide-next, #scroll-down {
margin-left: 10px;
padding: 0;
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
When I zoom out or zoom in the browser some of the web content messed up. How to fix this?
Here's the CSS of the home page (first link)
.footer-image{
position: relative;
width: 100%;
}
.homeheaderh1{
float: left;
font-weight: bold;
color: #d31716;
margin: -520px 0 0 100px;
/* display: initial; */
line-height: 1em;
}
.homeheaderh3{
font-weight: normal;
margin: -320px 0 0 100px;
position: absolute;
line-height: 1.20em;
}
.homeheaderbutton{
float: left;
margin: -220px 0 0 100px;
position: absolute;
}
.homeheaderp{
float: left;
margin: -60px 0 0 100px;
position: absolute;
font-weight: bold;
}
Here's the CSS of 2nd link
padding-top: 10px;
margin: -550px 0 0 500px;
color: #FFF;
position: absolute;
margin: -450px 0 0 400px;
color: #FFF;
line-height: 0.10em;
position: absolute;
font-weight: 300;
Here's the pages where the web contents are messed.
http://bit.ly/1KJjaOZ
http://bit.ly/1KCVhJv
When I view the source in the browser
view-source:http://homecredit.ph/testEnvironment/products-promos/standard-loan/
on line 168 it says
<div style="width: 115.80%;">
Usually I would avoid setting widths to greater than 100%, because then, it and all it's contents inherit that width, often resulting in the content not fitting on the screen/container.
As the CSS is inline, and not coming from a CSS style sheet, this could be trickier to fix. You need to find out
- Where that style is coming from, and it might also be useful to know
- Why is it there? (too often I 'fix' one thing, only to break 10 more. This is especially true of CMS themes) But nonetheless I would go with 100% width (or less, e.g. with margins also). If that breaks stuff temporarily, I would just work with it, fixing whatever gets broken, because otherwise you'll be layering fixes (most of which may be unnecessary), on top, all because of, e.g. one bad fix like the 115% width container.
As far as responsive CSS in general is concerned, look into 'media queries', and best practices, e.g. 'mobile first'.
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 8 years ago.
Improve this question
Here's a link:
http://www.cultsectsclothing.com/shop
Can someone please help me? I can't figure out why the header won't center. Instead, it's awkwardly all the way to the right. I feel like it's something really simple but I don't even know...
I have already tried redoing the header on css and in the html cascade layout. It's the same way I do the header on all the other pages. I just need the stupid title to center and for some odd reason it is not.
I checked my tags and made sure they matched up with my 's too. Help??
Give CSS Like this for #header and it will Work No Doubt !
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}
You can use it for your header:
#header {
width:980px;
height:130px;
margin:0 auto;
}
Instead of
width: 1000px;
Put
width: 100%;
on the #header CSS style.
It will look like this: http://d.pr/i/2OKD
And the fixed will be still there, so, your "logo" will not scroll (like the menu).
try this
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
width: 100%;
min-height: 30px;
display: inline-block;
text-align: center;
margin: 0 auto;
}
Demo JsFiddle
Add margin: 0 auto; in your #header. This will solve your problem..
HTML
<div id="header">CULT SECTS</div>
CSS
#header {
font-size: 60px;
font-style:oblique;
font-weight:bold;
color: #000;
text-align: center;
margin 0 auto;
width: 100%;
min-height: 30px;
display: inline-block;
}
In context to your code, you simply need to add two properties to your #header rule, which are left: 0 and width: 100% (remove your 1000px as I'm assuming you just want the header to be centered and don't care about an exact width)
See the last 2 properties in the code block below:
#header {
font-size: 60px;
font-style: oblique;
font-weight: bold;
color: #000;
position: fixed;
top: 30px;
min-height: 30px;
display: inline-block;
text-align: center;
left: 0;
width: 100%;
}
http://jsfiddle.net/uberrobert/F4TgR/
This will make your header come back from the right as I see that behavior in Firefox :)