background color escaping div

@Sunny_GJun 04.2006

Lately I’ve been playing around with CSS layouts, and this one is driving me nuts! Well, the layout itself works and looks pretty good ?
But as usual, Firefox & Opera display it just fine, and IE is in the dust.

In IE, the background of an absolutely positioned div is escaping, and flows underneath the text of another div. I’ve attached the file as a zip.

I still have alot to learn about CSS :rolleyes:

~~[upl-file uuid=7f8c9374-432e-47a2-aa6a-024a7347d3c9 size=14kB]~~sunnyg.zip[/upl-file]

to post a comment

CSS

8 Comments(s) _↴

@WebJoelJun 04.2006 — #I think you're trying to do a 'star hack' here(?) That wild card is useless IMHO:

[B]* {

margin:0;

padding:0;

border:0;[/B]

This is meaningless, as you have defined no declaration.

Write it:

[B]body[/B]{

margin:0;

padding:0;

border:0;

And see if this helps.

Clearly, you have an a border, padding or margin in IE causing this, and the first STYLE example isn't doing anything.

?

-Joel

@Sunny_GauthorJun 04.2006 — #OHHHhhh...

I changed that, no go. and I applied those rules to every element, still no go.

@3PinterJun 04.2006 — #Sunny G,

I don't know what you want with your layout (everything blue except the content which is supposed to be white?)

I create another possible layout for you which is more clear and better coded than yours. I also removed some mistakes in your css. And added some improvements (for searchengines etc)

Anyway have a look at it.

Good luck let me know if this is what you were looking for.

3Pinter

[code=html]
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <title>Fluid width with faux columns template</title>
 
 <style type="text/css">
 
 #container
 {
 width: 100%;
 margin: 10px auto;
 background-color: #0099ff;
 color: #333;
 line-height: 130%;
 font-family:verdana, arial, sans-serif;
 }
 
 #top{
 /* Additional styling possible for top */
 }
 
 #top h1
 {
 background:#0099FF url(images/banner.png) no-repeat;
 padding: 0;
 margin: 0;
 height:150px;
 border-bottom:1px solid #000000;
 }
 #top h1 span{display:none;} /*You may want this: searchengines see <span>-text eventhough it's invisible for the visitor. */
 
 #leftnav
 {
 float: left;
 width: 150px;
 margin: 0;
 padding: 3px;
 }
 
 #content
 {
 margin-left: 200px;
 border-left: 1px solid #333;
 padding: 1em;
 background-color:#fff;
 }
 
 #footer
 {
 clear: both;
 margin: 0;
 padding: .5em;
 background-color: #0099ff;
 border-top:1px solid #000000;
 }
 
 #leftnav p { margin: 0 0 1em 0; }
 #content h2 { margin: 0 0 .5em 0; }
 
 h2{
 margin:0; padding:0;
 letter-spacing:3px;
 font-variant:small-caps;
 }
 
 p {
 color:#000000;
 font-size:12px; 
 margin:0 10px 15px 10px;
 }
 
 ul { list-style-type: none;}
 ul li a:link { color: #0000ff; text-decoration: none;}
 ul li a:visited { color: #000080;}
 ul li a:active { color:#ff0000;}
 ul li a:hover { color:#ff6600;}
 
 </style>
 
 </head>
 <body>
 <div id="container">
 <div id="top">
 <h1>
 <span>Sunny - add your &lt;h1&gt; here!<span>
 </h1>
 </div>
 <div id="leftnav">
 <ul>
 <li><a href="http://www.google.com" title="visit google.com">Google</a></li>
 <li><a href="http://www.webdeveloper.com/fourm/index.php?" title="visit webdeveloper.com">Webdeveloper</a></li>
 </ul>
 </div>
 <div id="content">
 <h2>Test</h2>
 <p>
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
 </p>
 <p>
 Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
 </p>
 </div>
 <div id="footer">
 <p>Maybe a footer? For a text like: Webdesigned by: Sunny </p>
 </div>
 </div>
 </body>
 </html>
 
 [/code]

@WebJoelJun 04.2006 — #I had another idea last night before going to bed, -that color in the middle, -was that an [I]image[/I]? Just a colored 'slice'? While I'd have done it using background-color and borders (maybe you did, -have to download your code again), an image slice for a background/background-color is viable and acceptible.

But just recently I did another page that had 'sliced' images which formed sort~of a stair-step effect and the text would flow around it using float(s), giving the page's upper-left hand corner a nice 45-degree angle effect....

But in some browsers, the 'image steps' had this mysterious 'gap' around them, making them appear more like 'stripes', not 'steps'.. ?

So, if this color-image of yours is a background image, tiled-y, try adding this to it's style:

margin:0; border:0; display:block;

One (or more?) of these might nail the 'one-pixel off' problem... (I am leaning towards the "display:block;" as being needed...)

If this doesn't work, re-examine how WIDE your background-image is. It can be wider than the container DIV. In fact, I might purposefully make it so. It will 'tile' cleanly and, if centered, acheive the desired effect (I often make a body background-image that is 2 or 3-pixels TALL but 1500 or 2000-pixels WIDE and they repeat-y without any x-overflow scrollbar and it looks great on 800x600 and 1024x768 (but presumeably starts to fail at widths greater than 1501-pixels or 2001-pixels respectively)... hope this makes sence.

?

-Joel

@Sunny_GauthorJun 04.2006 — #I don't know what you want with your layout (everything blue except the content which is supposed to be white?)[/QUOTE]
Thanks for making the layout! I'll be testing it soon.

The whole point of the layout I originally made, was for the navigation div to be last in the code, so the main div would make the page rank higher in search engines.

I see what you mean about the background image, WebJoel...

=30 seconds later=

OK, I gave that a try, no go. That line is not image. The navigation div is 150px wide, and the background image is also the same width (150px). I set it to repeat-y, but not X. It's also not a background of the navigation div, it's of body (so I don't have to make navigation go full height) ?

==edit==

OK, so I gave your layout a try, 3Pinter. Hmmm... It doesn't go full screen, and the navigation isn't after main, but it looks SWEET! ? I still need to work on website "prettiness" :p and more CSS design aspects, rather than layout. :o

@Sunny_GauthorJun 04.2006 — #So, if this color-image of yours is a background image, tiled-y, try adding this to it's style:

margin:0; border:0; display:block;[/QUOTE]

Wait.... Can you add those to the background image?

@WebJoelJun 04.2006 — #I re-examined & downloaded your ZIP-file again (having removed it Friday) and see that my suggestion isn't quite useable. Somehow though, I can't seem to get [I]any[/I] of your images to appear in my HD-saved copy. I saved everything to my HD and made sure that the paths are correct, -nothing. Even altering the name in the "background-image:url("foo.gif" or "foo.png");" to any 'incorrect' name changes nothing ergo, I am not getting the images at all (hense my stating a few days ago to post your code, because from your ZIP-files, I was not receiving something...).

Anyway... examined the template from 3Pinter earlier this morning... easier to follow I think. Maybe run with this now but [I]I am still curious[/I] about why/what is the original problem and of course, it's solution... ?

@Sunny_GauthorJun 05.2006 — #The images don't show? That's weird. They work for me though.

I'll be researching still for the answer to this odd puzzle.

Thanks for your help!

Also in #CSS _↴

Table Too Long compatibility of CSS with browsers W3C CSS Validator

Success!

Help @Sunny_G spread the word by sharing this article on Twitter...

Tweet This

background color escaping div

8 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

background color escaping div

8 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #CSS _↴