By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,274 Members | 2,229 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,274 IT Pros & Developers. It's quick & easy.

Need help with a css problem involving divs and background images

P: 4
Hi,

I am trying to create a colored box using background images. I am able to do it easily using tables but doing it in divs is proving to be an issue. Moreover IE and Mozilla also seems to be showing diff representations for the same code piece..

Can somebody help me out on this!

The code is as shown below
[html]
<html>
<head>
<style>
.left_top {
background: #fff url(top_left_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.left_bottom {
background: #fff url(bottom_left_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.left_center {
background: #fff url(center_left_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.right_top {
background: #fff url(top_right_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_bottom {
background: #fff url(bottom_right_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_center {
background: #fff url(center_right_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.middle_top {
background: #fff url(top_midle_alertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_bottom {
background: #fff url(bottom_middle_alertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_center {
background-color: #FFCCCC;
padding:0; margin:0;
}
</style>
</head>
<body>

<P>Using tables</P>
<table width="472" style="padding:0; margin:0;" cellspacing="0" cellpadding="0">
<tr>
<td class="left_top"></td>
<td class="middle_top"></td>
<td class="right_top"></td>
</tr>
<tr>
<td class="left_center"></td>
<td class="middle_center">Hi how are u? Box comes fine if we uses tables!</td>
<td class="right_center"></td>
</tr>
<tr>
<td class="left_bottom"></td>
<td class="middle_bottom"></td>
<td class="right_bottom"></td>
</tr>
</table>

<p>Using divs</p>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_top"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_top"></div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_top"></div><br/>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_center"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_center">Hi how are u? Can u help me with this please! This has been giving me some heart ache alrite!</div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_center"></div><br/>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_bottom"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_bottom"></div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_bottom"></div>

</body>
</html>
[/html]

I have attached the screenshot of output and also required images for the html above.

The table code in the HTML works fine but the one using the divs does not.

Help please!!!

TIA,
Arup
Attached Images
File Type: gif untitled.GIF (14.6 KB, 131 views)
Attached Files
File Type: zip alert_box.zip (4.4 KB, 65 views)
May 21 '07 #1
Share this Question
Share on Google+
7 Replies


drhowarddrfine
Expert 5K+
P: 7,435
You will never get IE to pretend it's a modern browser without a proper doctype. See the articles section for html/css. Use html4.01 strict. Then validate your html for your list of errors. (Your css is fine).
May 21 '07 #2

P: 4
You will never get IE to pretend it's a modern browser without a proper doctype. See the articles section for html/css. Use html4.01 strict. Then validate your html for your list of errors. (Your css is fine).
Yes I agree. I added doctype and got it validated with W3C HTML and CSS validator but still it doesn't seem to have an iota of effect on the output :(

Find below the corrected html
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-us">
<HEAD>
<title>Error box</title>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<META name="GENERATOR" content="IBM WebSphere Studio">
<META http-equiv="Content-Style-Type" content="text/css">
<style type="text/css">
.left_top {
background: #fff url(top_left_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.left_bottom {
background: #fff url(bottom_left_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.left_center {
background: #fff url(center_left_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.right_top {
background: #fff url(top_right_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_bottom {
background: #fff url(bottom_right_alertbox.gif) no-repeat 0px 0px;
width:15px;
height:15px;
padding:0; margin:0;
}
.right_center {
background: #fff url(center_right_alertbox.gif) repeat-y 0px 0px;
width:15px;
height:1px;
padding:0; margin:0;
}
.middle_top {
background: #fff url(top_midle_alertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_bottom {
background: #fff url(bottom_middle_alertbox.gif) no-repeat 0px 0px;
width:442px;
height:15px;
padding:0; margin:0;
}
.middle_center {
background-color: #FFCCCC;
padding:0; margin:0;
}
</style>
</HEAD>
<body>

<P>Using tables</P>
<table width="472" style="padding:0; margin:0;" cellspacing="0" cellpadding="0">
<tr>
<td class="left_top"></td>
<td class="middle_top"></td>
<td class="right_top"></td>
</tr>
<tr>
<td class="left_center"></td>
<td class="middle_center">Hi how are u? Can u help me with this please! This has been giving me some heart ache alrite!</td>
<td class="right_center"></td>
</tr>
<tr>
<td class="left_bottom"></td>
<td class="middle_bottom"></td>
<td class="right_bottom"></td>
</tr>
</table>

<p>Using divs</p>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_top"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_top"></div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_top"></div><br/>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_center"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_center">Hi how are u? Can u help me with this please! This has been giving me some heart ache alrite!</div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_center"></div><br/>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="left_bottom"></div>
<div style="display:block; float:left; width:442px; padding:0;margin:0;" class="middle_bottom"></div>
<div style="display:block; float:left; padding:0;margin:0; width:15px;" class="right_bottom"></div>

</body>
</html>[/html]
May 22 '07 #3

P: 4
And its not just a problem with IE alone.. Mozilla also displays it in a weird manner..
May 22 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Your doctype still isn't right; it's incomplete and IE still goes into qurks. Also, new pages have no need for the transitional doctype. Always use strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

They look the same to me.
Attached Images
File Type: gif 2.gif (10.8 KB, 135 views)
May 22 '07 #5

P: 4
Your doctype still isn't right; it's incomplete and IE still goes into qurks. Also, new pages have no need for the transitional doctype. Always use strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

They look the same to me.
hmm.. I made the doctype change but still don't see any change happening in my html. I am using IE ver 6 and Mozilla firefox ver 1.5.0.6.

Can you use the images tat I have attached and make it come the way tat it is in my screenshot of the page for the box done using tables. Your screenshot doesn't show the side elements but just the pink box.

The content inside the table will be dynamic in the sense that the box will expand vertically if more content is there.

Can you send me ur html files to arupfrancis@gmail.com or post it in ur next reply.
Then probably I can see where I am going wrong.

TIA
May 23 '07 #6

drhowarddrfine
Expert 5K+
P: 7,435
Well, I screwed up and that's what I get for working too fast. I didn't notice the images. I'll look at this soon.
May 23 '07 #7

drhowarddrfine
Expert 5K+
P: 7,435
So, really, this is a CSS Rounded Corners problem. To solve this, I would go to sites that talk about this as it's been solved in many ways. You can Google for CSS Rounded Corners or look at these links:

http://css-discuss.incutio.com/?page=RoundedCorners
http://virtuelvis.com/gallery/css/rounded/
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/
http://www.schillmania.com/content/projects/even-more-rounded-corners/
http://www.roundedcornr.com/
http://www.w3.org/Style/Examples/007/roundshadow.html
http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/
http://www.spiffycorners.com/
http://www.html.it/articoli/nifty/index.html
http://kalsey.com/2003/07/rounded_corners_in_css/
May 23 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.