CSS: UL's/OL's vs. Div floating left in IE - html

The scenario is that the client wants a floating div (the gray box) with text that wraps around it. However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
I tried wrapping the ul's/ol's in a div to see if that would help, but have been unsuccessful. Has anyone experienced this problem before and found a suitable solution?
(note: This is an old site with limited ability to be able to modify much else within the layout)

I think you can modify the li's to display their bullets inside instead of outside and that should help you...
ul {
list-style-position: inside;
}

However some of that text includes ul's and ol's, which hide behind the floating div in IE6.
If we're talking something as simple as this:
<div style="border: dotted red 1px; float: left; width: 100px; height: 100px">foo</div>
<p>bar</p>
<ol style="border: dotted blue 1px;">
<li>potato</li>
<li>yoghurt</li>
</ol>
Then what happens here happens on all browsers, not just IE. You can see it from the borders on this example: the left-padding of the list occurs behind the float, not pushing the list content further to the right. This is because floats only repel items in a line box, not block elements.
If you want a quick hack workaround, wrap the <ul> in a <div> with style ‘display: inline-block’.

Floating + IE6 is always a causes some unintentional pain and suffering. Some simple fixes:
Add more margin to the floating box
Add some left margin to your ul/ol

Related

HTML / CSS - Unexplained margins

