Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 253
  • Last Modified:

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
@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;
}

Open in new window

MyBibleGames-IE7.jpg
0
davideo7
Asked:
davideo7
  • 3
  • 2
1 Solution
 
sbickerstaffCommented:
try changing the <div class="divLeftBox"> to:
<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
0
 
davideo7Author Commented:
I made those changes to this page

http://www.mybiblegames.com/index-edit.php

Still doesn't seem to work properly.
0
 
sbickerstaffCommented:
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
0
 
davideo7Author Commented:
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.
0
 
sbickerstaffCommented:
ok, the 45% i suggested wasn't wide enough for your images, i've had a look (and tested this in ie6 and ff3) and changed your css.

1) i've fremoved those display: inline bits i told you to add and put them in your stylesheet and changed the following two elements of your external css.

2) you look at your css elements shown in the segment below.  as ff and ie can handle the floats differently... i've floated the 2nd image to the left as well, but put a 7px margin between it and the first.  also, i've removed the 45% width and gave it the same width as the .divLeftBoxBorder element of your css.


.divLeftBox{
	margin: 0 0 0 5px; 
	float:left;
	width:374px; /*removed the 45% bit as you already had width here*/
	display: inline; /*removed from html element and palced here*/
	float: left; /*removed from html element and palced here*/
}
 
.divRightBox{
  margin: 0 0 0 7px;
  width: 374px;
  display: inline; /*removed from html element and palced here*/
  float: left; /*removed from html element and palced here*/
}

Open in new window

0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now