Solved

HTML DIV tags rendered properly in Fire Fox but not Internet Explorer

Posted on 2008-10-20
5
244 Views
Last Modified: 2013-12-08
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
Comment
Question by:davideo7
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 3

Expert Comment

by:sbickerstaff
ID: 22761216
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
 

Author Comment

by:davideo7
ID: 22761971
I made those changes to this page

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

Still doesn't seem to work properly.
0
 
LVL 3

Expert Comment

by:sbickerstaff
ID: 22762026
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
 

Author Comment

by:davideo7
ID: 22762063
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
 
LVL 3

Accepted Solution

by:
sbickerstaff earned 500 total points
ID: 22762380
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!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question