Im working on a little project where I want to add a button which opens a menu. The button looks great on Firefox, but when I check on brave or chrome the button elements seem to slip out and I cant pinpoint what it is...
Button on Firefox
Button on Chrome
This is the button with the elemens inside.
<button id="add-menu">
<img src="plus.png" height="40px" id="plus-minus-icon"><p>Add New Menu</p>
</button>
This is the CSS code, hope you can help me.
#add-menu {
grid-area: 5 / 1 / 5 / 3;
height: 100%;
width: 80%;
background-color: #333333;
border-radius: 25px;
justify-self: center;
display: flex;
align-items: center;
border: 1px solid black;
z-index: 1;
}
#add-menu img {
margin-left: 5px;
}
#add-menu p {
color: white;
font-size: 24px;
line-height: 50px;
}
Use -webkit- and -moz- to solve this problem.
Please take a look here: what-are-moz-and-webkit
Be aware of some known issues with buttons, fieldset and some more when having display flex or grid. You can have a glimpse of this issue here.
Maybe in newer versions of chrome they addressed this issue, this is why it looks fine to #sumeshsn1.
So, in order to solve this issue, wrap the button content on a span element and add the flex properties there:
<button class="button">
<span class="button__wrapper">
<img class="button__image" aria-hidden="true" src="https://cdn2.iconfinder.com/data/icons/free-basic-icon-set-2/300/7-128.png">
<span class="button__label">Add New Menu</span>
</span>
</button>
Some notes:
I remove the id and add classes instead, as this would help you maintaining your code and would enable you to use multiple buttons on your html while being a valid document (you are supposed to have only one id in the document).
As the image purpose is just a visual hint for the button function, lets add an aria-hidden=true attribute to the image element.
Remove inline styles (the height attribute you have on your image tag).
Now, let's review the CSS:
.button {
height: 100%;
width: 80%;
background-color: #333333;
border-radius: 25px;
border: 1px solid black;
}
.button__wrapper {
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.button__image {
margin-right: 5px;
height: 40px;
}
.button__label {
color: white;
font-size: 24px;
line-height: 50px;
}
Some notes:
Remove the grid-aria declarations, as this property only makes sense when using a display: grid element, which you don't.
Remove the z-index as well, you need to mess with this property for your issue.
I also wrote this snippet using BEM. You might want to have a look at how this methodology works and how it can help you here.
You can find the updated pen here.
Related
I have a website with some HTML code that is displayed differently according to the device, even when using Google Chrome in all of them.
This is how it is displayed in one of them:
As you can see inside the red circle the text is not properly lined up. So it should be like in the following screenshot (taken with another device):
In this case, the character 私 is lined up with the other characters of the same font size.
And this is a snippet, where you might see it as image (1) or (2) depending on your device.
.markdownContainer {
padding: .5rem;
word-break: break-word;
}
.example {
border: 0;
text-align: center;
font-size: 1.15rem;
}
.mdContainer {
background-color: #fff;
padding: .35rem;
margin: 1rem .5rem;
border-radius: 5px;
border: 1px solid;
}
.kanji {
display: inline-flex;
flex-direction: column-reverse;
text-align: center;
}
.kanji>span {
font-size: .5rem;
margin-bottom: -.25rem;
}
.example>.kanji>span {
font-size: .7rem;
}
<div class="mdContainer example"><span class="kanji">私<span>わたし</span></span>はスペイン<span class="kanji">人<span>じん</span></span><span class="primary">だ</span><br>I am Spanish</div>
<div class="markdownContainer">Number + <span class="kanji">時<span>じ</span></span><br><span class="kanji">半<span>はん</span></span> can be appended to indicate "and a half"</div>
It is not working in the following devices:
Operating System: Android 10
Google Chrome version: 108.0.5359.128
Operating System: Ubuntu 20.04 (no updates available, at least for Chrome)
Google Chrome version: 108.0.5359.124
The one where it's working:
Google Chrome version: Chrome 107.0.5304.105
Operating System: Android 13
But it's also working in Chrome of Iphone devices for example (can't check the version since I don't have, but I had the change to check it and it was okay).
My only guess is one update of google chrome broke it, and the devices where it does not work it's because they are not updated yet. But I checked the changelog of chrome and couldn't find anything, so I wonder if the code is actually correct or not.
Any ideas what could be going on?
EDIT: I updated the question to add another type of container with the same issue. You can see it also in here https://www.fluento.net/jp/N5/grammar/card/number-%E6%99%82
Since the string with the information comes as a String with some custom markdown, I have no easy way of adding span around the normal text. So if there is a way to do it without setting display: flex I would prefer doing it that way.
You are never aligning your elements to the bottom; therefore, by default, elements try to take up the space that's already available (i.e., space at the top of the page). You need to make a flex and align the items as such:
CSS:
.example {
border: 0;
text-align: center;
font-size: 1.15rem;
}
.mdContainer {
background-color: #fff;
padding: .35rem;
margin: 1rem .5rem;
border-radius: 5px;
border: 1px solid;
}
.container {
display: flex;
align-items: flex-end;
justify-content: center;
flex-wrap: wrap;
}
.kanji {
display: flex;
flex-direction: column-reverse;
text-align: center;
}
.kanji>span {
font-size: .5rem;
margin-bottom: -.25rem;
}
.example>.kanji>span {
font-size: .7rem;
}
HTML:
<div class="mdContainer example">
<div class="container">
<span class="kanji">私<span>わたし</span></span>
<span>はスペイン</span>
<span class="kanji">人<span>じん</span></span>
<span class="primary">だ</span>
</div>
<span>I am Spanish</span>
</div>
Finally I went with the usage of the ruby HTML. It does not directly resolve the question, but it solves my issue.
Leaving the question open in case someone can figure out how to properly do this without the ruby tag.
https://www.w3.org/TR/css-ruby-1/#default-ua-ruby
I am creating my own website and I've came to a strange problem.
I am using CSS and HTML while asking this question (respectively on my web); I m using Mozilla Firefox 66, the Developer version (just has some more web tools etc.)
So, I have a index.html, and index.css, in the index.html it is linked to the index.css <link rel="stylesheet" href="./css/index.css" type="text/css">.
Everything worked until I decided to customize my submit button:
<input type="submit" id="submit" value="Register!">
Basically, I've put this in my CSS (index.css) like I would always do:
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
The thing is. This does not affect the submit button in any way. The strange thing is, if I did:
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
it would affect the button (and of cource registerName etc.). And I think, what the hell?
So, after searching up on here (StackOwerflow of course :) ), I found people doing some methods such as putting it directly into the button (<input type="submit" value="Register!" style="width:600px;height:60px;") worked, but not what I wanted, also things like input.submit(if I replaced id with class) which didn't work. I don't know. This seems like a strange bug or something.
So, all in all: When I simply do #submit{} in the CSS, it does not actually affect the submit id. Although if mentioning more of them (like #submit, #user, #phone{}), it does affect it. Is this a bug or something?
PS: Sorry for the long post, I am new here, and I wanted to explain fully for you to understand
If the css style sheet you have shown us looks like below, the ";" after the first declaration block is going to cause the second selector and declaration block to fail.
#registerName, #registerMail, #registerPass, #submit{
display: block;
margin-left: auto;
margin-right: auto;
font-size: 30px;
width: 600px;
height: 60px;
};
#submit{
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
Use button instead of input.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
}
<button type="submit" id="submit">Register!</button>
Why does it work on the group styling? Hard to say without having the whole CSS. My best guess is that something else is applied in between, like a border. For example, you can make the CSS work with input by setting any valid value to the border attribute.
#submit {
display: block;
font-size: 30px;
width: 600px;
height: 60px;
border: 1px solid lightgrey;
}
<input type="submit" id="submit" value="Register!"></input>
The problem
I recently discovered an encoding problem in my backend for when calculating the initials of a user when the first letter is germanic letter (e.g Ö and Ä). Those letters couldn't be parsed and ended up being a question-mark.
But what I also discovered is a rather peculiar behavior (and the reason I seek advise) in my markup that simply makes no sense to me whatsoever.
I've replicated simplified example below:
ul {
padding: 0;
display: flex;
}
li {
list-style-type: none;
font-family: 'Roboto', sans-serif;
flex-direction: column;
margin: 15px;
width: 260px;
min-height: 200px;
padding: 30px 15px;
text-align: center;
background: white;
border: 1px solid #E8E8E8;
}
.avatar {
height: 35px;
width: 35px;
border: 2px solid #333;
line-height: 35px;
padding: 1px 2px;
align-self: auto;
margin: 10px auto 0;
position: relative;
}
.avatar span {
left: 50%;
position: absolute;
transform: translateX(-50%);
}
<ul>
<li>
<div class="avatar">
<span>?N</span>
</div>
<h4>Örjan Norberg</h4>
<span>orjan#example.com</span>
</li>
<li>
<div class="avatar">
<span>II</span>
</div>
<h4>Isaac Ibarra</h4>
<span>isaac#example.com</span>
</li>
<li>
<div class="avatar">
<span>WW</span>
</div>
<h4>Wyatt Williams</h4>
<span>wyatt#example.com</span>
</li>
</ul>
You'll see that "Örjans" initials are ?N, but also that the "N" is being pushed down to the next line. This doesn't seem to be related to the avatar width because I tried with both long and short initials.
In fact, even if I put WWWWW or something else (pic) that overflows the avatar, there is no line-break which is as expected. I also tried other special characters, such as & and %, but those behave just as any other character or letter.
Question
What causes this behavior when using the question-mark specifically? Is it somehow related to the font (Roboto) or is it my css?
Also, (see pics below) how come this happens when the question-mark is followed by a letter, but not when the order is reversed (letter first) or when followed by another question-mark?
What's going on here??
EDIT 1: Using OSX/Chrome.v59, though can replicate in Windows7/IE11
EDIT 2: Apparently the — character also causes this behavior (thanks to #MrLister for finding this)
What you see happening is that the bounding client rectangle for the combination ?N is too wide to fit without overflow, and so the browser does whatever it should do when it sees overflow, based on default rules and CSS overrides. Part of the reason is that the translate and scale transforms do not reposition elements, they only draw them somewhere else, so your transform does not counteract your absolute positioning. Have a look at http://jsbin.com/gujafokiwe/edit?html,css,output and notice that as far as the DOM is concerned that span is still in its original position, we've only told CSS to draw it somewhere else.
When the browser sees ?N (and specifically: some browsers. Not all of them) it might see that it needs to break the line based on the bounding client rect dimensions. However, browsers are free to pick their rules for when and how to break text sequences (CSS does not specify which rules must be used, only that for unicode content outside of CJK it is advisable to use http://www.unicode.org/reports/tr14/tr14-37.html) and while your example works fine in my Firefox, not breaking the text at all, my Chrome does see overflow, and does try to break up the sequence(s) as best as it knows how to.
Unfortunately, the only true answer on why it does that is in the code for the text render engine - that's either in Blink, or in Webkit, both of which are (mostly) open source and so unless you happen to get the eyes of the person or people who implemented it on this question, you're going to have to seek them out rather than hope they browser Stackoverflow and find your question: your best bet is to read through http://www.chromium.org/blink#participating and then post this question to their dev mailing list.
(Solutions for your problem are varied: remove the .avatar span rule and just text-align: center the parent div, or even better: use flexbox rules)
The ? in the first span is a word-break opportunity; after all, the N is the start of a word. This doesn't happen in the other spans, since those contain a whole word each only. So what you should do is apply white-space: nowrap to the span, so that it no longer wraps.
Edit: while this is not the explanation to what's actually happening - it doesn't happen with most other non-word characters, so "word boundary" is not the whole of the story; see comments - it still provides a practical workaround, so I'm leaving this up.
ul {
padding: 0;
display: flex;
}
li {
list-style-type: none;
font-family: 'Roboto', sans-serif;
flex-direction: column;
margin: 15px;
width: 260px;
min-height: 200px;
padding: 30px 15px;
text-align: center;
background: white;
border: 1px solid #E8E8E8;
}
.avatar {
height: 35px;
width: 35px;
border: 2px solid #333;
line-height: 35px;
padding: 1px 2px;
align-self: auto;
margin: 10px auto 0;
position: relative;
}
.avatar span {
left: 50%;
position: absolute;
transform: translateX(-50%);
white-space:nowrap;
}
<ul>
<li>
<div class="avatar">
<span>?N</span>
</div>
<h4>Örjan Norberg</h4>
<span>orjan#example.com</span>
</li>
<li>
<div class="avatar">
<span>II</span>
</div>
<h4>Isaac Ibarra</h4>
<span>isaac#example.com</span>
</li>
<li>
<div class="avatar">
<span>WW</span>
</div>
<h4>Wyatt Williams</h4>
<span>wyatt#example.com</span>
</li>
</ul>
I have the task of using CSS to create a stylized text box that looks like this:
I've been the server developer for many sites and occasionally do jump in to CSS, and usually figure things out in a reasonably clean way. However, I'm really stuck with this one - it's been an hours-long drag slowly working my way through things, to begin to get this going.
I have not yet begun the colorizing or borders. For now, I'm stuck trying to position the first line of text vertically. I would rather not force the height or width of any of the lines of text, as this seems to me to risk breaking if text/size is slightly changed.
Instead, I'd rather use semantics such as centering and vertical-align: top; (etc) (at least partially).
The green colorization is optional for this question. I'm much more concerned about the positioning of the text. Also, please don't be concerned about the choice of font (I'll hopefully be able to figure that out myself) - but font SIZE (and bolding) is important.
The current state of my attempted CSS is shown below - which doesn't work. My current CSS (below) leaves the image on the page looking like this:
(The blue colorization is just Chrome Web Developer highlighting, which I've provided to indicate the size of the div that includes the text of the first line. The actual background color is white.)
In the above image, I have not begun worrying about the colorization or borders. The current status of the above image is that I'm just trying to get the text "CLICK HERE for a" to appear at the TOP of its div - as noted, WITHOUT setting the height or width of the div to "collapse" onto the text, if possible.
My current trouble positioning the "CLICK HERE for a" text vertically is just one issue I've been dealing with. I would like to have a complete, working sample of the text and text positioning for this image, done "the right way" (or at least done in not a bad way). Perhaps the right way really is to set the width and height of the click-here-for-a div (see CSS below) to be nearly equal to the text dimensions, in order to force its absolute positioning (but as noted, I'd rather not unless answers here correct me, by telling me that this is a good way to do it).
Here is the HTML / CSS for the above (incorrect) image:
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.intro-offer-smooth-click-region {
position: relative;
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
}
.click-here-for-a {
position: absolute;
display: block;
left: 0;
right: 0;
top: 0;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
}
.intro-offer {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.discount-description {
position: absolute;
font-size: 9pt;
height: 12px;
}
What is the right way to use CSS to create the image above - at least in terms of text formatting and positioning?
Posting as an answer at your request. It helps to add span tags around single lines of text that you want to style independently.
JSFiddle Example
HTML:
<div class="smooth-click-region">
<div class="click-here-for-a">
<span>CLICK HERE</span> for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer">Special Introductory Offer</div>
<div class="on-home-delivery">on Home Delivery</div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
CSS:
.smooth-click-region {
display: inline-block;
overflow: hidden;
width: 258px;
height: 61px;
background: #cebd44;
border: inset 1px dotted;
border-style: double;
}
.click-here-for-a span {
font-weight: bold;
}
.click-here-for-a {
display: block;
text-align: center;
vertical-align: top;
font-size: 8pt;
}
.intro-offer-on-home-delivery {
font-size: 9pt;
text-align: center;
font-weight: bold;
}
.intro-offer {
margin-left: auto;
margin-right: auto;
}
.on-home-delivery {
margin-left: auto;
margin-right: auto;
}
.discount-description {
font-size: 9pt;
height: 12px;
text-align: center;
}
Here you are, as simple as it gets http://jsfiddle.net/1dmhLm9c/
.smooth-click-region{
text-align: center;
width: 300px;
background: green;
padding: 10px;
}
p, h2{
margin: 0px;
}
You can style it as you want :)
You can find some site with a similar boxes that works well and inspect it with firebug. That will show you the html layout.. You can get some good ideas for how you want to create your own.
Very simple.
Demo http://jsfiddle.net/7xtf1f8m/
CSS:
.smooth-click-region {
display: inline-block;
border: 2px solid #aa6;
padding: 2px;
background-color: #cc0;
box-sizing: border-box;
text-align: center;
font-family: Arial;
}
.smooth-click-region span {
font-weight: 700;
}
.inner {
padding: 0.3em 3em;
background-color: #aa6;
}
.click-here-for-a {
font-size: 0.8em;
}
.intro-offer-on-home-delivery {
font-weight: 700;
}
.discount-description {
font-size: 0.7em;
}
HTML:
<div class="smooth-click-region">
<div class="inner">
<div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
<div class="intro-offer-on-home-delivery">
Special Introductory Offer<br/>
on Home Delivery
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
</div>
You can create the multiple borders by using the CSS3 box-shadow property. HTML tags have by default some CSS attributes so you do not have to define them in your CSS. For example the tag <div> is a block level element and by default has display: block; (you defined it for div.click-here-for-a).
You do not have to write too much unnecessary css.
This is my example for you:
.smooth-click-region {
background:#acb014;
width:260px;
padding:5px;
position:relative;
box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
text-align:center;
}
<div class="smooth-click-region">
<div class="click-here-for-a">
CLICK HERE for a
</div>
<div class="intro-offer-on-home-delivery">
<div class="intro-offer"><strong>Special Introductory Offer</strong></div>
<div class="on-home-delivery"><strong>on Home Delivery</strong></div>
</div>
<div class="discount-description">2 weeks # 30% off - as low as $78/week</div>
</div>
I did not changed your html code but I advise you to use other HTML tags that have their default css. Use h1, h2, h3 for headlines and p for paragraphs, etc.
I have some text and want it to be higher and inline with the first icon. This is it live: http://www.penguinie.co.uk/#projects the css is:
.german img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content {
display: none;
float: right;
width: 400px;
}
.german:hover .german-content {
display: inline-block;
border: 1px solid;
}
.german-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.chembond-content {
display: none;
float: right;
width: 400px;
}
.chembond:hover .chembond-content {
display: inline-block;
border: 1px solid;
}
.chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
overflow: scroll;
}
And this is the HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/bonding.png" height="60" width="50" />
<section class="chembond-content">
<p>This isn't much of a project, more homework. In Science we were asked to create a poster on the different types of bonding (ionic, metallic, covalent, etc) and I naturally said no as I cannot draw and hate making posters. I then did it as homework and made a website. It was a joint website with my friend Elliott who did all the drawings/images, I then wrote the code. If you are wondering if my teacher like it then I can tell you that he did. If you want to see it then click here. I know there is one mistake in the image but I have put a note at the bottom of that section.</p>
</section>
</section>
</section>
So when I hover over the second icon I want the text in the box to be the same height as the first one is when you hover over it.
Here is what you should add to your css:
.chembond-content {
display: none;
float: right;
width: 400px;
position: relative;
top: -72px;
}
You could add margin-top with a negative value to your CSS, but NO.
A much more maintainable solution would be to have only one <section class="content"> tag, align it, and with JS change the text when hovering over the relevant icon.
when making a question here with simple CSS and HTML consider doing a jsFiddle and sharing that instead of a personal link, otherwise when this is working and your live link changes then the question will be irrelevant.
The CSS Position Approach
So here is my fiddle minus a bit of code clutter:
Demo
The reason the second image is hovered to reveal the the section element with the class of .chembond-content and the element is not at the top (like the first image) is because you are floating it to the right but it's still part of the document flow after that image that you have right before the section.
If you want to have both elements open up in the same spot then you would get them out of the document flow by giving them a fixed or absolute position which in this example I simple set it to 20 pixels from the top and from the right.
Since these elements are not taking up space in the flow of your markup then you are free to position both at the top if you want to.