i'm using a empty div to display a line by setting height 3px. it works fine in all browsers but in ie6 the height div displayed with 20px height. It remains same even for height:0px . But changes in other properties reflects but not height and there is no duplicate css entry and inherited value from other div. Can any one help please
<div id="line"></div>
CSS:
#line {
border: none;
background-color: #134c7c;
height: 3px;
margin-bottom: 20px;
}
Internet Explorer has the odd idea that the content of every element should be at least one character high. You can get around this by using the overflow attribute, that way the content can remain a character high, but it doesn't affect the height of the element itself:
.line { height: 3px; overflow: hidden; }
Try:
line-height:0
Just a wild guess.
Inspect whether there is any space inside the element. If yes then set the
font-size: 1px;
property of the element.
try with space in the div or
Just guess
Related
When the Child dictates the width of a Parent which has overflow: auto, Firefox doesn't allow space for the added width of a scrollbar (15px) which leaves the Child getting cut off and an overflow-x to appear on the Parent.
What's the best way to fix this issue?
https://codepen.io/rhysyg03/pen/wrKQJG
.content {
position: absolute;
overflow-y: auto;
min-width:150px;
max-height: 300px;
padding: 8px;
background:white;
border:1px solid rgba(0,0,0,.12);
}
For example, adding padding-right: 15px fixes the issue but then leaves the other browser's with an extra 15px.
Or adding a fixed width to the Parent fixes issue but then you're bound to a fixed width restriction and I want to leave the Parent flexible.
Or adding overflow-x: hidden hides the scrollbar, but leaves the Child cut off.
Update: display: flex on Parent fixes the issue for regular widths (ie: an image) but not the widths set by text with whitespace: nowrap.
Thanks.
Firefox:
Chrome:
you can use #-moz-document to write some styles could be recognized by firefox only. see this: https://developer.mozilla.org/en-US/docs/Web/CSS/#document.
hopes helpful.
I have the following markup:
<a class="logo" href="/" style="
display: inline-block;
"><img src="/img/logo.svg"></a>
only on IE 11 it seems like the img is pushed down and cut off.
.logo CSS
border-radius: 0;
float: left !important;
background-color: transparent;
margin-top: -10px;
padding: 0;
margin: 0;
and on the img I only have the width set to 130px.
The link and also the image are inline-block , that creates a lot of space due to line-height. Use a reset or set the outline/border to 0 for both links and image and set the line-height to 1 for these two elements.
A couple of ways to handle this in case anyone else experiences this issue.
Give img a min-width and min-height of a value higher than the width. In your case it's 130px so 131px? You'll have to play around to see how many pixels are being clipped. -- this is specific for IE11
or
Give img a min-width and min-height of a value of 100% and position it relative to the containing element - .logo class. If you want the img to live inside of the containing element, you'll need to give it a width that is larger than the img. -- this is better for cross browser support.
Hope this helps.
I have a div container (header)
div.header {
width: 1024px;
height: 115px;
background-color: black;
}
which contains a h1 named header_title with a text inside:
#header_title {
font: 80px 'Oxygen', sans-serif;
letter-spacing: -8px;
margin-left: 25px;
text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}
Exactly below header div i have my menu, like you see in my image.
If I set a text shadow that will go out the div, (the 4th letter, a 'g') ho can I make it displaying anyway and don't be cut off?
I tried overflow: visible, and z-index solution, but it doesn't work =(
Thanks.
Markup for header:
<div class=header>
<h1 id=header_title>Programmazione</h1>
</div> <!-- fine header -->
<div class=menu>
etc......
Try deleting the height property of the header and give it a padding-bottom of about say 15px for the shadow. That should do the trick.
I don't your HTML markup to test and be sure, but I believe that what is happening is that the the shadow is going outside the header div. I see no reason in the CSS you've provided that it wouldn't be.
What is happening is that the menu image that follows is blocking it. For most browsers, if you are positioning items by default (ie not absolutely, not relatively, not fixed) then, in situations where they overlap, the following neighbor is above. Also, if you are positioning elements this way, the z-index does not affect them. z-index only works on relative, absolute, and fixed elements.
One solution is to give both elements position:relative; and then the position your header div higher than the menu using z-index.
I have an image with float:left, and I’d like it to overflow its parent, but cut off the overflow. Here’s what it looks like without any overflow rules:
Here’s what I want:
Here’s a fiddle: http://jsfiddle.net/ZA5Lm/
For some reason, it was decided that overflow:hidden without an explicit height results in the element growing.
Can I somehow achieve the effect I’m after without setting an explicit height? An explicit height doesn’t work because I want this div to size automatically based on content length and browser width.
In my opinion using overflow: hidden without setting dimensions doesn't make sense. If you don't want to specify the height of the container and if your images have a fixed width you could use this solution: http://jsfiddle.net/ZA5Lm/11/
The image is positioned with absolute, taking it out of the text-flow. However - and I'm aware that this may be ugly - you need to specify a padding-left to move the text away from the image.
It's a bit tricky (I use relative + absolute positioning and a specific padding to position text) but it does the effect you asked without changing markup or setting height:
body {
padding: 10px;
}
img {
float: left;
position: absolute;
left : 10px;
}
div {
border: 1px solid black;
padding: 10px 10px 10px 280px;
position : relative;
overflow: hidden;
}
I just inserted style (even if float:left would be no longer necessary)
I seen a post over at CSS-Tricks and it talked about this. Go check it out at -
http://css-tricks.com/minimum-paragraph-widths/
It might be useful :) Good luck
Also just looked at your code and I added float: right to your div so it looks like this -
div {
border: 1px solid black;
padding: 10px;
float: right
/*overflow: hidden;*/
}
Not sure if that's what you want?
I'm attempting to provide a consistent width per line in pixels inside of a textarea across IE8, Firefox and Safari, so that text content wraps lines as predictably and consistently as possible.
Firefox is doing something a little bit odd: it has an extra pixel of padding eating out of the content space of the textarea vs the other two browsers, and vs a similarly equipped div block.
When applying this class to both a textarea and a div the difference is visible, with the text in the div touching the outer left edge of the red background but the text in the textarea have 1 px padding-like offset in spite of padding being zero:
.testbox{
padding:0;
margin:0;
border:0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
Other values for padding wind up displaying one extra pixel of offset vs a div.
Any ideas on if there's a way to trick Firefox to render a textarea as if it were a div, or to adjust this not-padding-but-looks-like-padding property for a textarea?
I have recently been doing some researching on the problem described by OP for a similar question on SO. It seems that a bug in Firefox is causing the rendering of this so called "not-padding-but-looks-like-padding" on textarea elements.
Usually this extra padding is not really an issue, but it becomes an issue when you want to keep two elements the same width, and you care about getting its content to wrap the same way in both elements.
Getting textarea's to wrap content the same as e.g. div elements in Firefox
It seems to be impossible to get rid of this 1.5px wide padding on the textarea in Firefox, so if you want to ensure that the content wrapping inside a div in Firefox behaves exactly the same as the content wrapping inside a textarea in Firefox, the best approach seems to be to add an additional 1.5px of padding on the right and the left hand side inside the div, but only in Firefox. You can accomplish this by setting the following vendor specific prefixed CSS properties on your div:
-moz-box-sizing: border-box;
-moz-padding-end: 1.5px;
-moz-padding-start: 1.5px;
The first ensures that the padding set on the div does not increase the width of the div, and the next two ensure that 1.5px of padding will be set on the right and the left hand side of the div.
This approach does not affect the rendering of the div's in any other browsers, it doesn't need to, as textarea's in other browsers don't render any extra padding. But it ensures that there are no content wrapping differences between div's and textarea's inside Firefox as long as they share the same font-family and font-size properties and so on.
Here's a jsFiddle for demonstration purposes.
Getting textarea's to wrap content consistently across browsers
If you only wanted to ensure that a textarea in Firefox has the same width and wrapping behaviour as a textarea in other browsers, you can set its box-sizing to border-box, add a padding on both sides of 5.5px and set -moz-padding-end and -moz-padding-start to 0px.
textarea {
padding: 0 5.5px 0 5.5px;
-moz-padding-end: 0px;
-moz-padding-start: 0px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Here's a jsFiddle showing this approach.
Wow, I don't know the answer yet but I did try some stuff, and it appears as though a textarea, when you apply borders, margins and padding to it, doesn't change its width but puts the borders etc. on the inside. Try this:
.testbox {
padding: 10;
margin: 10;
border: 5px solid black;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
You could work around this by using something like this:
<div class="testbox">
<textarea class="testarea"></textarea>
</div>
css:
.testbox {
padding: 0;
margin: 0;
border: 0;
background: red;
width: 40px;
height: 40px;
font-size: 12px;
line-height: 16px;
}
.testarea {
padding: 0;
margin: 0 -1px;
border: 0;
background: red;
width: 100%;
height: 100%;
font-size: 12px;
line-height: 16px;
}
This also seems to work in IE, except for the -1px, which throws the layout off (by one).
This is a bug in firefox which got fixed a few days ago. The fix will be released with Firefox 29.
I already tried the latest nightly build and the textara bug is gone!
I was facing the same problem and although my solution seemed like bending backwards too much for that one pixle, but it fixed the problem, here goes: To unify the width because of this weird behavior, Instead of using a div, i used a disabled textarea with a white background and a default cursor to act as a mimic the div.
I was having a similar problem, a link tag with a background image and padding did not display well on firefox. The padding and background seemed to apply to the line of text, not the block of text, when multiline. I tested out a few things, and ended up using a "display:block;" on the element css. Worked for me.