black background missing in firefox 3 and opera

hi all

i have two column div structure in which i have applied black background colour to the main div which holds the two columns (left and right divs).

In internet explorer 7 the structure shows black colour in right side fine but its missing in Firefox 3 and opera 9. why.

please copy and paste the code in your editor and check. the html file is also attached.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>Untitled Document</title>

<style type="text/css">

#main{

width:946px;

margin:0px auto;

background-color:#000000; 

height:100%; 

}

#left{

width:201px;

float:left;

height:100%;

background-color:#FFFF00;

}

#right{

background-color:#FF00FF;

width:725px;

padding:10px;

}

</style>

</head>
 
<body style="background-color:#FF0000">

<!-- main starts -->

<div id="main">
 
<!-- left starts -->

<div id="left">

<p style="padding-left:30px; line-height:22px; margin:0px;">

<a href="one.html">Nokia</a> <br />

 Samsung <br />

 HTC <br />

 LG <br />

Sony Ericsson<br />

 Samsung <br />

 HTC <br />

 LG <br />

 Sony Ericsson<br />

 Samsung <br />

 HTC <br />

 LG <br />

 Samsung <br />

 HTC <br />

 LG <br />

 Sony Ericsson</p>

</div>

<!-- left ends -->
 
<!-- right starts -->

<div id="right" style="float:right">

<p>hello how are you</p>

<p>hello how are you</p>

<p>hello how are you</p>

<p>hello how are you</p>

</div>

<!-- right ends -->
 
</div>

<!-- main ends -->

</body>

</html>

vineet

Attached Files

bg.zip (755 Bytes, 66 views)

Jul 26 '09 #1

Subscribe Post Reply

2793

drhowarddrfine

7,435

Expert 4TB

Never, ever use IE as a reference for how anything should work. It's 11 years behind all other browsers in modern standards and practices and the worst browser on the planet. Note that the more modern browsers, Firefox and Opera (Safari, too), all work the same.

The problem, as it ALWAYS will be, is IE. Parent elements are NEVER to expand to contain floated elements. This is one of the hundreds of bugs and missing properties you are seeing in IE.

To force the modern browsers to act like IEs bug, add 'overflow:auto' to #main.

Jul 26 '09 #2

vinpkl

hi drhowarddrfine

thanks for the reply.

overflow:auto worked great. its solved now.

vineet

Jul 27 '09 #3

by: Al Dykes | last post by:

I'm playing around with FireFox and RSS for the first time and I'm getting this error "This XML file does not appear to have any style information associated with it. The document tree is shown...

HTML / CSS

IE, absolute positioning on a:hover & background-attachment

by: Michael Rozdoba | last post by:

I've had some trouble getting IE to behave in respect of applying absolute positioning to a span on an a:hover. I can get it to work, but I don't understand why certain code causes it to fail to...

HTML / CSS

<tr> background

by: Thierry Schembri | last post by:

Hi ! I'm facing problems with a background image in a table (with IE & Opera), it works with FF : the <tr> has a background image, but the background repeats in each <td> ex : tr...

HTML / CSS

How to modify the color according to background?

by: Konrad Den Ende | last post by:

I have a function returning a string but the problem is that the color of it is blue which suits me well for some pages but not for others. Is it possible to "feel" what the color of the background...

Javascript

Which is the standard for bottom positioned background?

by: typingcat | last post by:

Hello. I set a background image like the following; body { background: url('back.png') repeat-x bottom; } See this page for example: http://cat3.dotnet29.hostbasket.com/korean/ When the...

HTML / CSS

TR background versus TABLE

by: Giggle Girl | last post by:

Hi there, I need to use a background image in a TR that does NOT restart everytime it hits a TD. Can it be done? Specifically, if you set a background image for an entier table, now mater how...

HTML / CSS

background-image, what am I overlooking

by: hrschp | last post by:

Hi, as far as I know this always worked for a simple webpage up till a few days ago BODY { background-color: white; background-image: url(img/footer.gif); background-repeat: no-repeat;...

HTML / CSS

How to get (currentstyle or getComputedStyle.getPropertyValue) background-position in Firefox ? (works for IE & O)

by: Pugi! | last post by:

I would like to obtain the the position of backgroundimage of a div because I use it for animation. The following code works for Internet Explorer (takes the else if) and returns positionx '10px'...

Javascript

open new window in background : is it possible?

by: HopfZ | last post by:

Is it possible to open an external page in background? window.open('http://www.google.com/search?q='+Math.random()); window.focus(); I tried the above code in three browsers: Firefox 2 -...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

black background missing in firefox 3 and opera

Similar topics