Solved

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

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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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…

744 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now