I've created this contrived example to illustrate my problem. There are two paragraphs with a div in between. The div's height and line-height have been set to 0 and all margins are also 0. I would expect for the two paragraphs to be right next to each other without any spacing from the div at all, however this is not the case in IE6. It seems to work fine in all other browsers.
Here is the HTML with all styles inlined:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Test</title>
</head>
<body>
<div id="container" style="border: 1px solid blue;">
<p style="margin: 0;">
Some text
</p>
<div style="height: 0; line-height: 0; margin: 0; border: 1px solid red;">
</div>
<p style="margin: 0; border: 1px solid green">
Should be right below "Some text"
</p>
</div>
</body>
</html>
I've added in a few borders just so you can more easily see what's going on.
Here's a screenshot of what's happening in IE6:
Any ideas on how I can get rid of that little space between the bottom of the div (red) and the top of the paragraph (green)?
Add font-size:0; to the div. That should remove the space
I believe the "p" tag automatically adds padding. In your style attributes try adding padding:0; along with the margin:0;
Another thing to try is setting your position to relative, i.e. "position: relative;"
Also make sure you're using a valid doctype: http://www.w3.org/QA/2002/04/valid-dtd-list.html
Related
I understand that the CSS Box Model doesn't color the margin of an element with a background-color because the margin is outside of the element. However, why doesn't the background-color of a container element color behind the margin of a contained element? Shouldn't it fill all of it's space regardless of what it contains (and whether those elements have margins)?
Consider the following
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: #ddd;
}
#container {
margin: 0 auto;
width: 400px;
}
.contained {
margin: 0;
background-color: #a3ddef;
}
.contained p {
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div class="contained">
<p>Some text is here.</p>
</div>
<div class="contained">
<p>Some text in here too.</p>
</div>
</div>
</body>
</html>
I would expect the background-color of the .contained elements to butt up against each other vertically. Further, if you add a border of width 1px to the .contained then the background-color of the elements expands to fill the space.
What's going on here?
Here's a jsfiddle for it
Not sure what exactly is the question, but if you are trying to stack the .contained elements so that there is no gray space in between them, you have to remove the margin on the <p> tags:
p {margin:0}
This is a phenomenon called margin collapse. It's sort of a quirk where 2 margins that are touching overlap. Instead of getting the sum of both margins, the bigger one is used. In your case, the <p> tag margins touch the margin of the <div> tags (even though they are 0px), So that margin spills outside the div tag.
If for some reason you still need the margin on the <p> tags, set the <p> tags to p {display:inline-block;}, as inline elements are not affected by this.
see this link for more info:
http://www.howtocreate.co.uk/tutorials/css/margincollapsing
I tried the display:table-cell but it didn't worked. How can I show the word inside the div. Now it show overflow the div. I am use CSS2 on my webpage. Thanks in advance.
<div style=" width:60px; border-style: solid; border-width: 15px; display: block;">
Visit W3Schoolseeeeee
</div>
<div style="float: right; border-color: #ff33ff" width:50%;>Column 2</div>
Use word-wrap:
a{
word-wrap: break-word;
}
demo
Change the width of the div container to allow the content to fit. Right now you have it set to 60px, which is not wide enough for the text to display without overflowing. You could do something like this instead:
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div style="width:150px; border-style: solid;
border-width: 15px; display: block; text-align: center;">
Visit W3Schoolseeeeee
</div>
<div style="float: right; border-color: #ff33ff" width:50%;>Column 2</div>
</body>
</html>
This example really isn't leveraging best practices of HTML and CSS. Ideally your CSS would be outside of the HTML document entirely, and you likely don't need to hard code a pixel width for your div container.
I've started a site based on HTML 5 Boilerplate and I want a basically all white site but a grey background to my footer. Problem is that there is a margin (and pretty sure it's a margin not padding or white border) below the footer leaving a white strip below my grey footer.
I've cut everything down in order to post here and moved my CSS inline, plus changed the colours to make it more visable;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body style="background:#C0C0C0;">
<img src="1by1.gif" width="700" height="1000" border="0" alt="">
<div style="border-top: 1px solid #666366;background:#FFFF33;">
<footer style=" max-width: 1200px; margin: 0 auto;">
footer
</footer>
</div>
</body>
</html>
and it's online here
Thanks,
Kevin
You have a margin on your body:
html, body {
margin: 0;
padding: 0;
}
should solve the issue
You can use:
body {
margin:0;
}
Or (better) include normalize.css in your page.
Only adding one thing can give you the solution that is-
add margin:0 to body
body { margin:0; }
Had a similar problem. Try this: inside the footer put a <p> paragraph. And then make a css rule for the 'footer p', where you set the proper margin.
if you wanna make footer without margin in the bottom you can add only the height attribute in your css file and delete the margin bottom if existed.
footer{
height : 120px;
margin-bottom:0;
}
Please note: I am new to CS. Brand new.
I want my button div to be placed horizontally inside the confirm div: example.
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
I am just placing two buttons inside my Div, so it's width should be equal to 128 (the total of two button witdh). Similarly the height should be equal to button height, but it isn't.
Second i want that mt button-div placed center horizontally . I tried left: 50% inside my button-div. But it is aligning the left margin with the centre of the confirm div. How can i do it?
EDIT
--------------------------------------------------
May be I didn't understand correctly, but if you want it inside then put it inside.
<div id="message">
Are you sure you want to
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
Demo
Update 1
Right now my dialog-button div width is equal to the width of the confirm Div. Why?
Why, because <div>s are block tag, they always take 100% width of the containing element. It is not equal to the width of confirm Div.
To make the dialog-button take the actual width use display: inline-block as its CSS. Demo
Update 2:
To the best from what i understood. This is what you want. If not help me help you.
Update 3:
Ok, here is a demo with the image. I will leave the without image part to you. ;)
The div which the two buttons are in is actually the width of the of the comfirm div. The reasons why divs stretch to the width of their parent, is because that is block level element.
the reason every thing seems so confusing is that you have a lot left floating divs in your example. These are changing how things would normally laid out. To make things simpler why dont you try removing some of the more confusing elements. I suggest trying a more simple example like the one below:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/ie-css3.htc" type="text/css">
<link rel="stylesheet" href="css/messageDialogStyle.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.7.1.js">
</script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js">
</script>
<script type="text/javascript" src="js/puff.js"></script>
<script type="text/javascript" src="js/jquery.dialog.js"></script>
</head>
<body>
<div id="confirm">
<div id="message">
Are you sure you want to
</div>
<div id="dialog-button">
<button>Ok</button>
<button>Cancel</button>
</div>
</div>
</body>
</html>
If you want to center a button. If you change the margin-left and margin-right to auto you will center any block element. try changing your css to the css below:
#confirm {
background-color: #ddd;
display:block;
width:400px;
min-height:120px;
position:absolute;
border:1px solid #ccc;
border-radius: 15px;
-moz-border-radius: 15px; /*FireFox*/
-webkit-border-radius: 15px; /*Opera, safari*/
behavior: url(css/border-radius.htc); /*IE*/
}
#message {
width: 280px;
border:1px solid #ccc;
white-space: normal;
word-wrap: break-word;
margin:20px 0 0 0;
overflow: hidden;
}
#dialog-button {
border:1px solid #ccc;
position: relative;
}
button {
display:block;
margin-left:auto;
margin-right:auto;
width: 64px;
}
Note if you have to make the button a block element for the margin auto trick to work.
You can find more about block level element here.
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a div with a background image that needs to be centered horizontally and vertically. On top of that image, I also want to display a 1-line text, also centered horizontally and vertically.
I managed to get the image centered, but the text is not centered vertically. I thought vertical-align:middle would do the trick.
Here's the code I have:
<div style="background: url('background.png') no-repeat center; width:100%; height:100%; text-align:center;">
<div style="color:#ffffff; text-align: center; vertical-align:middle;" >
Some text here.
</div>
</div>
Any ideas?
Workaround: I actually got this to work by using a table. (I'll probably be cursed to hell by the HTML community.) Is there any significant reason not to use this btw? I'm still interested in the solution using divs though.
<table width="100%" height="100%">
<tr>
<td align="center" style="background: url('background.png') no-repeat center; color:#ffffff;">Some text here.</td>
</tr>
</table>
Horizontal centering of a block element is traditionally done this way:
div.inner { margin: 0 auto; }
Note: the above won't work with IE in quirks mode so always put a DOCTYPE at the top of your document to force it into standards compliant mode.
Vertical centering is much more tedious. See Vertical Centering in CSS
there is no direct vertical centering for div content in CSS, however there are indirect ways of achieving it.
http://phrogz.net/CSS/vertical-align/index.html
also many similar questions in SO. How to vertically center a div for all browsers?
In case you have to use only one line of text and parent div has fixed height use line-height property. Suppose parent height is 500px then use CSS line-height: 500px; for text.
Without using javascript (ala something like thickbox, etc. for positioning photos/captions centered), the closest I could come to was this:
<body style="height:200px; min-height:800px;">
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
Note that I had to specify some sort of height for the container (in this case the BODY but it could also have been applied to the wrapper DIV I think). In Explorer 6, you can set the BODY height to 100% but in Firefox this doesn't work and probably won't work in other modern browsers.
EDIT:
Found a better solution:
<style type="text/css">
html, body {height:100%;}
</style>
</head>
<body>
<div style="background: url('background.png') no-repeat center; height:100%;">
<div style="text-align: center; position:relative; top:50%; color:#fff;">
Some text here.
</div>
</div>
</body>
If you want to get VERTICAL centering, I would suggest to use a table inside the DIV (as suggested by Cletus above other ways might be tedious).
div.centered table {margin: 0 auto;} /* no width needs to be specified for table */
div.centered table td {vertical-align: middle;} /* replace this with vertical-align: top; to disable vertical centering */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<table style="border: 1px solid #ff0000;">
<tbody>
<tr><td>
Some text here
</td></tr>
</tbody>
</table>
</div>
If you are only interested in HORIZONTAL centering (no vertical) you can use only DIV:
div.centered div {margin: 0 auto; width: 300px;} /* some width MUST be specified to center a DIV. */
<!-- borders added only to help understanding -->
<div class="centered" style="border: 1px solid #cccccc;">
<div style="border: 1px solid #ff0000;">
Some text here
</div>
</div>
As you might have noticed in order to horizontally align a DIV inside a DIV you also need to specify a fixed width for the inner DIV. This might be somehow not what you want to do, so it might be easier to use always the 1st solution (the one with TABLE) and simply remove the "vertical-align: middle;" when you want to get only horizontal centering.
I tested this using document with:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
on IE7, FF 3.6, SAFARI 4.0.4