In Internet Explorer 10 I have a problem with flexbox in this situation:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
</head>
<body>
<div style="width: 500px; background-color: grey;">
<table>
<tbody>
<tr>
<td>
<div style="display: flex; display: -ms-flexbox;">
<span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus dui, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The "text very long" exceed from the grey div. In other browser it works. Also in Internet Explorer 11. Now I inserted meta to set Internet Explorer 10 compatibility.
UPDATE:
I updated the code with your corrections, but it yet doesn't works in my situation.
looks like max-width or width is needed too. http://codepen.io/anon/pen/wGgWWW
DISCLAIMER: only tested via the devellopper tools and not a real IE10
.a{
display: flex;
width:50%;
background:red;
}
span {
display:inline-block;
max-width:100%;
}
<div style="width: 50%; background-color: grey;">
<div class="a" >
<span >Text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long very long text very long text very long text very long text very long text very long text very long</span>
</div>
</div>
EDIT from code edited in question.
A table is wrapping the flex container.
Table expands according to content, if table-layout:fixed; is set with a width, the flex container should stands within and child should wrap inline content. http://codepen.io/anon/pen/oxBeoz
table {
table-layout:fixed;
width:100%;
}
<div style="width: 500px; background-color: grey;">
<table>
<tbody>
<tr>
<td>
<div style="display: flex; display: -ms-flexbox;">
<span style="display: inline-block; max-width: 100%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lacus duploplopoloppl i, volutpat vel venenatis at, facilisis non sem. Maecenas eu tempus erat. Maecenas malesuada non orci ut dapibus. Curabitur venenatis eget diam ut mollis.</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
Well, since the same code works in Chrome and not in IE, it seems that there indeed is a bug. I could fix your code on IE by using px instead of % for the second div, also by removing the table. Somehow the interaction of table and percentage is causing a bug.
For me it is clear that the problem is in the way width is computed. What does 50% mean? It is half the width of the offset parent, but the offset parent is the table division, which computes its width based on its contents. You get a circular reference. Change the width of the div to a static px value and you break the circle.
Either way, what is the point of using a flexbox inside a table?
It looks like you forgot to close your <span></span> tag. I would start there. I have a working pen that works for IE10
http://codepen.io/cheapwebmonkey/pen/eZgzLP
Related
I'm new to CSS and have a question about expanding the content of an inner DIV to fill the entire outer div.
I have been researching an answer to my problem for hours and have found dozens of similar questions, but none of the suggested solutions work for me. I'm sure it's that I'm misunderstanding something fundamental, but I can't seem to put my finger on it.
I need to have the blue background cover the entire block between "Some other stuff" and "More different stuff" and the text must be centered vertically and horizontally in the blue block - and maintain the same hover qualities and text-decoration rules.
<div>
<span>Some other stuff</span>
</div
<div class="outer-container">
<h2>
<a class="inner-container" href="https://www.google.com" target="_blank">
Lorem ipsum
</a>
</h2>
</div>
<div>
More different stuff
</div>
I have so much trouble with CSS because I don't know how to gracefully describe what I'm wanting - I'm a developer not a designer!
.outer-container {
background-color: #337AB7;
text-align: center;
vertical-align: middle;
position: relative;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
&:focus, &:hover, &:link {
background-color: #286090;
color: #fff;
text-decoration: none;
}
}
If I put the focus, hover CSS stuff in the outer-container the hover mechanics are not consistent.
I hope I'm making sense...like I said, I have a horrible time explaining design stuff.
Any suggestions?
You just need to set background color to outer-container.
When you set background-color to <a> tag, the background color is assigned to the text only.
Here is you updated fiddle.
Here is the snippet.
.outer-container {
text-align: center;
vertical-align: middle;
position: relative;
background: #337AB7;
}
.inner-container {
background-color: #337AB7;
color: #fff;
height: 100%;
font-size: x-large;
}
<div> <span>Some other stuff</span>
</div>
<div class="outer-container"> <a class="inner-container" href="http://www.google.com" target="_blank">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vestibulum purus vel iaculis accumsan. Nulla vel massa velit. Proin a nisl vel tortor tincidunt pharetra. Nulla tristique porttitor erat. In laoreet, erat non ultricies vulputate, massa mauris tempor ligula, sed dignissim ex augue sit amet sapien. Donec malesuada massa eget turpis consectetur, at feugiat velit aliquam. Fusce dictum ornare dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer non consectetur nunc, at sollicitudin nibh.</a>
</div>
<div>More different stuff</div>
Why can you not change the background colour to be on the parent .outer-container?
This would solve your immediate issue.
See http://jsfiddle.net/n1gva5b4/
If a was you i would make a div-container and inside the div(innerContainer) insert the a-link-tag. So the Conainer does what its called (contain-something), applies the color as you want it and the link also works fine.
like this:
<div class="outer-container">
<div class="inner-container" >
Lorem ipsum dolor sit
</div>
</div>
Just in case the outer-container responses don't help, an alternative is to set display: block on inner-container. Block-level elements are the ones that take up all available horizontal space on their parent by default (an example might be, one of these answers), and "inline-level" elements like a (by default anyway) can be placed in the middle of a block of text, only affecting its own text without re-flowing any layout around it.
I have a (WordPress) page on which there are a list of different programs. On the left-hand side is a text description of the program and on the right is an image. Back in the day I would have used a table to make this happen:
<table>
<tr>
<td>Text goes here.</td>
<td><img src="myimage.jpg"></td>
<tr>
</table>
Now I am trying to align it w/out tables:
<p style="text-align: left">Text goes here.</p>
<img class="alignright size-medium wp-image-119" src="imageurl.jpg" width="300" height="199" />
<hr>
Problem is that if there isn't enough text, the image begins to take up space in the next program's section. Here is a screenshot:
You can see that the placeholder image is not remaining above the HR and beginning to slide into the next program's segment. How can I prevent this?
You can still use the table display model:
p {
display:table;
width:80%;
margin:auto;
}
p span {
display:table-cell;
vertical-align:top;
}
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
<span><img src="http://lorempixel.com/300/199"/></span></p>
<hr/>
Personally, I would use ul and li to get the job done.
<ul id="program_list">
<li id="program_item" class="item01">
// HTML for program item goes here
</li>
<li id="program_item" class="item02">
// HTML for program item goes here
</li>
</ul>
Then you would use some CSS to set the width of the ul and make sure that each li is the full width, and does not float the next item, with this you could also so a border-bottom: to separate each program.
#program_list {
width: 600px;
}
#program_item {
width: 100%;
overflow: hidden;
float: none;
padding: 10px 0;
border-bottom: 1px solid #666;
}
Assuming you have already cleared your CSS initially; if not, you may have to add more CSS to style correctly.
I have a table with max-width: 300px;. In Mozilla Firefox, IE, and Opera, if the content of the table is wider than 300 px, it tries to break it. If it can't be broken, it allows the table to resize over 300 px. How can I achieve this behaviour in Google Chrome?
Edit:
<table style="max-width: 300px; background-color: yellow;">
<tr><td>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</td></tr>
<tr><td>LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.</td></tr>
</table>
In Firefox the table is 625 px wide. The text is dynamically generated.
Just add the following style to the table or the cells
word-break: break-all;
This will force the work to break even if it does not have spaces and not break the tables width, and it wont force you to set a min-width / width on the table either.
Edit:
This should give you the desired behavior:
<html>
<head>
<style type="text/css">
table {
width: auto;
}
</style>
</head>
<body>
<div style= "max-width: 300px">
<table style="background-color: yellow;">
<tr class="text"><td><div>Lorem ipsum dolor sit amet consectetuer euismod nibh amet Vestibulum ornare. Natoque convallis auctor arcu ac.</div></td></tr>
<tr class="text"><td>
LoremipsumdolorsitametconsectetuereuismodnibhametVestibulumornareNatoqueconvallisauctorarcuac.
</td></tr>
</table>
</div>
</body>
</html>
My web page renders as I expect in IE. When I get into Firefox, it renders an important div in the wrong place, throwing the layout off. From what I can tell, Firefox is just wrong. How can I get Firefox to render the div in the correct place?
I've put borders around three of the divs to make it easier to see where they're being rendered. The purple one is the one that is incorrect in FF, but correct in IE.
EDIT
JSFiddle: http://jsfiddle.net/PYy6t/1/
JSFiddle renders the code identically (and in the same manner as FF) in both browsers, but IE10 renders it as I want it, and as my screenshot shows, when actually running the page.
My code:
<div style="float: left; clear: both; width: 100%;">
<asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
<hr />
<br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
border-width: 1px;">
 
