code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<style>
#boxTop{
margin-bottom:20px;
border:1px solid green;
}
#box1{
float:left;
border:1px solid blue;
}
#box2{
clear:both;
border:1px solid red;
}
</style>
</HEAD>
<BODY>
<div id="boxTop">test</div>
<div id="box1">test</div>
<div id="box2">bottom</div>
</BODY>
</HTML>
check it here
in IE,why has a padding in #box1 and #box2 ? how to fix it?
What you've come across is the IE hasLayout "feature".
Getting #box2 to have layout will fix this issue. If you are concerned with IE7, add min-height: 0; to the style for #box2, like so: http://jsfiddle.net/VTmes/
UPDATE:
There also seems to be a big with the first element on the page having a margin. I tried to remove the margin-bottom and add a margin-top to the box1 and it works. Have a look here: http://jsbin.com/uqide3/6
ORIGINAL ANSWER:
Different browsers have different default margins and paddings. Reset this at the top of your CSS and you should not have these differences.
The simplest but not very efficient reset is:
* { margin:0; padding:0 } /* '*' affects everything (all elements) */
One I've been using recently is:
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button,div { margin:0; padding:0 }
Google 'CSS Reset' and you should see many variations, some claiming to be better than others. My take is use the minimum that works for you.
One other approach is to not use one at all, and just set the properties you need as you polish your design. Read this for a deatailed explanation: http://snook.ca/archives/html_and_css/no_css_reset/
float:left
property seems to be problem in IE. Even though we set margin and padding to 0, still rendering is not as expected in IE. Try to use span instead of possible in place of 2nd div and remove float:left property.
Related
I have searched and searched on this site for a solution to this and tried to apply all results too my simple HTML but none have appeared to work.
I'm sure there is a really easy way to do this because at the moment there isn't really any code as will explain.
I want a simple layout, 3 divs. One Main Page div containing two horizontal divs, I want the two inside divs to contain a picture that will be used as the div backgrounds enclosed in the Main Page div, I can get the backgrounds on but cannot rid the page of the white line, that I'm sure you guys are sick of reading about.
I get the line appearing between "header" and "site" divs. I'm sure this is an easy solution.
I have want to keep the HTML as simple as possible and only plan to have 3 three links that I will put in once the space has gone, as I'm sure I can apply the solution to further divs.
I'm also struggling to upload code, please advise
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
</html>
CSS:
#header{
width:1080px;
margin:0;
height:285;
background: url(header.jpg);
float:left;
}
#site{
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg);
}
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
}
Many Thanks if someone can post a solution.
You're having this problem because of the font size of the container. Set the line-height and font-size of the container to 0 and the space will disappear.
If it still doesn't fix it, remove any whitespace (including tabs or line breaks) from your HTML so the code blocks are touching each other like so:
</div><div>
// ^^ no space here
However, remember that font style declarations will cascade down into the container's children, so be sure to set the font-sizeand line-height back to normal inside them.
I tried entering your code in to jsFiddle, but I wasn't able to reproduce the same results you were seeing (with the white lines). May just be my browser...
However, I think this will help solve your issue. I've found it's always a good idea to include a CSS Reset in your CSS file. This gets rid of all those unwanted spaces, margins, and other things that are a pain to work with later.
Try adding the CSS from this site:
http://meyerweb.com/eric/tools/css/reset/
Or just Google "CSS Reset" and use any of the CSS samples. You would add the CSS to your existing CSS... the reset just makes sure all the margins, padding, etc are set to zero.
Adding to each element in css file
{overflow: hidden;}
works for me.
Like Mr. Brice Said you need to set the smaller line-height as possible to fix the small size to your div of the source code of your page but take care if in the CSS of your general Body the line-height are diferent, like the example:
body{
margin:0px;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#545454;
line-height:18px;
}
If your div needs a diferent line-height, and font-size to some speciffic section of website you need to set a class to then, link this:
#mainwrap{
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;
line-height:18px;
}
If you want your line between divs disappear you simply add one line of code in your CSS. This line of code is BORDER I believe that 1 to 3 pixel border would be ok.
#header{border:1px;}
You can change the colour of your border the same way as well:
#header{border-color:#ffffff;}
For example:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id="mainwrap">
<div id="header">
</div>
<div id="site">
</div>
</div>
</body>
CSS
#header{
border:1px;
width:1080px;
margin:0;
height:285;`enter code here`
background: url(header.jpg);
float:left;}
#site{
border:1px;
width:1080px;
margin:0;
height:480;
float:left;
background: url(main.jpg); }
#mainwrap{
border:1px;
width:1280px;
height:750px;
margin:auto;
background-color:#FFFFCC;}
I haven't found a clear solution for this problem, so I decided to create this topic. There is a very annoying Firefox feature:
<!DOCTYPE html>
<html>
<head>
<style>
div{
line-height: 0;
margin: 0;
padding: 0;
border: 0;
width: 31px;
height: 50px;
font: 15px Verdana;
background: #0F0;
}
</style>
<body>
<div>test</div>
</body>
</html>
Here is the result (200%):
As you see, top padding in Firefox is bigger (6px) than top padding in other browsers (5px).
How to solve this?
EDIT: any css reset doesn't fix it.
This is usually the case when there is no default value normalization being done in your css, which is why such tools such as the normalize.css and the reset stylesheets have come about. Such tools try to normalize and reset the default values set by the user agents (browsers).
Try yui-reset. It can remedy problems like these and other differing default behavior across browsers.
http://developer.yahoo.com/yui/reset/
put this on top of your css:
DIV { /*let Firefox stick to the padding web standards*/
-moz-box-sizing:border-box;
box-sizing:border-box;
margin:0;
padding:0;
}
I have tried to create an anchor point using:
<a href="index-xxx.html#reference-name"> and
<a name="reference-name">
The problem is I have a floating margin on the top and the anchor point goes to the top of the page hiding the top of the text.
Is there an easy way to add a relative spacing to the top margin using HTML?
I'm new to this and using a template that I found online. I have since found that it would have been easier to start from fresh instead of using the template but I am too far down the line now, and I don't really understand how to change the CSS to do this. Is there an easier answer?
Many thanks in advance to someone that has been searching for hours for the answer.
EDIT: I've updated based upon the code supplied.
Basically we've got something to the effect of this:
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#main {
min-width: 980px;
margin: 0 auto;
font-size: 0.75em;
padding:101px 0 37px 0;
}
header {
height:101px;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
position:fixed;
top:0;
left:0;
width:100%;
z-index:100;
}
footer {
overflow: hidden;
position:absolute;
bottom:0;
left:0;
width:100%/*; height:37px*/;
background:url(../images/footer_tail.jpg) left top repeat #0d0d0d;
color:#9d9d9d;
text-transform:uppercase
}
</style>
</head>
<body>
<div id="main">
<header>...</header>
<section id="content">... with <a name="blah">anchor</a> a couple paragraphs down the page</section>
<footer>...</footer>
</div>
</body>
</html>
As written the anchors links are buried under the top navigation. It seems the only solid fix is to use 'CSS frames' to get the content to display correctly, which requires the following CSS tweaks:
#main
{
padding:0 0 37px 0;
}
section#content
{
position:fixed;
top:101px;
width:100%;
bottom:37px;
overflow:auto;
}
footer
{
position:fixed;
height:37px;
}
So I've removed the top padding from #main.
Then I made the content and footer fixed position. Because of this the content has to be moved down 101px, hence the top.
I then had to give the footer a height, and then put that same amount as a bottom on the content.
Overflow auto gives us scrollbars, and width of 100% puts those bars in a reasonable place.
Tested on IE 9, Chrome 10, Firefox 4, and Opera 11.
Edit 2: And unfortunately I can't find much online about this particular method. Eric Meyer talks about it in Smashing CSS. It doesn't look like any of the existing resources online test for how anchor links will work with the content, which is pretty unfortunate.
I'm having a problem with a centered div only on IE7... on Chrome and Firefox it works properly.
Here is the website, it's on Volusion.com so go easy on me it's an old platform :)
http://www.ecosandbags.com
Everything is in a main div:
<div id="MainDiv">
Here is the CSS
#MainDiv {
background-color:White;
border:1px solid black;
margin:0 auto;
width:960px;
}
Anyways check it out with FireBug in Firefox if you need to see more details but that should be it...
So, bottom line, the div is centered on Chrome and Firefox but all the way to the right on IE7... I'm not sure what to do this CSS (specifically the "margin: 0 auto;" usually works for me)
Thank you very much for your time.
You're in Quirks Mode. Add a Standards Mode DOCTYPE if you want auto margins (or anything much) to work in IE.
You are missing doctype.
Add this as a very first line of your html document and it will solve the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Funny, I was asked to help with exactly same issue in the office yesterday.
I've had this issue before - this has always been a reliable solution for me;
body{
text-align:center;
}
#MainDiv {
text-align:left;
margin:0 auto;
background-color:White;
border:1px solid black;
width:960px;
}
We have a page that ordinarily has two elements arranged side-by-side. Despite exploring a few angles for this, we can't seem to make it work. We're not averse to using JavaScript, it just feels that a CSS based solution ought to be possible. Is there a way of using just CSS (and possibly extra markup if necessary) to make element2 centre when it appears on its own?
Examples
Sometimes we have two elements, side by side.
<div id="container">
<div id="element1">content</div>
<div id="element2">content</div>
</div>
But in some conditions only element2 is on the page e.g.:
<div id="container">
<div id="element2">content</div>
</div>
There is a pure css solution, however it won't work in versions of IE less than 7 because it won't understand the sibling selector (+), for that you may want to consider a JavaScript solution (perhaps Dean Edwards' IE7). Anyway, some example css:
div#element2{
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div#element1 + div#element2{
width:50px;
float:left;
margin:0;
}
The key is the line div#element1 + div#element2 which selects div#element2 given that it directly follows div#element1.
I think Phil was on the right track, but you should try using the CSS last-child pseudo-class. As far as I know, first-child and last-child are the only way in CSS to approximate an if construct.
div#container div#element2:last-child {
width:100px;
margin:0 auto;
}
div#element1{
width:50px;
float:left;
}
div##element2{
width:50px;
float:left;
margin:0;
}
The CSS above basically says "if element2 is the last child element of its parent use this set of styles, otherwise use these other styles.
This should even work in IE7.
A strict CSS2 solution:
#container {
text-align:center;
}
#element1, #element2 {
display:inline-block;
}
The inner elements should layout like inline text inside #container, but remain blocks inside.
This is standard CSS, but getting browser support might take some trickery.
it's not cool solution becouse tables are not "trendy" anymore but it solves the problem completly (under all ie)
<style>
#container {
margin:0 auto;
width:100px;
}
#container table{
width: 100%;
text-align:center;
}
#element1{
background-color:#0000ff;
}
#element2 {
background-color: #ff0000;
}
</style>
<div id=container>
<table cellspacing=0 cellpadding=0>
<tr>
<td id="element1">content</td>
<td id="element2">content</td>
</tr>
</table>
</div>