Forum Moderators: not2easy
}
#bottomRightMain{
display: inline;
margin-left: 7em;
margin-bottom: 0;
margin-top: 0;
padding: 0 0 0 0;
border: 0;
}
#footer{
margin: 0 0 0 0;
padding: 0 0 0 0;
}
And here is the html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Two Rivers Public Health</title>
<link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
</head>
<body>
<div id="total">
<div id="header"><img src="templateimages/body/template_r1_c1.jpg"
alt="Two Rivers Logo" width="325" height="124" /><img
src="templateimages/body/template_r1_c3.jpg" alt="connecting people"
width="475" height="124" /></div>
<div id="main">
<div id="leftMain"><img
src="templateimages/body/template_r2_c1.jpg" /></div><div id="topRightMain"><img
src="templateimages/body/template_r2_c2.jpg" /><img
src="templateimages/body/template_r2_c4.jpg" /><img
src="templateimages/body/template_r2_c5.jpg" /><div id="bottomRightMain"><img
src="templateimages/body/template_r3_c2.jpg" /></div><div id="footer"><img src="templateimages/body/template_r4_c1.jpg"
alt="Footer" /></div>
</div>
</body>
</html>
Thanks
2) You can shorthand all of the margin: and padding: to:
{margin: 0; padding: 0;}
3) Most, if not all of the {border: 0;} can probably be cut. {border: none; will be default:).
4) For that matter, after testing, most of the {margin: 0; padding: 0;} can probably be cut as well. There will be none by default for most of these containers.
5) Validating the HTML should take care of the #footer. Am having no issue with "right by each other", unless you mean containers inside #main. If so, I'd rather see updated markup and additional description of issue before looking at that and the extra space at the top in IE. Stripping out the images and fixing the skeleton might be the easiest way to find out where that is coming from. Maybe temporarily add some height for a better look. After all, I have no clue what the dimensions of the images are. Don't think that they are the problem, but a problem for my guessing at what is truly needed.
6) For now I would just put a background-color: behind all of the containers to see what issues remain after validation.
#topRightMain{
display: inline;
/*position: relative;
top: -10.6em;
left: 0;*/
background-color: green;
}
At any rate, the IE issue with the 'space' between #header and #main is clearly coming from the images in the #header and is easily illustrated by commenting them in and out in IE. (FF and Opera render correctly.)
Fix 1 - Add {height: 124px;} to #header.
Fix 2 (preferred) - Add the same as a conditional specific to IE.
<!--[if gte IE 7]>
<style type="text/css" media="all">
#header {
height: 124px;
}
</style>
<![endif]-->
<!--[if gte IE 7]>
Or whatever versions need hacking.
<!--##########
<img src="aaa.jpg" alt="Two Rivers Logo" width="325" height="124" /><img src="bbb.gif" alt="connecting people" width="475" height="124" />
-->
TEXT FOR A BIT OF ILLUSTRATION.
</div>
I'm not for sure I understand what you mean. What do you mean it is coming from the images themselves.
The way that IE is adding a dab of space. It is the addition of the images that triggers the glitch. Take them out, and the extra space added to that container goes away.
I'm not saying that the suggested solution is the only option. It is an option that works, though you may be offered other and preferable options.
Comment the images back in and proceed.
Fix 1 - Add {height: 124px;} to #header.
Fix 2 (preferred) - Add the same as a conditional specific to IE.
<!--[if gte IE 7]>
<style type="text/css" media="all">
#header {
height: 124px;
}
</style>
<![endif]-->
<!--[if gte IE 7]>
Or whatever versions need hacking.
all display the way they are supposed to. I have most of the div properties the same. Any thoughts
* {
padding: 0;
margin: 0;
}
body {
}
#wrapper {
margin-left: auto;
margin-right: auto;
width: 800px;
}
#header {
background-image: url(templateimages/body/template_r1_c1.jpg);
float: left;
padding: 0px;
border: 0;
margin: 0px 0px 0px 0px;
width: 325px;
height: 124px;
}
#headerRight {
float: right;
padding: 0px;
border: 0;
margin: 0px 0px 0px 0px;
width: 475px;
height: 124px;
background-image: url(templateimages/body/template_r1_c3.jpg);
}
#leftcolumn {
border: 0px;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 427px;
width: 113px;
float: left;
background-image: url(templateimages/body/template_r2_c1.jpg);
}
#main {
float: left;
border: 0px;
margin: 0px 0px 0px 0px;
padding: 0px;
height: 350px;
width: 678px;
display: inline;
}
#mainLeft {
border: 0px;
margin: 0px 0px 0px 0px;
padding: 0px;
background-image: url(templateimages/body/template_r2_c2.jpg);
height: 257px;
width: 335px;
float: left;
}
#mainMiddle{
border: 0px;
margin: 0px 0px 0px 0px;
padding: 0px;
background-image: url(templateimages/body/template_r2_c4.jpg);
height: 257px;
width: 95px;
float: left;
}
#mainRight{
border: 0px;
margin: 0px 0px 0px 0px;
padding: 0px;
background-image: url(templateimages/body/test.png);
height: 257px;
width: 260px;
float: right;
clear: both;
}
#mainBottom{
border: 0px;
margin: 0px 0px 0px 0px;
padding: 0px;
float: left;
background-image:(templateimages/body/template_r3_c2.jpg);
width: 687px;
height: 170px;
}
#footer {
width: 800px;
clear: both;
border: 0px;
margin: 0px 0px 0px 0px;
height: 49px;
padding: 0px;
background-image: url(templateimages/body/template_r4_c1.jpg);
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 2 Column - fw-12-2-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="header">
</div>
<!-- End Header -->
<!-- Begin Header -->
<div id="headerRight">
</div>
<!-- End Header -->
<!-- Begin Left Column -->
<div id="leftcolumn">
</div>
<!-- End Left Column -->
<!-- Begin Right Column -->
<div id="main">
<div id="mainLeft">
</div>
<div id="mainMiddle">
</div>
<div id="mainRight">
</div>
</div>
<!-- End Right Column -->
<!-- Begin Footer -->
<div id="footer">
</div>
<!-- End Footer -->
</div>
<!-- End Wrapper -->
</body>
</html>
2) #main holds:
#mainLeft {width: 335px;},
#mainMiddle {width: 95px;},
#mainRight {width: 260px;},
3) Total width of the three containers wrapped by #main is 690px; - This exceeds the capacity of #main, and it will shift #mainRight down because there is no room.
4) With this markup, whether #mainRight is floated right or left makes no difference whatsoever. However, {clear: both;} is declared, so it does what it is supposed to do and clears.
5) Thus, two problems that both cause #mainRight to drop. Fix either one and there will be no effect. They must both be dealt with.
6)
2) You can shorthand all of the margin: and padding: to:
{margin: 0; padding: 0;}3) Most, if not all of the {border: 0;} can probably be cut. {border: none; will be default:).
4) For that matter, after testing, most of the {margin: 0; padding: 0;} can probably be cut as well. There will be none by default for most of these containers.
{margin: 0;} is more efficient than {margin: 0px 0px 0px 0px;}
The following is a global declaration, so no need to repeat anywhere else.
* {
padding: 0;
margin: 0;
}
You might want the following;
html, body {
padding: 0;
margin: 0;
}
I commented out all of the {margin: 0; padding: 0; border: 0;} Default is 0 for each in all of those containers in each of several tested browsers.
Other than that, it is just extra code that isn't doing anything. If you just felt a need to set them all to 0 anyway, then one declaration for all would be simpler. If the template changes, you can always remove one of the ids from the list and then specify changes.
#header, #headerRight, #leftcolumn, #main, #mainLeft, #mainMiddle, #mainRight, #mainBottom, #footer {
margin: 0;
padding: 0;
border: none;
}
7) What is the purpose of {display: inline;} in #main? It is already floated left with width and height specified. ? /*display: inline;*/
Hope that you can drag me through a problem when I come crying to the PHP forum with a question. I enjoy PHP, can manipulate existing code okay to fit needs, but mostly am really lousy at ground up building. Haven't had the right circumstances in that area to really learn correctly - to start with nothing and not only build something that works, but is also lean, clean, efficient.....
...thrown into this...
LOL - Yeah, I've been involved in a lot of "Hey, as long as you are doing these items, why don't you go ahead and do those too."
Uh. Well. Cause I don't do everything - but I can see that it gets done.
(Extra $$$ for add-on and enough extra to get a cut from anything given over to someone else - at least enough extra to cover extra trouble, communication, plus fair extra profit that I should get as designer/developer/consultant - whatever the circumstances appropriate to the situation.)
