When I view the following on my iPhone, the contents of the second div don't appear. I see both divs in chrome and safari on my computer. Seems to be an issue with mobile Safari. I found that if I replace the number, 123-456-7890, with text such as "Right Side Text", the issue goes away.
#bannerLeft {
float: left;
text-transform: uppercase;
font-size: 1.7em;
font-weight: bold;
width: 50%;
}
#bannerRight {
float: right;
font-size: 1.7em;
font-weight: bold;
width: 30%;
}
<div id="bannerLeft">Left Side Text</div>
<div id="bannerRight">123-456-7890</div>
Any suggestions? Thanks in advance.
First of all, you never style through id selectors, is a really bad practice, but this is easy to fix:
.banner {
font-size: 1.7em;
font-weight: bold;
box-sizing: border-box;
}
.banner.left {
float: left;
text-transform: uppercase;
width: 50%;
}
.banner.right {
float: left;
width: 30%;
text-align: right;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
<div class="clearfix">
<div class="banner left">Left Side Text</div>
<div class="banner right">123-456-7890</div>
</div>
The problem may be due to some paddings or margins each browser has as default, the simplest solution in here was to add the box-sizing css3 property, which stops this problem to happen.
Also when floating things you may want to wrap those elements into a clearfix element to prevent overlapping.
Try the codepen I put together, maybe it can help.
http://codepen.io/anon/pen/LELrYd
I also float everything to the left, you'll get quite the same result, just notice the text align property, if this is not your case you can float to right and it would still works.
Cheers!
Related
Updated!!!
I've still facing the same error each time I view the page on landscape screen devices.
CSS:
f5 {
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-weight: bold;
}
about.us
<div class="containerpreview">
<br>
<f5>Check out our products</f5>
<br>
<f6>and Experience no-frills delivery</f6>
<div style="margin-top:40px">
<div class="buttoneshop">Eshop</div>
</div>
</div>
is there a way to make the spacing in between closer? When I command out
text-transform: uppercase;
the spacing is fine.
Aside of that, is there a way to make an image inside src under href to be centered?
css
.images_1_of_4 img {
max-width: 100%;
<!-- height: 200px; -->
width: 200px;
align: middle;
}
.img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
}
.grid_preview {
height: 200px;
}
shop.php
<div class="grid_1_of_4 images_1_of_4">
<div class="grid_preview">
<img src="..." alt="">
</div>
</div>
Try to change alignment text-align : justify; to text-align : left.
Or, if this is not what you like to do, letter-spacing is a CSS attibute to change space between charagcters, and word-spacing to change space between words
As other users suggested, consider forcing alignment on the left using text-align : left, you probably have text-align : justify; on a wrapper element or setted in another part of your css as depicted the example below.
https://jsfiddle.net/s5p9872t/
.f5 {
text-align : justify;
width: 250px;
}
.f5 {
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
text-align: left;
}
I have a header bar with a logo on the left and a search form following. Both are floated to the left. I am trying to control the vertical spacing of the search form using CSS but I cannot find a good solution other than adding padding and/or margin either on top or bottom of the search form, and although I may be able to find values that work in one browser, it is not a solution that is consistent across browsers... The same problem exists if I have a search button next to the search field. Is there a solution for this that is cross-browser compatible or do I need to use JavaScript? Is there a standard to doing something like this?
P.S. I reset the CSS in my dev code.
Here is a simplified version of my header code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
margin-top: 5px
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Link to code on JSFiddle: http://jsfiddle.net/mg535m80/2/
Edit: I found a solution, it's not as cross-browser compatible is I'd hoped, but it works in all modern browsers. I just added display: flex; and align-items: center to the parent, and it worked like a charm. New code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
display: flex;
align-items: center;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Updated JSFiddle: http://jsfiddle.net/mg535m80/9/
The problem is the style of the input, which is different between browsers.
Solution: to make the input look the way you want, set all its styles explicitly instead of relying on the defaults. Example:
input {
width:10em; height:1.25em;
margin:0; border:2px solid #888; padding:0;
font:inherit; vertical-align:baseline;
}
See updated fiddle
Yes, it is possible to specify vertical properties in pure CSS. Partially you already answered your question (i.e. padding and margin properties). Other properties include height, line-height, min-height, max-height, etc. Also, you can use position: absolute or fixed and specify top/bottom properties. Hope this may help. Best regards,
One solution can be set height in header:
header {
height: 33px;
}
And then use display: flex to align search box:
#search {
display: flex;
align-items: center;
height: 100%;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/mg535m80/3/
On my site, I was expecting to find the text in the snippet below, centered, on top of the image of the musicians.
<div class="brand">
<h1>Looking for a musician at short notice?</h1>
<div class="line-spacer"></div>
<p><span>We can help</span></p>
</div>
It's currently not displaying. I think it's a z-index issue, but I'm not sure of the solution.
Any ideas?
EDIT
Relevant CSS:
#intro .brand
{
margin-top: 40px;
}
.line-spacer
{
width: 20%;
margin:0 auto;
margin-top: 20px;
margin-bottom: 25px;
border-bottom:1px solid #fff;
}
h1
{
font-size: 36px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
color: #3a3a3a;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Montserrat', sans-serif;
}
Remove overflow from #intro
#intro {
overflow-y: hidden;
}
you have issue with both positioning and z-index
As of now it is position below the artists image and not above it, and since it is behind layers of other displays no text can be seen!
Try reducing the top-margin and adding z-index:1
I need some help , I have an IE7 CSS issue (some clients still use IE7 so I need to code for it).
I am having trouble with some nested divs and a horizontal scroll bar which works fine in IE8+ and everything else.
What happens is, the overflow should create a horizontal scroll bar, so the content inside can expand beyond the edge of the screen.
HTML
<div class="CenterBoxFlow Rounded" >
<div class="CenterBoxContainer" id="panetest">
.. Content
</div>
</div>
CSS
.CenterBoxFlow { border: 1px #ccc solid; width: 1110px; white-space: normal; vertical-align: top; display: inline-block; overflow: visible; padding: 15px; margin-bottom: 6px; text-align: center; float: left; position:relative; }
.CenterBoxContainer { text-align: left; width:1110px; overflow:auto; white-space:nowrap; vertical-align:top; overflow-y:hidden; display:inline-block; position:relative; }
FYI, the content is also a series of divs with the following style:
.Chart_Small { padding: 5px; width: 152px; white-space: normal; display: inline-block; position: relative; *display: inline; zoom: 1; }
Any suggestions on getting the div to overflow properly in IE7 would be great.
Peter.
I can't understand why, but removing white-space: normal; from .Chart_Small fixes this bug for me. Can you check if it works for you?
Have you tried:
*zoom:1;
It solves many ie7 bugs.. ;)
HTML (3x times):
<div class="scream">
<div class="author">
<img src="avatars/dagrevis.png" alt="" title="daGrevis" />
</div>
<div class="data">
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span>
</div>
<div class="clearer"></div>
</div>
CSS:
.scream {
background: #F4F4F4;
width: 944px; height: 48px;
}
.scream .author {
float: left;
}
.scream .data {
float: left;
}
.clearer { clear: both; }
This is how it looks on my browser:
As you can see, height is set to 48px. Images size is 48px as well. How it comes that I don't see each div.scream in separate line? If I set height to 50px, for example, all works! In my opinion, it's because there are some-kind of border/outline/margin/padding that ruin my life. Unfortunately, with FireBug I don't see anything like that...
The bottom edge of an image is aligned with the baseline (the grey line) of the line box by default. The space below the baseline (also called "descender space") is what's causing your problem. See this article by Eric Meyer for more details.
To fix it, add this rule:
.scream .author img {
display: block;
}
Or this one:
.scream .author img {
vertical-align: bottom;
}
If you play around with a DOM inspector for a bit, you'll find that .author is coming out with a height of 52px or so. The extra 4px appears to be coming from the line-height. Setting line-height to 0:
.scream .author {
float: left;
line-height: 0;
}
Fixes the layout: http://jsfiddle.net/ambiguous/8KzdD/
Or, you can float the image to the left as well:
.scream .author {
float: left;
}
.scream .author img {
float: left;
}
That will remove the image from the local flow and make the line-height irrelevant: http://jsfiddle.net/ambiguous/8KzdD/1/
Yet another option is to ditch the clearing <div> and use overflow:hidden on the outer <div>:
.scream {
background: #F4F4F4;
width: 944px;
height: 48px;
overflow: hidden;
}
This will leave the <div class="author"> with their 52px height but the effect won't be visually noticeable: http://jsfiddle.net/ambiguous/8KzdD/2/