Encountering an issue that is specific to MAC Safari. Here's the code snippet:
<div class="wrapper" style="max-width:1220px">
<div style="width:50%;display:inline-block">First</div>
<div style="width:25%;display:inline-block">Second</div>
<div style="width:25%;display:inline-block">Third</div>
</div>
The layout looks good on all browsers including Safari on Windows, but on Mac, the third DIV wraps to the next line. Any suggestions?
According to the comments you provided, your elements are set to display as inline-block. Therefore, your code is interpreted in this way:
<div class="container">
<div>First</div> <div>Second</div> <div>Third</div>
<!-- Any new lines will be considered as whitespace -->
</div>
25% + 25% + 50% + whitespace > 100%
To resolve this issue, there are a couple of solutions:
Either write all your <div></div> tags in one line, like this
<div></div><div></div></div>or
simply use float: left instead of display: inline-block.
It is important to note that the way your content appears in different browsers may not be as expected. This discrepancy can be attributed to the presence of whitespace between your inline-block elements, which are condensed to the width of one space character when displayed.
The calculation of
50% + 1 space character width + 25% + 1 space character width + 25%If you are looking for solutions and insights on handling the spacing between inline block elements, I recommend checking out css-tricks.com's article titled Fighting the Space Between Inline Block Elements.
It appears that the issue you are experiencing may be due to whitespace, as mentioned by others.
Have you thought about using flexbox? Check out the browser support at Can I Use.
For a visual demonstration, take a look at this demo
<div class="flex-container">
<div id="one" class="flex-item">1</div>
<div id="two" class="flex-item">2</div>
<div id="three" class="flex-item">3</div>
</div>
.flex-container {
padding: 0;
margin: 0 auto;
list-style: none;
max-width:1220px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-item {
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
#one {
background: lightblue; width: 50%;
}
#two {
background: lightgreen; width: 25%;
}
#three {
background: lightcoral; width: 25%;
}
Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one. I believe the root of this ...
After coming across an article recommending a workaround for a method that isn't considered strictly valid (using target="_blank") by using JavaScript to apply the rules after the page has loaded, I began contemplating if this approach is ethical. It ...
I've been searching for a solution to this layout issue, but haven't found one yet. Here is the basic markup: <div class="container-fluid"> <div class="row border-bottom"> <div class="col d-none d-md- ...
Issue with dropdown links not aligning properly in the Bootstrap navbar. The positioning seems off and can be seen in the screenshot provided where the blue outline represents the ".dropdown" https://i.stack.imgur.com/QmG7v.png Facing a similar problem a ...
Recently, I encountered an issue where the cursor would jump to the wrong place when a user clicked inside a contenteditable div, but not directly on the text. This problem seems to be isolated to newer versions of Chrome and Opera. Interestingly, when I t ...
I'm struggling to utilize v-for in order to create multiple div elements, but no matter how I attempt it (even trying to iterate over a list), the v-for doesn't seem to function properly and always turns the line into a comment when executed. No ...
I recently started implementing CSS3 animations from the Animate.css library and I must say, they really enhance the look and feel of my website. The animations pair perfectly with WOW.js to create stunning effects. However, I have encountered a minor iss ...
Is there a way to replace specific occurrences of a string within a web page's body without disrupting other elements such as event listeners? If so, what is the best method to achieve this? For example: Consider the following code snippet: <body ...
Currently, I'm working on creating a login page in Oracle APEX. While modifying the icon using CSS code, everything seems to be falling in place except for this one particular line: .t-Login-logo { background-image:url(#APP_FILES#LogoUpdated.jpg); bac ...
Looking to utilize an XML file for creating HTML emails? I can create an XSL file to convert it to HTML, but am unsure how to save or copy the resulting HTML. Simply viewing the source of the XML file shows the original XML source, not the transformed HTML ...
I am currently facing an issue with updating the 'like' count in my database using the 'changeRating()' method when a user interacts with local like, Facebook like, or Twitter buttons. Oddly enough, the 'likes' are not being ...
Struggling to combine my sign in and sign up pages into a single index.html page. I'm currently working on a project involving Hybrid mobile app development. ...
Upon making an api call, a json Response is received with the following structure: {"Field":"Amount","FieldName":"Amount","FieldType":"Numeric","MaximumLength":128,"MinimumLength":0,"Options":"Mandatory"} This api call yields between 5-10 of these object ...
Currently, I am working on form validation using Angular 2 and encountered an issue with the error message Cannot read property 'valid' of undefined. The HTML file I am working on contains a form structure like this: <form id="commentform" c ...
Can you extract the text from the img alt attribute using pandas.read_html? The webpage I am trying to scrape has replaced some text with images, and the original text is now stored in the alt attribute of those images. For example: <td> <div>. ...
Is there a way to draw a line in Javascript starting from a specific x/y position with a given length and angle, without having to define two separate points? I have the x/y origin, angle, and length available. The line should be placed on top of a regula ...
I have implemented a scroll function event in my HTML file using the following code: <ion-content (ionScroll)="scrollFunction($event)"> <ion-card *ngFor="let product of products" no-padding> <ion-item class="bigclass"> <i ...
Having trouble with bootstrap4 tabs not working properly? They function well with 2 tabs using the code below: <div class="row"> <div class="col-12"> <ul class="nav nav-tabs" id="registration-picker-acc-select" role="tablist"> ...
I'm currently working on a project utilizing AngularJS and Bootstrap to create a dynamic form. My goal is to have an 'edit' button display when a user hovers over a specific row of the form. However, I'm facing an issue where the row&ap ...
Is there a way to hide the second click event on all anchor tags except those that trigger popupfun? I have a sample page set up. [Check out the JS Fiddle here][1] http://jsfiddle.net/ananth3087/LgLnpvf4/15/ Link Anchor Tags: The page includes two ...