CSS Issue with IE

You might want to look into something called the box model hack. This is happening becuase the main content box is getting too wide and pushing the bottom down. Do a google search for "box model hack" and you'll find more information. This is happening because IE has some different interpretations of the CSS spec. What you'll need to do is add in some extra rules to correct the problem.

Hi Megan,

Thanks for your help - sorry it's taken me so long to get back on the forum. I've had a mental busy week!!

Will let you know if your help fixes the issue.

Many thanks

Pip x

I've looked up the Box Model Hack and it doesn't work.

It makes my actual content change but it doesn't alter the length of the white back ground box and therefore doesn't alter the problem.

Anyone help?? This is driving me mad!

Pip

Yo! I can fix your problem, I just need to recode your html and css files... Its about a 3 step process...
But first, you have also a MENU problem in opera... Your menu tends to stack up together.
But ie and moz problem can easily be fixed...
the menu takes some time to be fixed for opera

Hey!

Can you tell me what i need to do or point me in the right direction then I can get it fixed.

Thank you for your help.

Pip x

Step 1: first the div id for contentright would be moved inside the contentleft div... in the html file
Step 2: See the modified CSS

Quote:
body {
text-align: center;
background-color: #3399FF;
font-family: helvetica, sans-serif;
font-size: 15px;
padding-bottom: 100px;
}

#frame {
width:800px;
margin-right:auto;
margin-left:auto;
margin-top:10px;
padding:0px;
text-align:left;
}

#nav{
font-size: 12px;
white-space : nowrap;
background-color : #CC99FF;
float : left;
color : white;
width : 100%;
border-style : solid;
border-color : #0066CC;
border-width : 2px 0 2px 0;
}

#nav ul{
padding : 0;
margin : 0;
float : right;
}

#nav ul li{
display : inline;
}

#nav ul li a{
padding-left : 1em;
padding-right : 1em;
background-color : #CC99FF;
color : black;
font-weight : bold;
text-decoration : none;
float : left;
border-right-color : #0066CC;
border-right-style : solid;
border-right-width : 1px;
}

#nav ul li a:hover{
background-color : #FF6600;
color : #ffffff;
}

h1 {
color: white;
text-align: left;
}

h2 {
background: #FF9900;
color: white;
text-align: left;
font-family: helvetica, sans serif;
font-size: 12px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 0px;
}

h3 {
color: grey;
text-align: left;
font-family: helvetica, sans-serif;
font-size: 10px;
margin-left: 20px;
margin-top: 1px;
}

h5 {
background: #CC99FF;
color: black;
text-align: left;
padding-left: 1em;
padding-right: 1em;
font-family: helvetica, sans serif;
font-size: 12px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 0px;
}

h6 {
background: #FF3333;
color: black;
text-align: left;
padding-left: 1em;
padding-right: 1em;
font-family: helvetica, sans serif;
font-size: 12px;
margin-left: 7px;
margin-right: 7px;
margin-bottom: 7px;
margin-top: 2px;
width: 450px;
}

a {color: #0066cc;
font-weight: bold;
text-decoration: none;
margin-left: 5px;
}

a:visited {color: #0066cc;
font-weight: bold;
text-decoration: none;
margin-left: 5px;
}

a:hover {color: #FF33CC;
text-decoration: none;
margin-left: 5px;
}

a:action {color: #009900;
text-decoration: none;
margin-left: 5px;
}

p {
color: black;
font-size: 11px;
padding: 7px;
margin-left: 12px;
margin-right: 12px;
}

hr {
width: 85%;
}

#top {
margin: 20px;
padding: 10px;
background: #3399FF
height: 100px;
}

#contentleft {
height: 1445px;
width:159px;
padding:0px;
float:left;
background:#000000;
border-right: #FFFFFF 1px solid;
}

html>body #contentleft {
width: 159px;
}

#contentcenter {
height: 1445px;
padding:0px;
float:left;
background:#eee;
width: 490px;
}

.floatleft {
float: left;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 20px;
margin-right: 10px;
}

#contentright {
position:absolute;
margin-left: 650px;
text-align: center;
font-size: 10px;
height: 1445px;
width:149px;
padding:0px;
background: white;
border-left: #000000 1px solid;
}

.floatright {
float: right;
margin-top: 20px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 20px;
}

.floatright2 {
float: right;
}

#footer {
position: bottom;
bottom-margin: 0px;
font-family: helvetica: sans-serif;
font-size: x-small;
padding:2px;
margin:0px;
background: #CC99FF;
color:#330000;
border-bottom: 1px solid #9EC4E2;
border-top: 1px solid #9EC4E2;
text-align: center;
}

.floatcenter {
float: center;
margin-top: 20px;
margin-bottom: 5px;
margin-left: 20px;
margin-right: 20px;
}

.floatcenter2 {
float: center;
margin-top: 0px;
margin-bottom: 5px;
margin-left: 3px;
margin-right: 7px;
}

#footer a {
color:#330000;
}

#footer a:hover {
color: #0066cc;
text-decoration: none;
}

Ok now since ie has a problem with inner padding, its just a little width adjustment... You could do it yourself....

I have the exact code that can be used by your website that can be recoded to look like your present one and mind you it will be viewed the same in all browsers... Except its for business use only...