I have the following page with some HTML / CSS : http://jsfiddle.net/Hf6dB/1/
For some reason the buttons of the toolbar at the top of the screen have a margin right. Margin left, top and bottom is ok because the container has a padding, but where is the margin right from ?
Also in the real version of the page, which you can't see on the fiddle bbecause there are no icons, i have a similar problem in each of the menu entries :
<li>
<div class="draggable">
<input id="tb-btn-search" title="Search" type="button">
<p>Search</p>
</div>
</li>
When the mouse is out of the button, the <p> has a width that gets animated from 0 to something like 2 using CSS transitions. For some reason, when the width of the <p> is zero, the icon is not centered anymore because, here too, there is an extra margin that comes from nowhere.
Would this be related to the usage of inline block display property ?
Thanks for yor help !
display: inline-block creates a gap between elements. Further reading here.
Edit:
bjb568 mentioned in the comments re 4px gap:
NO! 4px gap depends on the font and size. You cannot use negative margins to solve this, since you don't know how big the gap is. -4px is a magic number, and thus should be avoided. Use font-size: 0, instead
You can delete inline-block in the <ul> and add float: left; to the li
#toolbar ul,
#toolbar li
{
display: inline-block; /* delete this
}
#toolbar ul,
#toolbar .tb-separator,
#toolbar li
{
float:left;
}
Updated JsFiddle
The line breaks between the elements are treated as whitespace, because the elements are inline-block, so they are part of a line of text. You can solve this by removing spaces and line breaks between the elements. If you want to keep the indenting in your document, you can choose to add a line break inside the element itself:
<outer
><inner
></outer>

float right without defining width

I have the following html
<h2>OUR CHAIRMAN</h2>
<div class="profile">
<div class="fleft"><img class="mgmt fleft" src="images/kishan.jpg" border="0" alt="" /></div>
<div class="fright">
<h5>KISHAN LAL DUGAR</h5>
Mr Kishan Lal Dugar, an experienced entrepreneur and visionary, is the founder of the KL Dugar Group. He has steered the Group to the success it enjoys today. His vision led to the diversification and conglomeration of the Group. His meticulous efforts and foresight lead the Group to reach a turnover of over NRs 6,000 million and build up a workforce of over 800 employees.</div>
</div>
css
.fleft{
float: left;
}
.fright{
float: right;
}
And to the fright class if I define the width then only it goes to right otherwise it goes to downwards. How can I achieve this without defining the width of .fright?
demo
I would like to go a bit detail on this one, why it happens, and you shouldn't be redundant to add width to your element.
Whenever you float any element, it will act as if it's an inline-block level element, and hence, it will create a gutter/empty space on the other side unused. This will result the element rendering below to shift besides the floated element, unless and until the element is inline-block, inline or floated. Here, you have a div which want to float: right;, well, it is floated, but it's a block level element by default, a block level element will behave like a inline-block element, though, there's a catch here, it will take up ENTIRE horizontal space, thus it shifts below the floated element(though the element itself is floated to the right).
Now simple solution here is don't assign float: right; to the element at all, it will simply wrap the text around the floated element, whats the bad point here? I'll show you pictorically..
Demo (This is dirty yea)
So you don't want your element to wrap the text below the image, so the workaround is to provide a margin-left property to the content block and than you will get something like this..
Demo
.fright{
margin-left: 120px;
}
Conclusion: Using margin is no bad, I would still suggest you to use
width property instead.
I hope you are looking for something similar to this.
WORKING DEMO
The CSS Change:
.fright {
display: inline;
}
Hope this helps.
Adding overflow: hidden; to .fright does the trick.
Check out my fiddle: http://jsfiddle.net/KGg6H/7/
lots of ways to resolve and the way you do it could be decided on other code and styling used elsewhere. This is what I used on your demo
.fright{
right: 0;
display: inline;
}

How to remove spacing between superfish menu ul and parent div

I have menu made with Superfish jquery plugin http://users.tpg.com.au/j_birch/plugins/superfish
But i have some problems with that, it is added padding when i view my page in Firefox, Chrome and IE:
Here is the jsfiddle sample http://jsfiddle.net/YsG97/2/
May be some one may suggest how to remove this spacing between Superfish menu ul and header div?
and there is strange thing i indecently find out, if i put &nbsp after menu closing tag: </ul> it is fixed spacing in Firefox, don't know why. May be some one may explain?
Here you go:
#menucontainer {
...
vertical-align: top;
}
Live demo: http://jsfiddle.net/YsG97/5/
The #menucontainer DIV has display: inline-block set, which effectively makes it an inline element. Inline elements are by default aligned to the baseline, which means that there will be space below them (between the baseline and the descender):
http://vidasp.net/media/CSS-vertical-align.gif
If you add a clearing element after the closing ul tag, it matches up to the bottom. there is a problem with the floats, not sure what the problem is but this fixes it (although with increased height in the #menucontainer div.
See here.

Cannot make 3 column layout work within list for IE7

I am trying to create a liquid 3 column area within a list item. To achieve this, I use the standard method of having 3 elements, of which the first two are the sides, floated left and right, and the 3rd is the content, which should sit between the two. The following HTML works fine in Firefox, but doesn't render correctly in IE7 - the content is rendered below the two floated elements. Any ideas what the problem is?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
*
{
margin: 0;
padding: 0;
border: 0;
}
span
{
display:block;
}
.corner
{
width: 12px;
height: 12px;
}
.tl
{
float: left;
}
.tr
{
float: right;
}
.fill
{
margin: 0px 12px;
}
</style>
</head>
<body>
<ul>
<li>
<span class="tl corner">a</span>
<span class="tr corner">b</span>
<span class="fill">text text text</span>
</li>
</ul>
</body>
</html>
Note that replacing the spans with divs results in the same effect. I've also tried various DocTypes with no luck. And it works fine outside of the list, hence the problem appears to be intrinsic to using the list.
The way IE sees it, you're trying to jam in the lines one after the other, but the first two have already taken up their space, FLOATing away, which leaves the last SPAN in the LI to fight for the next level, which in IE looks like the next level below.
Since the last SPAN is not floated, that's also why it gets knocked to the next level.
Also, SPANs are inline styles, not block level elements. You should replace SPAN with DIV is you still want to try and style this in a LI element.
You should also use a full DOCTYPE so the browsers will know how to render the page. Otherwise they will default to quirks mode, ugly and all over the place.
But the better tactic is to create this float of 3 columns outside of the LI and in a DIV setting.
Have a read of CSSplay or Max Design on creating 3 column layouts.
It's a bit difficult to say anything without seeing the markup, but why don't you just put the two elements which should float inside the content element? You would have to adjust with some padding on the content element, but that should do the job. Then again, not quite sure what you mean. If you supply us with a bit more markup, it would be easier to tell.
The center block should have margins to either side allowing room for the floated blocks.
The answer is to wrap the spans in a block level element (say, a div), with overflow set to hidden. Example came from a more in depth look at the 2nd CSSplay example.

How do I keep a DIV from expanding to take up all available width?

In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way?
Edit: One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?
Edit: If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?
.pictureframe {
display: block;
margin: 5px;
padding: 5px;
border: solid brown 2px;
background-color: #ffeecc;
}
#foo {
border: solid blue 2px;
float: left;
}
img {
display: block;
}
<div id="foo">
<span class="pictureframe">
<img alt=''
src="http://stackoverflow.com/favicon.ico" />
</span>
<p>
Why is the beige rectangle so wide?
</p>
</div>
The right way is to use:
.pictureframe {
display: inline-block;
}
Edit: Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fit algorithm for determining the width.
The beige rectangle is so wide because you have display: block on the span, turning an inline element into a block element. A block element is supposed to take up all available width, an inline element does not. Try removing the display: block from the css.
Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed.
For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.
Yes
display:inline-block is your friend.
Also have a look at: display:-moz-inline-block and display:-moz-inline-box.
The only way I've been able to do picture frames reliably across browsers is to set the width dynamically. Here is an example using jQuery:
$(window).load(function(){
$('img').wrap('<div class="pictureFrame"></div>');
$('div.pictureFrame').each(function(i) {
$(this).width($('*:first', this).width());
});
});
This will work even if you don't know the image dimensions ahead of time, because it waits for the images to load (note we're using $(window).load rather than the more common $(document).ready) before adding the picture frame. It's a bit ugly, but it works.
Here is the pictureFrame CSS for this example:
.pictureFrame {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
line-height:0;
padding:5px;
}
I'd love to see a reliable, cross-browser, CSS-only solution to this problem. This solution is something I came up with for a past project after much frustration trying to get it working with only CSS and HTML.