?
Solved

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

Posted on 2008-10-20
5
Medium Priority
?
247 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 1500 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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…
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses
Course of the Month9 days, 20 hours left to enroll

762 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