Solved

CSS displays differently in IE and Firefox

Posted on 2007-12-03
2
271 Views
Last Modified: 2013-12-07
I am attempting to program a stylesheet, but am running into problems with Firefox.  Everything displays as I'd like in Internet Explorer 7, but not in Firefox 2.
- The first issue in Firefox is that the "width" attribute doesn't seem to be coming through.  No matter what I put the width at (10%, 40%, 50%) the contentL and contentR boxes appear the same.
- The second issue is that the footer (green in the attached code) is displayed directly below the menu (blue) instead of at the bottom of the page.
Both of these are fine in Internet Explorer.  Is there an issue with my code or is it with the Firefox browser?
Thanks in advance!!!

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style>

#menu

{

	padding: 10px 0 12px 0;

    width: 100%;

    background-color: blue;

}

#footer

{

   	width: 100%;

   	height: 10px;

	background: green;

}

#leftborder {

	float:left;

	padding:0 0 0 11px;

	background:#000000;

}

#rightborder {

	float:right;

	padding:0 11px 0 0;

	background:#000000;

}

DIV.container

{

	background:#ffffff;

	width:42em;

}

DIV.content

{

	background:#ffffff;

	border-left:3px solid #AAAAAA;

	border-right:3px solid #AAAAAA;

}

div.contentL

{

	float:left;

	width:40%;

	padding: 20px;

	background:#FFFFFF;

	color:#000;

}

div.contentR

{

	float:right;

	width:40%;

	padding: 20px;

	background:#FFFFFF;

	color:#000;

}

</style>

</head>

<body>

<div id="menu">

</div>

<center><div class="container">

<div id="leftborder">

<div id="rightborder">

<div class="content">

<div class="contentL">

Left column

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

</div>

<div class="contentR">

Right column

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

<br>abc

</div>

</div> <!--content-->

</div> <!--rightborder-->

</div> <!--leftborder-->

</div> <!--container--></center>

<div id="footer">

</div>

</body>

</html>

Open in new window

0
Comment
Question by:rhaak
2 Comments
 
LVL 28

Accepted Solution

by:
TName earned 500 total points
ID: 20397770
Hi, you could try this:

First, give the document a (valid) doctype! E.g.
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

then clear the floats for div.content and div.container, e.g. by assigning
   overflow:hidden;
for both.
Also, give div.content a width, e.g.
  width:40em;
div.container 

{

        overflow:hidden;

        background:#ffffff;

        width:42em;

}

div.content

{   

        overflow:hidden;

        width:40em;

        background:#ffffff;

        border-left:3px solid #AAAAAA;

        border-right:3px solid #AAAAAA;

}

Open in new window

0
 

Author Closing Comment

by:rhaak
ID: 31412399
Thank you!  I haven't quite figure out the overflow concept yet (obviously).  I appreciate the help!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Gmail Account risks 4 78
Why won't this text float to the left 8 26
.php tree directory? 5 56
compact pure CSS Read More Toggle 4 24
Do you come here a lot? Are you lazy like me and don't want to go through the "trouble" of having to click your Dock's Safari icon and then having to click your Experts Exchange Favorites bookmark to get here? Well then this article is for you.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

867 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

17 Experts available now in Live!

Get 1:1 Help Now