Overflowing content outside parent div in ie6 - html

The following code:
<div style="width: 50px; border: 1px solid green;">
<div style="position: absolute;">
whatever text you want
</div>
</div>
Renders like this:
in any modern browser(ie7+, chrome, firefox), and like this:
in IE6.
What i would like is for it to render in IE6 just like it renders in the others browsers.
Any ideas ?

Why don't you just put the text outside the div?
<div style="width: 50px; border: 1px solid green;">
</div>
whatever text you want
Or
<div style="width: 50px; border: 1px solid green;">
<div style="position:absolute; width:XXpx">whatever text you want</div>
</div>
Would that work for you?

This is a known issue with IE6. (one of many)
This site discusses the problem and how to work around it: http://www.positioniseverything.net/explorer/expandingboxbug.html

Related

Different align in IE and chrome (multiple <div> to align center and horizontal)

I want to align multiple div horizontally.
This is my simple test code.
<div style="text-align: center;">
<div style="border:1px solid #000; display:inline-block;">Div 1</div>
<div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>
It looks well in chrome, but in IE doesn't work like below picture
Why does it look different from IE and Chrome?
any answers would be thanks.
Try this:
<div style="text-align: center;">
<div style="border:1px solid #000; display:inline-block; *display: inline;">Div 1</div>
<div style="border:1px solid red; display:inline-block; *display: inline;">Div 2</div>
</div>
Here is a good resource that covers this topic: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/
Basically IE has a trigger called "hasLayout". Triggering this will allow you to use display:inline-block on a block level element (by default IE only allows inline-block on native inline elements).
Additionally older version of Fire Fox didn't support inline-block either, but had an "inline-stack" value (moz-inline-stack).
Here is, to my knowledge, the best way to get a cross-browser display:inline-block:
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;

How to place text below boxes

I have placed two boxes next to each other and now I want to place some text directly underneath the boxes. The HTML/CSS I have so far keeps placing the text in the top right corner of the right hand box. Any suggestions?
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Use display: inline-block; on <span>.
Like:
span {
display: inline-block;
}
Have a look at the snippet below:
span {
display: inline-block;
}
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Hope this helps!
Here's a better version, with the actual boxes next to eachother, instead of inside eachother and moved via margins.
<div id="one-off-pricing" style="width:800px; overflow: hidden;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float: left;margin-top:20px;">
</div>
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;display: inline-block;margin-top: 20px;">
</div>
</div>
<p style="font-weight:bold;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
Try this
<div id="one-off-pricing" style="width:800px;">
<div id="one-off-pricing-1" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:270px;margin-top:20px;">
<div id="one-off-pricing-2" style="width:370px;height:400px;border: 1px solid #cecece;float:left;margin-left:370px;margin-top:-1px;">
</div>
</div>
<span style="font-weight:bold;clear:both;display:block;"> *If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</span>
</div>
Try this (and see the notes and explanations below):
.one-off-pricing {
width: 800px;
}
.one-off-pricing div {
display:inline-block;
width:370px;
height:400px;
border:1px solid #cecece;
}
p {
font-weight:bold;
}
<div class="one-off-pricing">
<div></div>
<div></div>
<p>*If for any reason we're unable to complete the job we'll give you a full refund, no questions asked.</p>
</div>
1) Why put all the inline CSS in a stylesheet?
It massively helps with scaling and maintenance.
2) Why use a class for "one-off-pricing" instead of an id?
When CSS selectors start to get long and complex, ids in long chained selectors can mess things up. For this reason it's often (not always but often) better to use a class instead of an id.
3) Why use <p> instead of a <span>?
Because the element in question is best described as a paragraph.
4) Why use display:inline-block instead of a float?
Because you simply don't need floats in this situation.

create a line break within a div

I will have 3 icons side by side that will float left when the window shrinks. Under each icon, I'd like to add some text. I can pretty much get it as you can see below.
.icons {
BORDER-TOP: black 1px solid;
HEIGHT: 100px;
BORDER-RIGHT: black 1px solid;
WIDTH: 100px;
BORDER-BOTTOM: black 1px solid;
FLOAT: left;
BORDER-LEFT: black 1px solid
}
<div class="icons">div 1</br><a>some text</a></div>
<div class="icons">div 2</div>
<div class="icons">div 3</div>
In jsfiddle, this </br> tag seems to come up as invalid. Is there a valid and / or better way to accomplish this?
http://jsfiddle.net/kp950/mum68pwv/
Just apply display: block to your text elements.
a { display: block; }
The will force each element to consume the full available width of the container, and subsequent elements to the next line.
http://jsfiddle.net/mum68pwv/4/
You're getting an error thrown in jsfiddle due to your linebreak syntax being wrong.
You're using </br> when you should be using <br/>
2020/HTML5 EDIT
You no longer need to use self-closing tags in HTML5 (though browsers can still handle them), instead you can simply use <br>.
Instead of </br> use <br> or <br />
<br /> is a valid tag whereas </br> is not so.
Use :
<div class="icons">div 1
<br>some text
</div>
<div class="icons">div 2<br>some
<br>some text
</div>
<div class="icons">div 3
<br>some text
</div>
P.S.
<a> is anchor tag and it is not a good option for adding little elements to your webpage. Instead use <span> tag which will be more efficient.
You have a syntax error in your <br> tag
So this
<div class="icons">div 1</br><a>some text</a></div>
should become
<div class="icons">div 1<br><a>some text</a></div>

