We have a project page here to check the issue live -> http://hdev.hattrick12.com/
Hovering the Post Elements causes the post height to jump in IE9/Standard for a split second.
It has something to do with .post footer li being display inline - but I need to have the elements either floating or display inline which both seems to cause trouble in IE9.
Can someone point me in the right direction as I can't find anything written on that specific IE Bug?
I found it! It's the min-height of the elements that causes them to switch height for a split second when hovered.
Thx to everyone contributing
I'm trying to do something pretty simple: an <a> tag with a background image. The code is found here, http://jsfiddle.net/QWatA/
The problem is that for some reason I can't set the width of the <a> tag in this code. If I had just a normal background and set it with a width it works fine. However seems like if I do it this way I have no control over the width. Ideally I want all the links to have highlights of the same width.
The reason I'm doing this is that I want a different background image for each of the links, so I'm forced to define all those a.class1, a.class2 stuff.
Thanks!!
Add display:inline-block; to your 'a' elements. By default 'a' is display:inline and so does not establish box with width/height.
http://jsfiddle.net/QWatA/1/
yea c-smile beat me to it just put display: block in your css, however if your going to do a.class1, a.class2 and so on with new pictures put it in your ul li a instead of in the a.class1 a.class2 and so on then you only have to write the code once.
I am currently exploring a bug in the template used on http://www.ecovivo.be/rubriek/food.
Problem:
When visiting the link you will notice a large floating image with content on the right. Now this all works fine. But upon activating list-style-type, the list images/numbers clip with the image whereas the text gets properly escaped. Normal margin and padding won't work because the ol and li elements extend in width behind the image.
If someone has encountered this problem or a similar one before please provide some insight.
I have tried:
Floating the li/ol
Different cominations of "display" on both image and list.
Overflow and zoom hacks
Facts:
Runs on Drupal.
Content of div.content is generated by a WYSIWYG editor.
So please don't comment on how bad the HTML is.
For debugging purposes I have changed the following:
Set the opacity of the floating image to 50% to show the ol and li borders.
The ol and li elements have a left border to illustrate size.
Do you mean to assign list-style-position:inside; to the ol?
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
I'm using a background image to add a custom bullet to list items in my content. In the content there are also images floated left. When an image and a list item are next to each other, the bullet appears where it would do if the image wasn't there, but the text wraps around the image.
Here is an example:
http://golf2.test.textmatters.com/content/greenkeepers/turfgrass/turfgrass_speci/cool_season_gra
is there a way to make the bullet appear where is should (i.e. next to the text)?
In Firebug / Firefox (you'll have to check other browsers) I solved your problem adding a:
li {
overflow:hidden;
}
Don't know why exactly, but that magical line solves lots of problems around floated stuff :-)
Edit: Solution if you can change the html slightly
If you have any control over the html, you could perhaps use paragraph tags instead of list items:
p.list_item {
background: transparent url(/++resource++stylesheets/images/bullet.gif) no-repeat scroll left 0.45em;
padding-left: 11px;
}
However, that would kind of change the semantic meaning of the list items...
This is an old topic... but thought I would add how I usually do this in case someone stumbles in here via a search...
If I have an image on the left, and plan to have graphic bulleted unordered list (UL) to the right of it, I place the image statement inside DIV tags, and add a float:left style to that DIV.
Then, I wrap my UL tags inside a DIV, and give that DIV a float:left style as well, causing it to appear to the right of the first DIV.
If I have additional text that I would like to resume UNDER my UL, then I give the second DIV a width that equals the total width of the page/column minus the graphic width - basically, to account for all of the space to the right of the image. That will force continuing text to flow directly under the UL DIV, and if the UL is shorter than the graphic, the text will flow to the right of the graphic and then under the graphic as expected.
If the UL extends lower than the graphic, then the text will just start under the image, as expected.
If you want the text to simply start UNDER the left graphic regardless of the height of the UL, then you could just apply a clear:both style to the ensuing , i.e.
In general this approach works so long as the UL isn't too much taller than the left image, because obviously in this scenario, the list itself isn't going to wrap under the image, leaving whitespace - so to make a long list look right may require some purposeful image sizing, or stacking a couple of images in the first DIV, or whatever other solution you might have.
If you really want to get whacky, I've had a few times where I've used the two DIV method described above, but setting the first DIV to position:relative, and placing the second DIV containing the UL INSIDE the first, with a position:absolute and of course top:??px and right:??px, set of course to absolutely position my UL to the right of the image. It takes the right kind of layout to use this method, obviously...
OK that's all I had to say, hope this makes sense & good luck to whomever!
Try wrapping your list items in a <p> tag, and then give that tag a left margin.
Why do you have div.fig width set to 0 in the html?
<div class="fig" style="width: 0px;"><img src="/images/43_Fescue.jpg" float="0"/></div>
Remove that and the list will float around the image.
Well, it's not the best fix from a stylistic point of view, but floating the images right avoids this problem. Thanks for everyones suggestions
If you want the whole ul to NOT float under the image try adding overflow:hidden to the ul