|
Answer» I have a charity web site that works PERFECTLY in Firefox and Chrome but not in IE. I use the Div command to split the main page into a body and SIDEBAR. IE displays the sidebar after the body, not by the side of it. The URL is: http://www.pmhnz.org.nz/ - Any help would be MUCH apreciated.
Code: [Select]#header
{ background: #667F03;
height: 240px;}
Code: [Select]#site_content
{ width: 837px;
overflow: hidden;
margin: 0 auto 0 auto;
padding: 20px 24px 20px 37px;
background: #FFF url(content.png) repeat-y;}
There is no setting in these Styles to control the arrangement of the elements.
My site has a navigational sidebar and a main "content" area, which are separate columns and APPEAR so in all the browsers I've tried. This is, however, done by "cheating"; the navbar is 180px so I just use relative positioning to move the content over 180px.
Code: [Select]<div class="left" style="background-image:url('http://bc-programming.com/images/navbg.png')"><span><img src="images/navbar.png" style="margin:0;position: relative; top: 0;">
NAVIGATION STUFF ON THE LEFT</div>
This div is of class left, so it has these styles (overridden only by those attributes specified in the tag):
[code]
div.left
{
float:left;
width:180px;
height:100%;
margin:0em;
background-color:grey;
color:black;
BORDER-left: 0px solid black;
border-top: 2px solid black;
border-right: 0px solid black;
border-bottom: 0px dotted black;
display:table;
vertical-align:top;
padding-left:0em;
padding-bottom:0em;
padding-right:0em;
padding-top:0em;
position: relative;
}
The right-side, which is the larger content divider:
Code: [Select]<div class="content">
and it's CSS:
Code: [Select]div.content
{
background-image:url('http://bc-programming.com/images/navbg.png');
background-color:grey;
color:white;
margin-left:185px;
margin-top:0em;
margin-right:60px;
border-left:0px;
border-right:0px;
padding:0em;
vertical-align:top;
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85;
}
the Margin and Border settings are important here. The left margin of course is set to 185 pixels to make it to the right of the navigation bar div, and leave a "gap" of 5 pixels.
This is how I usually do it. Of course you don't have to use pixels, and can use any measurement you like. A very basic implementation with in-line CSS might look like this. this one makes the left side 90%, and the right side 10%.
Code: [Select]<html>
<head>
<style>
div.content
{
float:left;
width:90%;
height:100%;
margin:0em;
background-color:grey;
color:black;
border-left: 0px solid black;
border-top: 2px solid black;
border-right: 0px solid black;
border-bottom: 0px dotted black;
display:table;
vertical-align:top;
padding-left:0em;
padding-bottom:0em;
padding-right:0em;
padding-top:0em;
position: relative;
}
div.right
{
background-color:grey;
color:white;
margin-left:90%;
margin-top:0em;
margin-right:60px;
border-left:0px;
border-right:0px;
padding:0em;
vertical-align:top;
height:100%;
}
</style>
<body>
<div class="content">This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes. This is where a bunch of copy goes.This is where a bunch of copy goes.This is where a bunch of copy goes.</div>
<div class="right">sidebar thingy</div>
</body>
</html>
Many thanks for the reply. It was helpful but whilst working through it I found an error in my code in the CSS. I had a # where I should have had a full stop. (Designating a DIV ID instead of a Class)Correcting this solved the problem.
It is amazing how many times you can work through the same thing and not see an error
|
