Solved

CSS displays differently in IE and Firefox

Posted on 2007-12-03
2
285 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
[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
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses

626 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