Solved

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

Posted on 2008-10-20
5
243 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

Industry Leaders: 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

This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

738 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