So, this morning, for fun, I grabbed the file of unicode characters over at http://www.unicode.org/Public/6.2.0/ucd/NamesList.txt and wrote a little tiny PHP script that will output that to the screen. It takes a couple seconds to load the literally thousands of characters and render the HTML.
I tried to make a very simple grid, using inline-block divs with overflow hidden. But when I view the page in Chrome some of the boxes are shifted down or up from the rest on it's row. But only sometimes.
http://shawnsworld.ca/chars/fullunicode.php
The CSS code: http://shawnsworld.ca/chars/style.css
Any idea why Chrome would render the boxes so they are NOT in a straight row?
In Chrome, div.character has a default vertical-align of baseline.
Try removing height:100px; from div.character in your CSS. You'll see that all the boxes are sitting on the baseline of each row.
As Huangism says, changing the vertical-align to top fixes the issue.
Try adding vertical-align to your divs
div.characters {
vertical-align: top;
}
Something to compare:
http://www.unicodeblocks.com/block/Dingbats
Is this what you looking for? If yes I can give you some advice.
...other thing, there are lots of errors, in example:
<div class="character">
<span class="entity">&#x##;</span><br>
<span class="unicodeNumber">## </span><br>
<span class="name">07C0</span>
</div>
just skip any line starting with #
Related
I’m using a <marquee> tag on top of my site’s homepage and want to include some small headlines. My problem is I can’t make space between the headlines, they come out too close together.
I’ve already tried including a big space like this:
<marquee>Headline1 Headline2</marquee>
And I’ve tried including a line break like this:
<marquee>Headline1
Headline2
</marquee>
So I am expecting to have a big space between the two headlines, but those two attempts have resulted in only one space between them.
I know you didn't use tags inside, but a better practice would be to enclose each of those headlines into tags, like span, div or p.
Like this:
<marquee>
<span>Headline1</span>
<span>Headline2</span>
</marquee>
Then, you could set the CSS using flexbox to create the space between them, like this:
marquee {
display: flex;
justify-content: space-between;
}
Hope it helps.
Detail: Marquee feature is obsolete. Although it may still work in
some browsers, its use is discouraged since it could be removed at any
time. Try to avoid using it.
Ok I tried the accepted answer above using the CSS flex but had no luck It still ignored the space on google chrome .
I got the space between the elements using a margin-right CSS attribute in the span tag..
<marquee style="background-color: #222031; ">
<span style="color:#70db70;margin-right:200px"> BTC : 44.50 USDT </span>
<span style="color:#f3865c;margin-right:200px"> ETH : 12.40 USD </span>
</marquee>
In <span> elements in HTML narrative flow, in order to expand the area on which clicks are detected (some of the spans have content of only one character), I am adding padding (offsetting it with a negative margin) in a class defined as
.expand-click-area {
display:inline-block;
padding:5px;
margin:-5px;
position:relative;
}
This works fine in terms of the clicking behavior. The problem is that Chrome 19 will sometimes line break between the span and the following comma in a case such as the following:
<span class="expand-click-area">this is span text</span>,
Any thoughts on how to prevent this? Essentially, I would like breaking behavior equivalent to that when the <span> is not there at all, or does not have display:inline-block.
This behavior does not seem to appear in IE10. See an example at http://jsfiddle.net/58XdJ/1/.
Try wrapping the entire non-breakable text into the <nobr> tag.
In case anybody faces this problem and none of the above solved solutions the problem like in my case, i found that adding this to the span will solve it.
display: contents;
Hope this helps someone ;)
I have a code setup for a FAQ page like this:
<p><strong>This Is A Question</strong></p>
<p><strong>Answer.</strong> This is the content of the answer, and I am going to keep
typing until it kicks to a new line.</p>
I do notice that when this displays via the browser the new line does not align up to the start of the Answer Content. Align as in from the left. I am also aware not to expect HTML to do such a thing, must question is. What are my options on coming across "indenting" this text per se?
Any help would be greatly appreciated!
Inspired by Nicole Sullivan's css .media element, you can check out a two column solution update to your jsfiddle.
I think this is what you want:
<p><strong>This Is A Question</strong></p>
<p><strong style="float:left">Answer.</strong>
<div style="display:inline-table;float:right">This is the content of the answer, and I am going to keep typing until it kicks to a new line.</div></p>
Edit: Scratch that, it works in FF + IE, but not in chrome
Try negative padding in CSS for the div of your paragraph.
Usually work across webkit and gecko.
In this fiddle, you can see that the horizontal rule does not go all the way across (under the number). I want it to. I have tried using list-style-position:inside;, however this means that I cannot force the number to appear in the correct position (because of the floated left image). Is there an elegant way to do this using CSS, or do I have to resort to generating the numbering myself and then styling appropriately?
You seem to be well aware of the list-style-position property, so you should know why the horizontal rule will not span all the way under the bullet/number. The list has a padding on the left, pushing the list elements to the right. Their contents won't go out of their space :).
Here's how I got over the issue: http://jsfiddle.net/J4b6Y/14/
[EDIT]
Fix for webkit browsers: http://jsfiddle.net/J4b6Y/16/
[EDIT2]
Works in all browsers AND has valid HTML o_O http://jsfiddle.net/J4b6Y/37/
[EDIT3]
OK, here's another one... http://jsfiddle.net/J4b6Y/39/
UPDATE 4
Seems like Update 3 worked well on webkit but not FF... so it's time to use real CSS power.
http://jsfiddle.net/J4b6Y/122/
UPDATE 3
Now what about this
http://jsfiddle.net/J4b6Y/105/
UPDATE 2
http://jsfiddle.net/J4b6Y/48/
UPDATE
Try this if it works for you
http://jsfiddle.net/J4b6Y/33/
I would suggest that you remove the hr tag and the floating image properties.
If you cannot set the image with css background, you can do the following:
HTML
<li>
<img src="" alt="test"/>
<p>Test</p>
</li>
CSS
li{
border-bottom:1px solid black;
list-style-position:inside;
}
li p{
display:inline-block;
}
Also, if you can remove the p tag, you will save few bites.
From the other answers to the question, it would seem that whilst there are ways of accomplishing this with CSS, there isn't an elegant way. As such, my prefered solution is to generate the numbering in the HTML and style appropriately. This can be trivial to do if the page is generated as a result of server side scripting.
I shall keep an eye out for more elegant ways of solving this with CSS and update this question if I find any.
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.