I'm making a "sort elements" web game using jQuery, HTML & CSS. While everything works fine in FF, IE8, Opera, Chrome, I'm having problem with IE7 wrapping words inside block elements.
Here's how it looks in IE7 (wrong):
Link (cannot post images as a new user)
In IE8 the box with wrapped text would just expand to fit it whole in one line without any overflows. Sorry, can't give another link as a new user
Don't mind the element order as it's random. Elements are dynamically generated by jQuery.
HTML code:
<div class="ui-sortable" id="area">
<span class="object">: </span>
<span class="object">1998- </span>
<span class="object">ISSN 1392-4087</span>
<span class="object">, </span>
<span class="object">. </span>
<span class="object">nepriklausomas savaitraštis buhalteriams, finansininkams, auditoriams</span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">. </span>
<span class="object">Vilnius</span>
<span class="object">1998- </span>
<span class="object"><em>Apskaitos, audito ir mokesčių aktualijos</em></span>
</div>
CSS code (irrelevant info like fonts & colors removed):
#area {
min-height: 160px;
width: 760px;
}
.object {
display: block;
float: left;
text-align: center;
width: auto;
}
Any comments on why does IE7 does that? How do I make these spans expand to fit the whole text in one line in IE7 and not wrap the text or make overflows?
I tried it out myself in IE7, and when you just add 'white-space: nowrap' to the span.object, it should solve the problem. Floating the block elements works just fine, so don't change that.
See image for the test result: http://xs.to/image-B3F6_4BDE909D.jpg
You have a problem. Floats and automatic widths just don't mix. You'll also have issues when it comes to something being wider than the width.
Why not leave it inline? If you need a box, add padding:
span.object { padding: 6px; }
Edit: if you don't want them to break across lines add:
span.object { white-space: nowrap; }
Far easier than getting floats to do this particular task.
Related
i use of display:flex for styling,
it styles elements correctly in chrome, but disrupts in fire fox.
my firefox version:99.0.1
chrome version: 100.0.4896.127 (Official Build) (64-bit).
my main problem:
why this behavior differently in FF & CHROME?
How fix that in FF, that also do not disrupt for CHROME?
.vendor-profile-pins__flag,
.vendor-profile-pins__location-pin {
display: flex;
}
.vendor-profile-pins__flag>img,
.vendor-profile-pins__location-pin>img {
margin-left: 6px;
}
.vendor-profile-pins {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<div class='vendor-profile-pins'>
<div class='vendor-profile-pins__flag'>
<img src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
<span> گزارش این صفحه به ما </span>
</div>
<div class='vendor-profile-pins__location-pin'>
<img src="{{url('/images/icons/vendorPage/pin-alt.svg')}}" alt='pin-alt'>
<span> از تهران، تهران </span>
</div>
</div>
result in chrome( desired, ok!):
bad result in firefoxe( two texts, goes(flows, drops) in second line):
MY answer:
i resolved this problem by this way:
i wrote width:16px; style for both <img> tags and resolved!
my mean of "resolved" is this:
in FF browser, like chrome, two texts, do not over flowed to second line.
but the thing that is important, is this:
in FF, the browser, increases the width of <img> tag, and for this reason, the text of <span> tag, over flows to second line!
but the Chrome, remains width of <img> tag and the width of <span> take width of it's text content(do not need to overflow it's text to second line).
solution in html codes:
insert style of width:16px; to <img> tag:
<img style='width:16px;' src="{{url('/images/icons/vendorPage/dash-flag.svg')}}" alt='dash-flag'>
I have span with contenteditable property. Most of the time the span is empty so I set fixed width to the span.
It works good in Opera and chrome I can click on the span and edit data. But with Firefox span behaves like there is no span.
E.g. When the span is empty in Firefox it doesn't appear as editable and I cannot click on it. When only one character is there, like space or something, then I can edit it. I tried to fixed that with html character but nothing.
$comment = ` `
<span class="edit_notes" contenteditable=true onFocus="clear_input('.$data['ID'].')" style="min-width: 1200px; display: inline-block;display:-moz-inline-box;" id="comment'.$data['ID'].'" onBlur="changeComment('.$data['ID'].')"> '.$comment.' </span>
For FF you may use a pseudo element to give it some size or use the :empty pseudo class if there is no white-space in HTML produced by server when there's no data to print.
Example below to test:
span[contenteditable][onFocus]:after, span[contenteditable]:empty {
content:'';
padding:0.5em;
}
<span class="edit_notes" contenteditable=true onFocus="" style="min-width: 1200px; display: inline-block;" id="comment'.$data['ID'].'" onBlur=""> </span>
<hr/>
<span contenteditable=true ></span>
I'm typing up a document for a nonprofit I'm involved in, and I'm currently working on the headers at the very top of the first page.
It's supposed to be two headers on the same line, one left-aligned and the other right-aligned, and both 13px bold text. It's also supposed to be directly above the title of the document, which is centred in <h1> text style.
Everything is going swimmingly except for the fact that the headers are both left-aligned, and I cannot for the life of me figure out what I'm doing wrong. I know it's not my browser because both StackEdit and WordPress fail to recognise it. And I asked 2 friends to take a look at it, and they can't figure out what's wrong either.
I recognise I probably screwed something up since I'm still learning HTML (I also haven't learned CSS yet), but it has thus far escaped me.
This is what I have:
<span style="text-align:left; font-size:13px"><b>Project Name</b></span>
<span style="text-align:right; font-size:13px"><b>Branch Name, Org
Name</b></span>
<div style=text-align:center><h1>Document Name 1-PubDate</h1></div>
Is this what you are trying to do? Use float css property
<span style="float:left; font-size:13px"><b>Project Name</b></span>
<span style="float:right; font-size:13px"><b>Branch Name, Org Name</b></span>
<div style="text-align:center;clear:both"><h1>Document Name 1-PubDate</h1></div>
Try to use div instead of span like in the following example:
<div style="float:left; text-align:left; font-size:13px; display:inline-block;"><b>Project Name</b></div>
<div style="float:right; text-align:right; font-size:13px; display:inline-block;"><b>Branch Name, Org
Name</b></div>
<div style="clear:both;"></div>
<div style="text-align:center;"><h1>Document Name 1-PubDate</h1></div>
Hope this may help. Best regards,
Because <span> defaults to display:inline, which means it will only grows as wide as its content's width. Try display:inline-block. Also use float to eliminate the white space between them:
span.header
{
display:inline-block;
width:50%;
font-size:13px;
font-weight:bold;
}
span.header.left
{
float:left;
text-align:left;
}
span.header.right
{
float:right;
text-align:right;
}
div.document
{
clear:both;
}
<span class="header left">Project Name</span>
<span class="header right">Branch Name, Org Name</span>
<div class="document"><h1>Document Name 1-PubDate</h1></div>
You are aligning the text of inline elements rather than aligning the elements themselves. If you inspect and look at the spans they are only as large as the text inside them. You can set the width's if you set them to display: inline-block and then the width to 50% and align the text however you want: http://plnkr.co/edit/hQKymbtYp5iBealcEkr3
<span style="display: inline-block; width: 50%; text-align:left; font-size:13px">
<b>Project Name</b>
</span>
<span style="display: inline-block; width: 49%; text-align:right; font-size:13px">
<b>Branch Name, Org Name</b>
</span>
<div style=text-align:center>
<h1>Document Name 1-PubDate</h1>
</div>
I'm going to change things up a bit and make it a bit more semantic (i.e. meaningful)
h1 {text-align:center; /*Center the H1 text*/
clear:both; /*Remove the affects of loats*/}
.preHeader {font-size:13px; font-weight:bold;} /*Set font size and bold pre-head elements*/
.project, .org {width:50%} /*Set common details*/
.project {float:left; } /*Set the project elemetn to the left*/
.org {float:right; text-align:right; } /*Text align the Right side elelment and set it to the right*/
<!-- A Container for your project and organisation elelments -->
<!-- You don't actually need the container, but it seperates it nicely -->
<div class="preHeader">
<div class="project">Project Name</div>
<div class="org">Branch Name, Org Name</div>
</div>
<h1>Title</h1><!-- Already is the width of its parent so don't need to wrap it -->
Learn more about how different elements display. You have block level elements, inline and (inline block) elements, and replaced elements (images and form elements).
Read more about floats here: https://developer.mozilla.org/en-US/docs/Web/CSS/float
And to see a discussion of the merits of floats (and their drawbacks) and the inline-block alternative see: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
On a side note, get to know some of the handy tools. Pressing f12 in Chrome and Internet Explorer give you the developemt tools for those browsers enabling you to inspect element on a web page and see what styles are affecting it and how they are affecting it as well as giving you the ability to experiment with the styles in place. Firebug for Firefox provides the same functionality.
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
I am not sure how to get the following behaviour using a combination of HTML and CSS:
foo = this
foobar = bit
goso = needs
etcetc = aligning
Now I could just insert spaces where required (like I did above), but I'm pretty sure there must be a way to do this "automatically".
I know I could use tables to do this, but would prefer not to. Is there any other way of doing this?
My question boils down to this: How do I automatically align text vertically, in a similar way to tabs in office suites, using HTML/CSS.
Here is an in context example:
<p><span class="a">foo</span> <span class="b">=</span> <span class="c">"abcDeveloper"</span></p>
<p><span class="a">bar</span> <span class="b">=</span> <span class="c">"123"</span></p>
<p><span class="a">foobar</span> <span class="b">=</span> <span class="c">"dfg"</span></p>
<p><span class="a">foobarstar</span> <span class="b">=</span> <span class="c">"456"</span></p>
In this example, I would like text in class b to be aligned vertically.
Thank you in advance!
One method would be to apply display: inline-block; to your span.as, and then give them a set width: http://jsfiddle.net/nzrHn/1/
.a { display: inline-block; width: 100px; }
Add css attribute display: inline-block and min-width: XXXpx