Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Problems with background colour in nested div blocks.

Reply
Thread Tools

Problems with background colour in nested div blocks.

 
 
damezumari
Guest
Posts: n/a
 
      10-08-2008
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

 
Reply With Quote
 
 
 
 
Els
Guest
Posts: n/a
 
      10-08-2008
damezumari wrote:

> 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?


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/

--
Els http://locusmeus.com/
 
Reply With Quote
 
 
 
 
damezumari
Guest
Posts: n/a
 
      10-08-2008
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
 
Reply With Quote
 
Ari Heino
Guest
Posts: n/a
 
      10-08-2008
damezumari kirjoitti seuraavasti:
> I am sure the code can be simplified. Any suggestions?


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, 18
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.
--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
Bergamot
Guest
Posts: n/a
 
      10-08-2008

damezumari wrote:
>
> 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">


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.

--
Berg
 
Reply With Quote
 
Neredbojias
Guest
Posts: n/a
 
      10-08-2008
On 08 Oct 2008, damezumari <(E-Mail Removed)> wrote:

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


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

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

--
Neredbojias
http://www.neredbojias.org/
Great Sights and Sounds
 
Reply With Quote
 
damezumari
Guest
Posts: n/a
 
      10-10-2008
Thanks for all the feedback!

Thank you Airo Heino for writing neater code!

Regards,

Jan Nordgreen
 
Reply With Quote
 
Ari Heino
Guest
Posts: n/a
 
      10-11-2008
damezumari kirjoitti seuraavasti:
> Thank you Airo Heino for writing neater code!


That's Ari but thanks anyway!

--
Ari
http://users.utu.fi/athein/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
What is the point of having 16 bit colour if a computer monitor can only display 8 bit colour? How do you edit 16 bit colour when you can only see 8 bit? Scotius Digital Photography 6 07-13-2010 03:33 AM
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
Colour blindness, photography and colour management Tor Lillqvist Digital Photography 12 05-24-2004 08:57 AM
changing a background image to a background colour? Dj Frenzy Javascript 3 02-10-2004 08:08 PM



Advertisments