Sorry for this question but this, I believe is the one area that I am most fuzzy in.
I have trouble positioning my content boxes (divs, float, absolute positioning, etc.). I am looking to make whatever boxes I make fixed in one position. When I am in another system the boxes seem to be in a different position. Just curious to see if you guys/girls have any advice. Is there a common practice?
Best,
Erek
(EMAIL SNIPPED)
First, NEVER use absolute positioning. It guarantees that your site will mess up in different browsers.
Remember that the browser screen is not a fixed size. You must design flexibly, to work on different browsers, screen resolutions, and window sizes.
Ok, absolute positioning is out, to create flexibility for multiple browsers what should I use?
Erek
Tips:
- Don't use pixels for anything other than border size.
- Use % measures for sizes and positions relative to the width of the browser.
- Use em measures for sizes relative to the browser font size.
Great, Thanks for the tip. I will keep this in mind as I try this again.
Best,
Erek
- Don't put size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding). This causes IE to render the page differently than how other browsers render it. IE nests these styles in the wrong order.
- Don't put size styles (width, height) in the same tag or style that contains nonzero surrounding styles (margin, border, padding). This causes IE to render the page differently than how other browsers render it. IE nests these styles in the wrong order.
Thanks for your reply,
You are probably going to laugh, but I have this in my css for my content boxes:
/*--MAIN CONTENT OF WEBSITE--------------------------------------------------------------------*/
body {
font-family: "Trebuchet MS", Arial, sans-serif;
color: black;
font-size: 100%;
margin: 0px 0px 0px 0px; /* 0px = space from top */
padding: 0px 0px 0px 0px;
}
/*--------------------------------------------------------------------------------*/
/*---This is Netherspace---*/
/*--HOME PAGE-------------------------*/
#body {
background: url(../../images/b2.jpg) center center fixed;
margin: 0px 0px 0px 0px;
/*cannot get background image to spread across page*/
}
#banner {
color: black;
font-family: papyrus, sans-serif;
font-size: 30px;
text-align: center;
padding: 1px 0px 0px 0px;
}
div.homepage1 {
/*Content box - this seems to be consistent*/
background-color: #FC4901;
padding: 5px 90px 5px 13px;
margin: 15px 760px 30px 5px;
border-width: 3px;
border-style: solid;
border-color: #F2CB05;
margin-left: 10px;
text-align: left;
color: white;
}
#homepage2 {
/*Content Box - this is all over the place!!!*/
background-color: #F2CB05;
padding: 5px 100px 5px 13px;
margin: -410px 10px 30px 5px; /*-213px*/
border-width: 3px;
border-style: solid;
border-color: #FC4901;
text-align: left;
width: 620px;
float: right;
color: #FC4901;
}
#music {
margin: 0px 0px 20px 20px;
}
/*-------------------------------------------------*/Any help would be great. These boxes are very inconsistent across different browsers.
Erek
0px is an invalid style.
Styles with zero values should have just a 0, without units of measure. Firefox throws away styles with units of measure on zero values.
Styles with nonzero values should have units of measure, unless they are counts.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.