Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS displays differently in IE and Firefox

Posted on 2007-12-03
2
Medium Priority
?
291 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 2000 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

Technology Partners: 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

Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
When you put your credit card number into a website for an online transaction, surely you know to look for signs of a secure website such as the padlock icon in the web browser or the green address bar.  This is one way to protect yourself from oth…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

773 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