Problems with background colour in nested div blocks.

D

damezumari

I am trying to create a blue header with two images and text.

The page is found at http://easyquestion.net/testing/index.php.

It works as intended in Ie6, but neither in Chrome nor in Mozilla
Firefox.

The code has been validated as html and css. Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title></title>
</head>
<body>

<div style="background-color: #2584BC; width: 980px;">
<div style="float:left; padding-left:45px;"><img src="images/middle-
logo122.gif" alt="image"></div>
<div style="float:right; padding-right:40px;"><img src="images/
garden2.jpg" alt="image"></div>
</div>

<div style="background-color: #2584BC; width: 980px; margin-top:
-20px;">
<div style="float:right; font-family: Times, serif; font-size: 13px;
color:white; margin-bottom:10px; padding-right: 40px;">Garden
International School, 182/24 Moo 4, Pala Road, Ban Chang, Rayong
21130, THAILAND - Tel: 00 66 (0) 38 880 360</div>
</div>

</body>
</html>

What am I doing wrong?

Regards,

Jan Nordgreen
 
E

Els

damezumari said:
I am trying to create a blue header with two images and text.

The page is found at http://easyquestion.net/testing/index.php.

It works as intended in Ie6, but neither in Chrome nor in Mozilla
Firefox.
[snip]

What am I doing wrong?
Click to expand...

The floated divs aren't seen by their parent.
This makes the parent have zero height, so you can't see its
background.

dorayme has a nice set of pages that explain all the details, here:
http://netweaver.com.au/floatHouse/
 
D

damezumari

Thanks a lot Els! I had no idea.

I added a height and now it works in all browsers.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title></title>
</head>
<body>

<div style="background-color: #2584BC; width: 980px; height: 170px;">
<img style="float:left; padding-left:45px;" src="images/middle-
logo122.gif" alt="image">
<img style="float:right; padding-right:40px;" src="images/garden2.jpg"
alt="image">
<p style="clear: both; background-color: #2584BC; width: 980px;
height: 50px; text-align:right; font-family: Times, serif; font-size:
13px; color:white;">Garden
International School, 182/24 Moo 4, Pala Road, Ban Chang, Rayong
21130, THAILAND - Tel: 00 66 (0) 38 880
360&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</
p>
</div>
</body>
</html>

Well, to be honest, the padding-right part doesn't work well in IE,
but that is OK.

I am sure the code can be simplified. Any suggestions?

Regards,

Jan Nordgreen
 
A

Ari Heino

damezumari kirjoitti seuraavasti:
I am sure the code can be simplified. Any suggestions?
Click to expand...

How about

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Garden International School</title>
<style type="text/css">
#box {
background: rgb(37, 132, 188)
url(images/middle-logo122.gif) no-repeat top left;
color: #fff;
float: left;
}

#inner-box {
background: transparent
url(images/garden2.jpg) no-repeat top right;
width: 980px;
height: 170px;
float: left;
}

address {
font-family: Times, serif;
font-size: 90%;
font-style: normal;
margin: 125px 5px 0 0;
text-align: right;
}
</style>
</head>
<body>
<div id="box">
<div id="inner-box">
<address>
Garden International School, 182/24 Moo 4, Pala Road, Ban
Chang, Rayong 21130, THAILAND - Tel: 00 66 (0) 38 880 360
</address>
</div>
</div>
</body>
</html>


css should later be placed to an external style sheet.
 
B

Bergamot

damezumari said:
The page is found at http://easyquestion.net/testing/index.php.

It works as intended in Ie6, but neither in Chrome nor in Mozilla
Firefox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Click to expand...

FYI, that DOCTYPE triggers quirks mode in all browsers. Don't expect
anything to be consistent. Switch to HTML 4.01 Strict and you'll get
much better results.
 
N

Neredbojias

It works as intended in Ie6, but neither in Chrome nor in Mozilla
Firefox.
Click to expand...

Ah, so many times have I seen that very same disclaimer...

It actually means there is a 100% chance you did something wrong.
 
D

damezumari

Thanks for all the feedback!

Thank you Airo Heino for writing neater code!

Regards,

Jan Nordgreen
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
<div> help 1
Clickable Div Block 1
Align img inside nav tabs section 5
Help with code 0
Aligned to the left 3
Having difficulty with the layout of these images / video for this web page 2
Help with my responsive home page 2

Members online

Total: 49 (members: 1, guests: 48)
Robots: 156

Forum statistics

Threads
473,990
Messages
2,570,211
Members
46,796
Latest member
SteveBreed

Latest Threads

Top