<div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
//details removed
<div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
//details removed
 
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
 
</div>
<hr style="width: 100%;" />
The Firefox render:
The IE render:
As you can see, FF is starting the div way up above the header text and the top hr, despite the fact that both should be taking the entire width. This is causing the second hr to render underneath the red-bordered panel (along with a label that should be further down the page), rather than beneath the purple panel. What am I missing?
Your issue is known as the clearfix problem. It is not only occuring in FF, but also in webkit browsers (safari and chrome). I even think that only IE handles it as you state you expect it to.
The problem only occurs when you have a parent div container, with all its children floating inside it. For a better explanation i suggest googling 'clearfix'.
The solution stated by #Kev does indeed work, but it requires you to a an extra element to your DOM, wich is only used for styling, wich is considered bad practice. I suggest working with some sort .clearfix class. I usualy work with the one from twitter bootstrap:
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
All you have to do is apply it to your #divTop container and you should be fine. An explanation on how and why it works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/
Your HTML is pretty invalid at all. I don't know if you're using some fancy CMS but it's not right at all.
you don't close your divs inside #divtop
using css inline in html is bad practice, as it's supposed to be very poor in changing it.
if you want your divs side by side, they have to get the style attribute float:left
if you want to wrap the purple div around the others, it has to have overflow:auto in order to resize with its children
InternetExplorer is NEVER right, try to develop with firefox, chrome or safari. These are supposed to be the best of the developer browsers.
The result in all this would be:
<div style="float: left; clear: both; width: 100%;">
<asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
<hr />
<br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
border-width: 1px; overflow:auto">
 
