HTML DIV tags rendered properly in Fire Fox but not Internet Explorer
I have a website and the 2 boxes at the bottom of the page are suppose to be side by side and they are in Firefox but they aren't in Internet Explorer
http://www.mybiblegames.com/
Attached is the CSS code. Also attached is an image showing how it displays in IE7
http://www.mybiblegames.com/
Attached is the CSS code. Also attached is an image showing how it displays in IE7
@charset "utf-8";
/* CSS Document */
* {
margin: 0 auto;
}
html{
height:100%;
}
body{
background-image:url('images/background.png');
background-position:center;
background-attachment:fixed;
text-align:center;
background-position:bottom;
vertical-align:top;
border:none;
border-width:0;
margin:0;
padding:0;
margin-top:0;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
height:100%;
margin: 0 auto;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -38px; /* the bottom margin is the negative value of the footer's height */
}
.siteFrame{
border:none;
border-width:0;
width:764px;
padding:0;
text-align:left;
margin-top:0;
margin-left:0;
margin-right:0;
background-image:url('images/header.jpg');
background-position:top;
background-repeat:no-repeat;
background-color:white;
margin: 0 auto;
}
/* Links */
a{
color:#b0a310;
font-weight:bold;
text-decoration:underline;
}
a:hover{
color:#7e896e;
text-decoration:overline underline;
}
a:active{
color:#426ae1;
text-decoration:none;
}
a:visited{
color:#897f0c;
}
/* Formated Text */
.contentSmallTitle{
font-size:12px;
font-weight:bold;
color:white;
}
/* A content Box that fills the entire page horizontally */
.contentBox{
background-image:url('images/contentBorder.png');
width:754px;
}
.contentBoxInside{
background-color:white;
width:740px;
text-align:left;
padding:4px;
}
.contentBoxShadow{
width:754px;
height:8px;
background-image:url('images/contentBorderShadowBottom.gif');
background-repeat:repeat-x;
}
.bibleVerse{
font-family:"Times New Roman", Times, serif;
font-size:14px;
text-align:center;
}
/* A divided Content Box */
.divContentBox{
width:764px;
}
.divLeftBox{
margin: 0 0 0 5px;
float:left;
}
.divLeftBoxBorder{
background-image:url('images/contentBorder.png');
width:374px;
}
.divLeftBoxInside{
background-color:white;
width:360px;
height:262px;
text-align:left;
padding:4px;
}
.divLeftBoxShadow{
width:374px;
height:8px;
background-image:url('images/contentBorderShadowBottom.gif');
background-repeat:repeat-x;
}
.divRightBox{
margin: 0 0 0 381px;
}
.divRightBoxBorder{
background-image:url('images/contentBorder.png');
background-position:right; width:374px;
}
.divRightBoxInsideNonPadded{
background-color:white;
width:368px;
text-align:left;
}
.divRightBoxInside{
background-color:white;
width:360px;
text-align:left;
padding:4px;
}
.divRightBoxShadow{
width:374px;
height:8px;
background-image:url('images/contentBorderShadowBottom.gif');
background-repeat:repeat-x;
}
/* Footer Related */
.footer{
background-position:bottom;
width:764px;
background-image:url('images/footerBackground.gif');
background-repeat:repeat-x;
height:38px;
color:#cccbe7;
font-size:12px;
vertical-align:bottom;
line-height:1;
margin: 0 auto;
}
.push {
height: 38px; /* .push must be the same height as .footer */
}
a.footerLinks{
color:#e0ddc0;
font-weight:bold;
text-decoration:none;
}
a:hover.footerLinks{
color:#c0c2e0;
text-decoration:none;
}
ASKER
I made those changes to this page
http://www.mybiblegames.com/index-edit.php
Still doesn't seem to work properly.
http://www.mybiblegames.com/index-edit.php
Still doesn't seem to work properly.
in your css stylesheet, you have:
.divRightBox{
margin: 0 0 0 381px;
}
try setting this to 0 0 0 0; and let me know what happens (this could be causing the wide gap inbetween
.divRightBox{
margin: 0 0 0 381px;
}
try setting this to 0 0 0 0; and let me know what happens (this could be causing the wide gap inbetween
ASKER
I tried that and in IE it made it look almost good except the right box was a little far over. However, in FF it was a big mess to look at so I reverted it back.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<div class="divLeftBox" style="width: 45%; display: inline; float: left;">
and <div class="divRightBox"> to:
<div class="divRightBox" style="width: 45%; display: inline; float: right;">
directly after the closing </div> of the right box , put:
<div style="clear: left;"></div>
the reason i haven't done 50% is because for some reason that never works. even when margins and padding are all set to 0, there's still 9% i can't use. the 'display: inline' means that if there's space available and the next element is smaller, it'll display it beside the last element