I made this fiddle to show my problem. I have a list and I need to set a negative margin to overlap the list items.
The issue comes when the text is so long that it wraps itself and I can't see how to change the margin of that particular line to make it the same as the rest of the items. Line-height does not seem to do the trick. Do you have any idea?
Thanks in advance.
Not an option to put line-height to the li instead of using negative margin?
http://jsfiddle.net/wNf9R/6/
Or you could set your a's to display:block, apparently the line-height is ignored for a-elements? (i'll leave the explanation to someone else :-)
http://jsfiddle.net/wNf9R/9/
Wrapped it around with div and gave smaller line-height
See http://jsfiddle.net/wNf9R/8/
If all you're trying to do is make the spacing between the lines consistent (i.e., you are okay with the wrapping), then line-height should indeed work.
See this fiddle.
Use the line-height property in conjunction with specialized margin-top and margin-bottom properties to even out the intra and inter-element spacing: http://jsfiddle.net/T3NM8/
Related
Check out the "Signs of Hope" hero text in IE8: [removed]
Do I have to hack away at a conditional stylesheet, or is there a better, IE8-compatible way to do this typography?
Looks like you've figured this out, but for future knowledge seekers I'm going to guess the whole text was set to some particular line-height, despite different font-sizes.
The white text needs one line-height and the green should have another; or you can just remove line-height, or set it to normal, and let the browser automatically handle the different text sizes.
The main text of my website's first word has a significant larger font-size than the rest. For some reason or another the container that contains the text cuts the first word off on top. Probably because the line-height of the first word is identical to the rest of the text and thus the container is not able to calculate its own height properly.
Codepen snippet: http://codepen.io/sardasht/pen/maJup (I've included the full contents of my css file to be able to debug properly, so will not embed this here. If this is requested, I'd happily edit my post to include it, but it will be ~300 lines of text)
If I increase the line-height of the first word, the rest of the text which is on the same line gains the same line-height and thus jumps up from the rest of the text below. If I add a margin-top to the container element, the first word is not cut off anymore, but then the bottom line of the text is cut off.
I played with overflow: visible/hidden as well on all parent elements, but to no avail.
The p element has line-height: 1.5em, which will set the height of the text lines inside it. Because of the em unit, the height is determined based on the font size, and it's the font size set for the p element that is used, so the line height won't increase because of the larger font size set on a child element.
I would try using a line-height declaration that isn't set in px, or ems.
p, span { line-height:1 }
I also tried
span { line-height:0.8 }
which seemed to give the very least amount of top "push", but I only viewed it in FF on a Mac.
I've noticed, with fonts, that their heights and widths are rendered differently from browser to browser. And this can be exacerbated with fonts that haven't been given proper leading, kerning, etc. This can cause "odd" line breaks, which causes a 'problem' with set block heights -- especially going from FF, and Chrome to IE. FWIW.
EDIT:
http://jsfiddle.net/mvf6j/
Setting the line-height to 1 (of the child) equates to 100% of the parent's line-height; thus, in your example code 1 = 1.5em. In my fiddle/example, 1 = 1em (even with the child being a 2em font). It's inheritance. It makes the child relative to the parent. And takes the guess work out, if you should want to change the parent's size. All of that ease in sizing/relationships disappears when you set explicit line-heights to the children.
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.
As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?
Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/
edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.
edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.
I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.
For images, you should look at using children divs with width:100%
Can you try some jQuery scroll plugins for this?
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://baijs.nl/tinyscrollbar/
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Try the jquery selectbox plugin, it's great and do exactly what you are trying to:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
So I've spent a significant amount of time coding and designing this webpage, and it works perfectly in every browser I've tested it in: IE7, IE9, Firefox, Chrome, Safari. But when I view the webpage in IE8 (and only IE8), the vertical scroll is disabled. The scroll bar is there all right, but it's turned off and I can't use it or the mouse scroll wheel.
I'll post the code for the webpage if I absolutely have to, but first I wanted to see if anyone had ever heard of this happening before or had any initial thoughts.
Okay, I figured this out. If you put height: "100%"; in the html tag of your page's CSS stylesheet, it will break scrolling in IE8, but other browsers will still work. Go figure.
Here is a hack way of getting the scrollbar to work with a height of 100%. Not the best solution but it now scrolls in IE8.
html {
overflow-y: hidden\9;
}
html, body {
height: 100%\9;
}
body {
overflow-y: scroll\9;
}
mainly three things you should see
If you have given style as overflow:hidden
If you have given hight in page percentage.
if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason : IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
You tried on other IE8 (not your local ie8)? Maybe the problem is in your ie8.
Run with no-addon mode or try to disable all addons (including bars)
Restore advanced settings. Tools -> Internet Options -> Advanced -> Restore Advanced options.
I have also faced this type of problem many times.Scroll bar with IE8 , should not visible in a plain HTML page. So, please check the content inside your <body></body> tag . There may be is some margin or padding tag.
I am using IE8 currently , but there is no such scroll bar is showing. No need to fix the height:100% for HTML or BODY. Please check your page deeply.
If you are using CSS, it may come in handy that you need a reset CSS value so that the page renders properly in IE8. I have provided the link as well as the snippet from http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ . This may help you. If anything this is a nice site to read if you are starting development.
A reset to where it all started…
The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:
* {
margin: 0;
padding: 0;
}
The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).
Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).
Example 2: Applying the universal selector margin/padding reset
But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.
Here’s what I used:
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Example 3: Declaring a style rule after the universal selector.
Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.
Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).
After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.
SITE: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
NOTE: I am kind of new at this, so please bear with me.
this happens when i set my background-position to right in IE8 Only...
you can see that in the following URL : http://www.scrapingweb.com/quote.html (Contact Us tab)
I tried to reduce the width of the HTML or the body like this
body{width:99.6%}
or
html{width:99.6%} - preferred
And worked fine
you can also reduce the width of the
parent container for example DIV to
width:99.9% and this works too.
I prefer to make it with css hack to be read only on IE8.
Try to specify both positions e.g.:
background-position: right top
If you only specify one keyword, the second value will be "center"