Solved

CSS displays differently in IE and Firefox

Posted on 2007-12-03
2
270 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
Comment Utility
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
Comment Utility
Thank you!  I haven't quite figure out the overflow concept yet (obviously).  I appreciate the help!
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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 …
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

771 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

10 Experts available now in Live!

Get 1:1 Help Now