Linebreak (in code) causes unwanted margin in HTML output

I have a menu, separated by DIV-s.
When this look like that:
<div id="container">
<div>1</div><div>2</div><div>3</div>
</div>
it renderers well, but thats not nice. But if I do that:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
an unwanted space gets in the output. There is a gap between DIV's.
How to fix this?
EDIT:
sorry for everyone. Here is a detailed fiddle:
http://jsfiddle.net/qK5Bq/
.places_histNavigator {
color: #AC3B75;
font-family: georgiab;
font-size: 1.3em;
line-height: 38px;
}
.places_histNavigatorElement {
border-left: 1px solid #F3F2EB;
border-right: 1px solid #C2BEA8;
display: inline-block;
text-align: center;
}
<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
<div style="width: 19%;" class="places_histNavigatorElement">2</div>
<div style="width: 20%;" class="places_histNavigatorElement">3</div>
<div style="width: 15%;" class="places_histNavigatorElement">4</div>
<div style="width: 23%;" class="places_histNavigatorElement">5</div>
</div>
<div class="places_histNavigator">
<div style="width: 20%;" class="places_histNavigatorElement">1<span class="customSelect legordulo" style="display: inline-block;"><span class="customSelectInner" style="width: 34px; display: inline-block;">25</span></span></div>
<hr>
<div style="width: 19%;" class="places_histNavigatorElement">2</div><div style="width: 20%;" class="places_histNavigatorElement">3</div><div style="width: 15%;" class="places_histNavigatorElement">4</div><div style="width: 23%;" class="places_histNavigatorElement">5</div></div>
Based on the assumtion posted in the comment, here is a possible solution : DEMO
Inline attributes consider the spaces existing in between the divs, to avoid it, either use block display or added <!--->(html comment mark) in between the divs.
CSS
*{
margin:0px;
padding:0px;
}
#container1,#container2 {
display:block /* this is the key, make sure it's not marked inline */
}
HTML
<div id="container1">
<div>1</div><div>2</div><div>3</div>
</div>
<br />
<div id="container2">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
EDIT
i really dont get what you are trying to achieve, but if you want things to display in one line, check this Updated Demo, consider adding white-space:nowrap; to your code if you want to kill extra white spaces in one line.
CSS (2 lines changed)
.places_histNavigator {
color: #AC3B75;
font-family: georgiab;
font-size: 1.3em;
line-height: 38px;
white-space:nowrap; /* added this */
display:block ; /* optional for uniformity*/
}
2nd EDIT
See, as posted in comment, inline attributes consider even the spaces in between the div's...i.e....if you have a markup like this <div> </div> with nothing in between, and its inline, then space between them WOULD BE PARSED by browser and rendered on webpage, to avoid that, (like i said before) place <!--> or change display type.
Final Demo
add margin:0px; and padding:0px; to your body HTML
If your div elements are set to display inline they are effectively being handled like words, so the HTML formatting is important- in this case new lines create spaces. If you wish to format your HTML but control out this effect, you can set the elements to inline-block then manually control their margins to counter-act this effect, or possibly set word-spacing on the parent.

xhtml css floats etc help

I'm really thinking of going back to tables because this is just #¤€&/#£ always something....
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
<div style="float: left; width: 20%">
#2 <a>BusHka</a><br />
<small>Old school</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
#1 is stupid
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
This gives:
http://i29.tinypic.com/2iawh83.png
A huge space in the first div. why? it dont if theres more than 10 comments for some reason
ignore the stupid comments
I would be careful about having width of 20% and 80% expect to fit on one line: if there is any padding or border they won't. It looks the way it should in ff 3. :D
Pasting your HTML into the body of my generic testing-HTML-code-from-Stack-Overflow file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Test</title>
</head><body>
<!-- Rebadow's code here -->
</body></html>
shows no problem. Your problem must lie elsewhere, like in your CSS for instance.
if you are using IE6 using 20% with 80% with will often cause the line to overflow, i usually use 20% 79% and you should be ok
to see if it is something overflowing try adding overflow:hidden to the divs and see if they line up, if so you know its something overflowing.
have you used firebug or another inspection tool to see what the heights and widths actually are?
Try adding a wrapper div around your floating ones. This is just to see if anything above this is affecting it somehow.
<div style="clear:both">
<div style="float: left; width: 20%">
#1 <a>SmokA</a><br />
<small>Admin</small><br />
<small>2009-08-07</small>
</div>
<div style="float: right; width: 80%">
I would buy a boat
</div>
</div>
<div style="clear:both"></div>
<div style="border-top: 1px solid #071946; border-bottom: 1px solid #1D3060"></div>
Also I wouldn't make a div just to display a line, but that's another issue entirely. Maybe try a HR tag, or wrap that div around everything, this is just to make the code make more sense structurally.