<div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; float:left;">
<p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
<div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px; float:left;">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
 
</div>
<hr style="width: 100%;" />
If you can, then clear the float:left you have in your divs.
If thats not an option, then Kev answered how you can fix it.
float:left;//remove it or change it into
float:none;
I've created this fiddle. Take a look.
I'd like to code html+css to achieve result as shown on attached image: .
I mean the coding part with text and arrow box. Putting just position absolute is not an answer, cause I need text to float round the arrow box. Is there any way to do that?
I've alredy tried putting all kinds of floats on box and paragraf tag with text. Placing arrow box before, after and in paragraf tag. Also tried using vertical-align and position on arrow box.
Fiddle to play with:
http://jsfiddle.net/K2S5y/1/
<div class="content">
<p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas males elit lectus felis, malesuada ultricies. Curabitur et ligula.</p>
<div class="arrowMore">arr</div>
</div>
.content{width:170px;height:170px;border:1px solid red;}
.arrowMore{background:blue;width:70px;height:70px;}
Use clear:both ex.
<div style="float:left; width:300px">
<img/>
</div>
<div style="float:left; width:300px">
Text text text
</div>
<div style="clear:both"></div>
you can see the live example here:
http://webdesign.about.com/od/examples/l/bl-css-float-examples.htm#floating
#arrow {
float: right;
}
/* then possibly */
#arrow:after {
content: ' ';
display: block;
clear: both;
}