I have a small website that i tested on IE,FF and it seems to work fine.
when i try it on chrome or safari some of the elements get positioned in the wrong place - but only some of the time. this happens around 50% of the time (5 out of 10 refreshes).
these are the elements and related CSS:
<div id="ctl00_mainFormPlacHolder_incidentsList" class="incidentsList">
<a href="ManageUserTasks.aspx?IncidentID=7">
<div class="incident lightBackgroundMarginBottom completed" runat="server" onserverclick="incidentClicked">
<div class="incidentName"> All Completed Incident </div>
<div class="incidentDateTime"> <span>8/12/2013 | 08:42</span> </div>
</div>
</a>
</div>
.incidentsList {
max-height: 820px;
overflow-y: auto;
overflow-x: hidden;
}
.incidentsList a {
text-decoration: none;
}
.incident {
width: 100%;
height: 64px;
line-height: 64px;
}
.incidentName {
height: 100%;
width: 50%;
text-align: left;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap;
overflow: hidden;
margin-left: 10px;
}
.incidentDateTime {
height: 100%;
width: 40%;
text-align: end;
float: right;
margin-right: 10px;
}
as you can see what i want to have is a line (.incident) with 100% width, and in it on the left i should have some text (.incidentName) and on the right side some other text (.incidentDateTime).
i have several lines, but even with a single line i get the same problem -
what happens is that sometimes the right side text (.incidentDateTime) is displayed exactly 1 line below where it should be.
what am i doing wrong?
well I think its the cascading effect, like when the content on either of the div gets a bit larger, the div containing it grows since its in percentages, and maybe giving a "max-width" property to both the adjacent divs shall make it concrete.
Related
I have a problem with Firefox on a really specific graphic implementation.
I think you may understand the problem just by testing this fiddle: on firefox you'll see the problem, on any other browser you'll see the expected result (including IE9).
Design I need:
PNG illustration
I have a main block (dashed border) with a fixed width.
There is 2 lines, one above the other, within the main block. The 2 lines must be align on the right of the main block
Each line contains 2 children. The left ones have a dynamic text (gray background), the right ones are optionnals (blue background). The above right one contains an icon (orange) with a fixed width, the bellow right one is a dynamic temperature (with one decimal maximum).
Blocks are separated by a fixed 5px margin.
Texts and icon must be vertically centered.
In any case, the 2 lines need to have the same width: the smaller one takes the width of the bigger one.
If one line (or both) becomes too large for the main block, the left text (gray background) automatically linebreak.
HTML Code:
<div class="main-wrapper">
<div class="container">
<div class="content upper">
<div class="right-block"><!-- This block is optionnal -->
<div class="icon"></div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some dynamic text
</p>
</div>
</div>
</div>
<div class="content lower">
<div class="right-block"><!-- This block is optionnal -->
<div class="vertically-centered">
<span>
21,5°
</span>
</div>
</div>
<div class="left-block">
<div class="vertically-centered">
<p>
Some other dynamic text
</p>
</div>
</div>
</div>
</div>
</div>
CSS Code:
/* utilities */
.vertically-centered {
display: table;
height: 100%;
width: 100%;
}
.vertically-centered > * {
display: table-cell;
vertical-align: middle;
}
/* custom styles */
.container {
display: inline-block;
float: right;
max-width: 100%;
}
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
}
.right-block, .left-block {
height: 100%;
}
.right-block {
float: right;
font-size: 42px;
margin-left: 5px;
background-color: lightblue;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
}
.upper .right-block {
width: 85px;
}
.lower .right-block {
padding: 0 15px;
}
.icon {
position: relative;
top: 20%;
left: 20%;
width: 60%;
height: 60%;
background-color: orange;
}
What I already tried:
Put a display: inline-block on the .left-block div, as suggested here, but it doesn't satisfy the need to have the same width on both lines.
Put a display: inline-block on the .content div; makes the line 100% width on other browsers, and create a big right gap within the .left-block on firefox.
Use white-space: nowrap on the .left-block; didn't help.
Make the .left-block div floating (right or left), but it doesn't work if the text is too large for the main container
And a lot of other things but not a single one compatible with all the browsers (Chrome, Firefox, Safari, IE9+, Edge)...
A precision although I don't think it will change anything: it is responsive.
I'm trying something with flexbox but... IE9... If anybody has a suggestion.
You can use the CSS word-break property to allow line breaks in the middle of long words:
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
word-break: break-all;
}
I found out a solution with flexbox!
I added a display: flex to the .content div with flex-direction: row-reserve to keep the order of the element and still be able to use float: right for IE9.
In addition, there is a flex: auto property on .left-block divs to take as much space as possible (Note: IE11 needs flex-basis to be set to be able to calculate the space wanted by the flex-grow property. That's why I used auto instead of 0 on the flex property. See details)
The completed CSS code
.content {
width: 100%;
margin: 5px 0px;
height: 85px;
display: flex; /* Initialize flexbox */
flex-direction: row-reverse; /* keep the order of the element */
border: 1px dashed gray;
}
.left-block {
font-size: 25px;
line-height: 25px;
overflow: hidden;
padding: 0 20px;
text-align: left;
background-color: lightgray;
flex: auto; /* the text blocks take all the available space */
}
Here's the fiddle with the correction. Sometimes IE9 takes 2 lines of text instead of 1 (the text is 2px larger that the container, I don't know why...) but atleast it's readable!
Codepen link: [removed for privacy]
(Ignore the search button, I am mainly concerned with results displayed within it's parent element of #results_container).
On the actual app, results will be generated based on a search term,
I have the overflow set to "scroll", but as you can see, the bottom result still overflows. What gives?
#results_container {
height: 430px;
overflow: scroll;
margin-top: 5px;
}
The unwanted "bottom result still overflows" seems to be due to the height: 100%; CSS definition for the #wrapper div.
If you remove "height: 100%; from #wrapper, I think you'll see the results you were looking for.
Also, notice that the #wrapper div expands and collapses as the browser's display is expanded and collapsed. Once the height: 100%; is removed from #wrapper, the #wrapper height does not change.
I made a fork from your codepen.
#sidebar {
border: 1px solid black;
width: 40%;
margin-top: 22px;
height: 93%;
overflow-y: hidden;
}
#results_container {
height: 430px;
overflow: auto;
margin-top: 5px;
}
Here the full example: codepen fork
I want to make a horizontal scrolled portfolio site, now the homepage works fine. But my biography page doesn't get wider when inserting more text.
I'll show you with an example:
This is how I want it to be when there are 2 columns of text; works fine. http://fjkip.nl/test/biografie.php
And this is what happens when there are 3 or more columns of text; the green background doesn't expand.
http://fjkip.nl/test/biografie2.php
HTML:
<div id="content">
<div id="scroll-wrapper2">
<div id="post-text">
*TEXT IN HERE*
</div>
</div>
</div>
CSS:
#content
{
height: 350px;
overflow: auto;
}
#scroll-wrapper2
{
white-space: no-wrap;
}
#post-text
{
background-color: #00ff00;
height: 275px;
font-size: 10pt;
-webkit-column-width: 20em;
padding: 10px 5px;
}
Does anyone know how to fix this?
Try adding a width or max-width to your #post-text container, and adding the overflow-x: scroll; to your stylesheet. Not sure what exactly you're trying to accomplish, but this keeps the content on the page. The width you apply will need to be changed depending on your site settings, but this is the general idea.
JSFiddle
#post-text
{
background-color: #00ff00;
height: 275px;
max-width: 500px; /* change to desired width */
overflow-x: scroll; /* added so scrollbar happens in this container */
font-size: 10pt;
-webkit-column-width: 20em;
padding: 10px 5px;
}
setting overflow: scroll to #post-text should get you there.
I wanted my left right content be centered after zooming in 500% plus on the web page, I have tried so many ways, but still don't have an answer can anyone give me a hand here please.
copy and paste to make a new webpage, you can't see if you paste on fiddle or codewall.
html:
<body>
<div id="lower_body">
<h1>center content</h1>
<div id="outer_warpper">
<div id="outer">
<div id="left"><h1>left</h1></div>
<div id="right"><h1>right</h1></div>
</div>
</div>
</div>
</body>
CSS:
#lower-body {
margin: 0px;
padding: 0px;
}
#outer_warpper {
width: 100%;
height: 100%;
margin: 0px;
padding-top: 2%;
padding-bottom: 2%;
background-color: yellow;
overflow: hidden;
}
#outer {
background-color: black;
text-align: center;
vertical-align: middle;
display: table;
margin:0px auto;
overflow: hidden;
}
#right {
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: red;
}
#left{
width: 450px;
height: 350px;
display: inline-block;
vertical-align: middle;
background-color: grey;
}
img{
widht:100%;
height:100%;
}
h1{
text-align: center;
}
as you can see when it reach 500% (ctrl+mouse scroll), the left and right text is not in the center any more, because it push to left somehow.
can one help me make it? Thank for helping. I had tried the width:% also dont work, some one say it need to be done in #media.
This is a normal behavior...
Your two divs are positioned relatively next to each other. If they can't fit the one next to the other then the second one will reposition itself underneath the first one...
if you REALLY want to make it work on 500% zoom what you can do is:
Resize your divs (example)
Use % widths (example2)
Personally i would go with my second example. The choice though is yours (depending always on why you need to achieve this)
PS: % width was not working because you were using display:table; on the #outer div
This is not a problem or even a bug, it's just the normal behavior of the browser. It's just too much zoom to keep any consistency. I think 400% is the max in this case. If you try it in FireFox, you won't get this problem because it doesn't go till 500%.
It's pretty good to be concerned about zooming in a web page, but 500% is just too much to any page work fine.
Example
If the adjacent element of a parent floating, the parent does not feel the width of the element, if it is dynamic. In chrome and opera works fine.
<div class="b-wrap">
<div class="b-content">
<div class="b-rect-left"></div>
<div class="b-rect-right"></div>
<div class="b-child-cont">джигурдаололо</div>
</div>
</div>
.b-wrap {
background-color: red;
height: 50px;
float: left;
}
.b-content {
margin: 5px;
overflow: hidden;
}
.b-rect-left {
width: 40px;
height: 40px;
float: left;
background-color: orange;
}
.b-rect-right {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.b-child-cont {
overflow: hidden;
}
Firefox calculated the width of an element that contains floats differently from Chrome. I don't know why.
However, what seems to be happening is the following.
The actual content in your snippet is in b-child-cont, a non-floated element. b-child-cont determines the width of b-content since the two other elements are (b-rect-left and b-rect-right) are floated and do not factor into determining the width of the content. In turn, the width of b-content sets the width of b-wrap, because b-wrap is floated and takes on the width of its child elements.
You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.
(1) Add left and right margins to b-child-cont:
.b-child-cont {
overflow: hidden;
background-color: yellow;
margin-left: 40px;
margin-right: 30px;
}
(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.
(2) You can also specify a with to the parent element containing the floats:
.b-child-cont {
overflow: hidden;
background-color: yellow;
text-align: center;
}
.b-content {
width: 30em;
}
In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.
You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73
Just add this firefox exception
#-moz-document url-prefix() {
.b-wrap{width:175px;}
}