I was trying to create a ordered list which contains a left float image + a link for each li.
It works as expected in IE9 and FF, but not on IE8 nor Chrome.
It was a very straight forward stuff like this
<li><img style="float:left" src=".." />some text</li>
I am new here so I can't attach screenshots, but I will describe the issue:
It works as expected in IE9 and FF, but on Chrome the list number (1. 2. 3.) overlaps the image. Or you can look at it this way: the image floats to the left of the <li>, covering the list number.
What could be the problem? I am using very basic CSS and HTML and have searched the site for possible solution.
My HTML code is like this
<li><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg">
Mind Game<br />
<span class="msgInfo">(8 Replies)</span></li>
The image is an avatar, so it is taller than text. I want to have the avatar floated to the left and have 2 lines of text on its right. I am not sure if there is another way to accomplish this without a left float
I had the very same problem in Chrome and fixed it by putting my li content into a div. So your code would end up like this:
<li><div><img class="smallAvatar" src="/v4/thumb.axd/30_0/DA1D9A43075B47A1BAE73076E8D7867A.jpg">
Mind Game<br />
<span class="msgInfo">(8 Replies)</span></div></li>
That way the dot or the number of your list is in front of the image and not overlapping the image anymore.
the <ol> or <ul> tags are stringently required in Chrome to work everything fine
Use float property only if required. It is normally used to solve alignment issues across browsers.
Instead try to give margins to ur image and text. If nothing works your way then you could use a small Javascript tweak to solve the Chrome issue
Put this in your when your page loads
if(window.chrome != undefined)
{
//remove float and add some margin image/text
}
Why do you want the float?
This works for me in Chrome: http://jsfiddle.net/ShStb/
EDIT: I would try using vertical-align.
Check out the updated jsfiddle: http://jsfiddle.net/ShStb/2/
I changed the elements' vertical-align to these values:
ol li img {
vertical-align: middle;
}
ol li a {
vertical-align: top;
}
Related
I am trying to add multiple images to a page using CSS. I am doing it this way rather than in a more 'straight forward' way to ensure mobile compatibility (it allows me to set percentage widths for the images which allows me to get them to display at the right size on mobile).
I currently have in my stylesheet:
div.image {
content:url(http://example.com/example-image1.jpg);
width:100%
}
div.image2 {
content:url(http://example.com/example-image2.jpg);
width:25%
}
and then a few more images. And then in certain parts of my page:
<div class="image">
</div>
<div class="image2">
</div>
The problem I am getting is content:url only seems to be working in the first instance, that is the only picture that displays. It doesn't seem to be a problem with multiple div.s as if I set the 2nd div to the same content:url image as the first div, that image does actually display twice.
Sorry if this is a dumb/noob question...I just couldn't find an answer.
You forgot a bracket :
div.image2{
content:url(http://example.com/example-image2.jpg);
width:25%
}
EDIT: I tried with the bracket and it worked. I use Mozilla Firefox version 58.
http://dhrumin.com/uploads/index.html
Link above is my page I have been working on. I am using border top bottom as a background image. It looks great on Chrome and FF. But on IE it will just show one solid color background image wont show up.
Can someone help me with what I am missing out?
Thanks!
IE doesn't support the border-image property as you can see here. A workaround would be to create two divs, above and under and give them the desired background-image :
HTML :
<div class="myborder"></div>
<ul id="blockquote">
<li>Completely formulate parallel customer service rather than B2C initiatives.</li>
<li>Compellingly target efficient experiences whereas seamless partnerships.</li>
<li> Seamlessly transition customer directed applications whereas intuitive.</li>
<li> Holisticly mesh team building "outside the box" thinking.</li>
</ul>
<div class="myborder"></div>
CSS :
.myborder {
width: 600px;
height: 13px;
background: url('quote-border.png') repeat-x;
}
Don't accept this has the answer, i just moved content from 'comments'.
border-image is not supported in any version of IE currently - caniuse.com/#search=border-image – Nick
Indeed, you will have to split your html to make a top and a bottom div with background-image – Brewal
#Brewal, those are answers IMHO. – aldux
From my own, i would use :before and :after to create what you want.
You want something better ?
<div class="container with THE-texture and padding">
<div>Your content</div>
</div>
This way, the outter container would act like an image background-border. Here is a working example.
it is to be IDENTICAL in visual result than what you wish. In html, you added 1 extra container. That's a difference.
Oh, let me guess, there are 'simili' borders on the sides ? --> remove side's padding : http://jsfiddle.net/8puJf/1/
I'm running into a weird issue that I've never noticed before. I have the following code:
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li>
<li>
No
</li>
<li>
No
</li>
</ul>
</div>
Very simple block of code. Ignore the second no, as it's literally only there to give me a third li to help me figure this out. Now, here's the CSS...
div.feedback {
position: relative;
}
span {
float: left;
}
li {
display: inline-block;
padding: 0;
margin: 0;
border-left: 1px solid #000
}
Now, here's what's happening:
See the extra spacing that's seemingly coming from nowhere? I moved to border-right just to test it, and got even more inconsistent results:
Now, the 3rd LI has 0 padding and margin, as it should. The other two still have a spare space.
Lastly, the browser comprehends the proper height and width of the li, and attributes no margin or padding to it. According to the browser, the text should be smashed up against the border, as I also expect.
Can someone please explain what this extra 3-5 pixels of spacing is on the right of the text?
That's because linebreaks are treated as a space in HTML. You've specified your inner elements to be inline-block, which means that spaces between them are displayed.
You can either:
Set the font-size on the parent to 0, and then back to normal on the <li>,
Simply eliminate the linebreaks between <li>s.
A third (lesser) option exists, it's the use of float.
float was originally meant to allow for elements to be pushed to the edges of the container, while having text flowing around it freely (like images in a newspaper). That feature was exploited used for layout as well, when people discovered it would make block level elements stack horizontally.
Using float would mean you need to clear after yourself, by either using a clearfix, or having an element with clear: both set on it.
This option is lesser, because much like tabular layouts, it's not the original purpose of float, implementation may differ between browsers and between time periods, but most importantly, it adds the overhead issues of clearing. (So stick with display: inline-block if you can help it!)
It's from white space in your code. See this jsFiddle example
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li><li>
No
</li><li>
No
</li>
</ul>
</div>
Somewhere you have a display:inline-block.
The inline-block display behaves like this. It shows any space in the code and newlines as spaces.
You have to either manually remove spaces and returns in the HTML or to change the display to something else.
You can view the issue on:
http://www.caterinaligato.com/
We can't reproduce the issue on IE7 or any of the Firefox versions. Using the DeveloperTool on IE8 its showing that the padding is inside the <div id="bannerArea">, however, we have tried #bannerArea * { padding:0; margin:0; display:block; } and that hasn't helped.
Please note that the 'Compatibility View' is off.
If anyone has any advise that would be great!
Start by adding overflow: hidden; to your BannerArea class. I'm not convinced that the star hack is necessarily the best option either. I would suggest removing that until it's proven that you absolutely need it.
Finally, make sure your <a> tag has its content all on one line. IE has historically had a degree of difficulty with the correct layout when anchor tags have line-breaks in the markup, displaying whitespace where there shouldn't be any.
Your line of markup:
<div id="bannerArea"><span class="bannerContainer first"><a href="#" class='banner-95 bannerImage' title='' rel='nofollow'><img src="/media/pics/site/imagecache/683C6A596432B154340F913300D76915.jpg" width="958" height="346" alt=''/></a> </span></div>
...splits the tag across three lines, which may be contributing to the issue.
use float:left for "bannerArea" it will reduce the white space in IE8, But the position will move right, need to reset the position.
I'm pretty sure this is happening because of your drop-down menu. If you add overflow:hidden to you "bannerArea" div, then the white space vanishes, but the placement is ruined. When added overflow:hidden to "nv" div, the image came back to it's place. So you have take care of the drop-down menu. Perhaps you can use scrip drop-down instead of pure css?
I am using the following HTML:
<p>← Back</p>
To create the following:
← Back
Problem is, the left arrow is not vertically aligned in the middle. It appears to be at the lower 3rd.
Question: how do I get the left arrow to be aligned vertically in the middle (of the letter "B") using CSS?
UPDATE:
Is it possible for me to vertically adjust/align this:
Without modifying my HTML, and
Without using an image?
The arrow is a simple character, so it's aligned like the others (it is in the "middle", the creator of the font wants it to be where it is... maybe that's the middle of lower-case character). Maybe it looks different using another font, maybe not. If you have a fixed font and that one looks messy, you could try to use the :first-letter selector (or wrap the arrow in a span or something) to move it up 1 or 2 px (position:relative: top:-2px;).
Another solution would be to use an image for this, like most websites do (and there are many free icon sets out there — my favourite is famfamfam)
You can wrap your arrow in SPAN tag and then play with line-height and vertical-align CSS properties.
Generally you should not do this, you should let it as the font was conceived by its author.
But it you want to change it you can do it like this:
<p><a href="http://www.example.com/">
<span style="position:relative;top:-3px;">←</span>
Back
</a></p>
Note: Use what you need instead of -3px, I used that just to illustrate how the position can be changed.
I think you have to use a image for the left arrow than &larr.
It IS possible to have the &larr in a separate span, have some specific padding to bring the arrow to the right position, or use a specific font that has the arrow at the center, but this will have side effects.
I suggest you use an image.
There are two possible answers to this.
The way you're writing it, this is not a graphical element (arrow) followed by a label ("Back"), but a line of text (inside a paragraph) containing a single character followed by a letter string. So alignment is a purely typographical problem and determined by the font you're choosing. Choose a different font and see if it's more typographically pleasing.
What you want is really not a line of text but two independently placeable graphical elements. Put each inside its own span, give it display: inline-block and position: relative and play with vertical paddings, margins and line-heights until you're satisfied.
You have some options:
1. Put the arrow between span tags before the word Back, add an id to this span object and then assign the style in the css file playing with: padding-top or bottom and also vertical-align or position relative.
2. The second option is using the image as background and then you have to create the style for this link:
li a#link,#link_conten{
background-image: url(../../../img/arrow.gif);
background-position: left top;
background-repeat: no-repeat;
}
In addition, it is not common (from the semantic point of view) to put just the link (tag a) inside a paragraph (tag p). Then you have to deal with the default css rules for tag a and p but of course depends of your design
You could use CSS generated content. This will mean editing your HTML - to remove the arrow. Essentially you're creating a pseudo-element that sits in front of the link, and you can style it however you like, e.g.
a.back:before {
content: "\2190 "; /* Unicode equivalent of ← */
display: inline-block;
padding: 5px;
background-color: aqua;
}
On the downside this won't work in IE 6 or 7. You might be able to work around that with some targeted javascript.
If you don't want to edit your HTML, you could give :first-letter a try. It only works on block-level elements, so you'll need to work accordingly, e.g.
a.back {
display: inline-block;
}
a.back:first-letter {
background-color: aqua;
padding: 5px;
}
I've had trouble getting this to display consistently cross-browser though. IE8 and FF3.6 do rather different things with the code.