|
CSS - Floated Div Background Images Disappear In Ie6
All but the last image disappear in IE6 (works in FF and Safari).
I searched the web for a bug fix but have not found anything that works. Any assistance would be greatly appreciated. Thanks in advance. Here is the live link: http://www.crossmediamgmt.com/HelpwithIE6bug.html Here is my code: Code:
<style>
#news{
float: left;
width: 179px;
height: 332px;
padding-top: 30px;
}
#news ul{
margin: 0;
list-style: none;
text-decoration: none;
}
#news a {
display: block;
text-decoration: none;
}
#news img{
border: none;
}
#news a#Mar08{
width: 179px;
height: 20px;
background: url(../imagesjp/March_2008.gif)0 0 no-repeat;
}
#news a#Mar08:hover{
background-position: 0 -20px;
}
#news a#Sep07{
width: 179px;
height: 20px;
background: url(../imagesjp/september_01.gif)0 0 no-repeat;
}
#news a#Sep07:hover{
background-position: 0 -20px;
}
#news a#Aug07{
width: 179px;
height: 20px;
background: url(../imagesjp/august_2007.gif)0 0 no-repeat;
}
#news a#Aug07:hover{
background-position: 0 -20px;
}
#news a#May07{
width: 179px;
height: 20px;
background: url(../imagesjp/may2007.gif)0 0 no-repeat;
}
#news a#May07:hover{
background-position: 0 -20px;
}
#news a#Apr07{
width: 179px;
height: 20px;
background: url(../imagesjp/april2007.gif)0 0 no-repeat;
}
#news a#Apr07:hover{
background-position: 0 -20px;
}
#news a#Feb07{
width: 179px;
height: 20px;
background: url(../imagesjp/february_01.gif)0 0 no-repeat;
}
#news a#Feb07:hover{
background-position: 0 -20px;
}
#news a#Nov06{
width: 179px;
height: 20px;
background: url(../imagesjp/november.gif)0 0 no-repeat;
}
#news a#Nov06:hover{
background-position: 0 -20px;
}
#news a#Aug06{
width: 179px;
height: 20px;
background: url(../imagesjp/august2006.gif)0 0 no-repeat;
}
#news a#Aug06:hover{
background-position: 0 -20px;
}
#news a#Jul06{
width: 179px;
height: 20px;
background: url(../imagesjp/july.gif)0 0 no-repeat;
}
#news a#Jul06:hover{
background-position: 0 -20px;
}
#news a#Jun06{
width: 179px;
height: 20px;
background: url(../imagesjp/june.gif)0 0 no-repeat;
}
#news a#Jun06:hover{
background-position: 0 -20px;
}
#news a#May06{
width: 179px;
height: 20px;
background: url(../imagesjp/may_2006.gif)0 0 no-repeat;
}
#news a#May06:hover{
background-position: 0 -20px;
}
#news a#Apr06{
width: 179px;
height: 20px;
background: url(../imagesjp/april2006_01.gif) 0 0 no-repeat;
}
#news a#Apr06:hover{
background-position: 0 -20px;
}
</style>
</head>
<body>
<div id="news">
<img src="../images/news_img.jpg" alt="News" width="179" height="62" />
<ul>
<li><a href="news_sealing_selling_cracks.html" id="Mar08"></a></li>
<li><a href="news_maximizing_every.html" id="Sep07"></a></li>
<li><a href="news_print_solution.html" id="Aug07"></a></li>
<li><a href="news_americanprinter.html" id="May07"></a></li>
<li><a href="news_printer&mediabuyer.html" id="Apr07"></a></li>
<li><a href="news_printingnews.html" id="Feb07"></a></li>
<li><a href="news_printing_impressions.html" id="Nov06"></a></li>
<li><a href="news_dallas_branchout.html" id="Aug06"></a></li>
<li><a href="news_dallas_growingprinter.html" id="Jul06"></a></li>
<li><a href="news_dallas_businessgernal.html" id="Jun06"></a></li>
<li><a href="news_media_wins.html" id="May06"></a></li>
<li><a href="news_visionaries.html" id="Apr06"></a></li>
</ul>
</div>
</body>
</html>
Similar TutorialsHello DevShed CSS Help Forum, I have a wierd problem (seems I have a knack for that ) with a design I'm working on. When you first go to this page there is some disruption around the two floated columns in the background image that is assigned to the body tag: (Right now the page is only working in non-IE browsers, but I don't know any developers that regularly use IE anyways...LOL) http://www.spidersend.com/new_site/newsite4/test6.html However if you refresh the page or click to another tab and then back to that page it corrects itself. Once I remove the sidebar and the float property from the css on the main content area the issue is gone so it has to be something to do with that. Has anybody experienced this before? I just find it odd that it doesn't stay messed up, but corrects itself, even if you refresh and clear the cache. Confusing and wierd. Any ideas? Theories? Any and all ideas are much appreciated. Here is the CSS: Code:
body
{
background-color: #FFFFFF;
padding: 0px;
margin: 0px;
font-family: "arial";
background-image: url('images/bottom_slice.png');
background-repeat: repeat-x;
background-position: bottom center;
}
div#header
{
background-image: url('images/header_slice3.png');
background-repeat: repeat-x;
height: 198px;
width: 100%;
}
div#header-content
{
width: 680px;
margin: 0px auto;
}
div#top-navigation
{
width: 680px;
margin: 0px auto;
position: relative;
bottom: 16px;
color: #FFFFFF;
font-family: "arial";
font-size: 16px;
padding: 0px;
}
div#content
{
width: 850px;
float: left;
}
div#content-header
{
background-image: url('images/content_bg_top.png');
width: 850px;
height: 30px;
}
div#content-footer
{
background-image: url('images/content_bg_bottom.png');
width:850px;
height: 32px;
}
div#content-area
{
background-image: url('images/content_bg_slice.png');
padding-left: 18px;
padding-right: 18px;
}
div#adbar
{
width: 157px;
float: right;
}
div#adbar-header
{
background-image: url('images/sidebar_top.png');
width: 157px;
height: 30px;
}
div#adbar-footer
{
background-image: url('images/sidebar_bottom.png');
width: 157px;
height: 26px;
}
div#adbar-area
{
background-image: url('images/sidebar_slice.png');
padding-left: 5px;
padding-right: 5px;
}
div#sidebar
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
color: #0c577a;
}
div#sidebar2
{
float: right;
clear: both;
position: relative;
right: 10px;
background-color: #d2e7f0;
width: 300px;
-moz-border-radius: 5px;
padding: 5px;
margin-left: 15px;
margin-top: 20px;
color: #0c577a;
}
div#content-wrapper
{
width: 1007px;
margin: 0px auto;
}
The layout I have going is a bit difficult to explain. Here's a diagram.. The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header. I hope this makes sense. What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though. Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts? Thanks in advance for any assistance/suggestions. In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion? Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that. Hello, I'm new to Dev Shed, I hope I won't seem like a fool here Is there any way to have to background images? I mean, I want to have a heading background image, and a footer background image to the same table. longing to your replies>>>> Hi I have a table which i want to add 2 background images too. what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible? Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though. This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background. This is the css: Code: .professor_forum_row {
background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}
.professor_corner_tab {
background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}
the html is just a table with those classes assigned to the row and first td. Any ideas on why this is happening? Thanks, Ryan Hi Folks, I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins. Is it possible to somehow attach an image to one side of an element? Thanks John Hi there, hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image. this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves. here is my code but none of the top or bottom background images show. please help, thanking you in advance. css: #feature { float:right; width: 287px; height: auto; } .featuretop { background-image:url(../images/css/featuretop.gif); background-position:top; background-repeat:no-repeat; } .featuremiddle { background-image:url(../images/css/feature.gif); background-position:center; background-repeat:repeat-y; } .featurebottom { background-image:url(../images/css/featurebottom.gif); background-position:bottom; background-repeat:no-repeat; } html code: <div id="feature"> <div class="marTOP10"> <div class="featuretop"></div> <div class="featuremiddle"></div> <div class="featurebottom"></div> </div> </div> I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property. My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site. In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like: <div id="image" class="page_two"> Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this body { margin:0px; } and then attach an additional style sheet to each page that supersedes the body tag in the main sheet? I hope I am making sense... thanks jon K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box. HTML Coding ************* <div id="special_feature_top"> <img src="images/specialfeatures.jpg" width="800" height="30" alt="" /> </div> <div id="special_feature_mid"> <img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" /> <img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" /> <img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" /> </div> <div id="special_feature_btm"> <img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" /> </div> CSS Coding ************* #special_feature_mid { padding: 1px 0px 1px 10px; background-image: url('images/content_bg.jpg'); } That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks Matta Hi all. I've tried searching the net but every solution either isn't applicable or doesn't work. My problem is that all my CSS background images are not displaying at all in ie7. they are called in via link id. so: PHP Code: <a href="javascript:void(0)" id="cus" onClick="changeCus()"><img src="/images/space.gif" height="30" width="50" alt="" title="Customer Ratings" /></a> fairly simple stuff. the corresponding css is PHP Code: a#cus{background:url("../images/custM.png")no-repeat;left:-140px} I have treid changing the link as in ../../images... but that was dumb. Adding a background position. Adding display:inline. Adding display:block. Can anyone please aligten me as to why all my css images are failing. It works fine in FireFox. My doctype is set to strict. It is the correct path to the images. The images are on the server. Any help would be greatly apprcieated. Thanks in advance Jaza I am writing my site in XHTML 1.1 (application/xhtml+xml) entirely using ems. The page scales really nicely with browser text resizes however all of my rounded corners (background images), image bullet points, and any other background images do not. Is there any way to specify the background image width in ems? I think I'm going to have to mix presentational images with content otherwise. Hey all I'm trying to get to images to go to the sides of my content div. I've been looking on Google and everyone says you cant have 2 background images on 1 div (well is CSS2 anyways) is there any other ways of achieving this? also firefox is putting a space between my nav div and my content div, but IE7 doesn't, any ideas? Heres my HTML: Quote: <!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=utf-8" /> <title>RWD</title> <link href="rewebdesstyle.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- Container --> <div id="l_container"> <!-- Banner --> <H1>Reflective Web Design</H1> <!-- Navigation --> <div id="l_nav"> <br /> Home News Bio Portfolio Gallery Links Contact</div> <!-- close nav --> <!-- content --> <div id="l_content" class="l_cont_left"> <p> </p> <p> </p> </div> <!-- close content --> </div> <!-- close container --> Heres my CSS: Quote: body { text-align: center; margin: 0px; padding: 0px; background-color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #FFFFFF; } h1 { background-color: #666666; background-image: url(images/l_banner.jpg); background-repeat: no-repeat; height: 150px; width: 1024px; color: #FFFFFF; text-indent: -9999em; margin: 0px; padding: 0px; } #l_container { margin-left: auto; margin-right: auto; width: 1024px; text-align: left; } #l_nav { position: relative; height: 60px; width: 1024px; background-image: url(images/l_nav.jpg); color: #666666; font-size: 14px; font-weight: bold; text-align: center; word-spacing: 4ex; } .l_cont_left { background-image: url(images/l_left.jpg); background-repeat: repeat-y; background-position: left top; position: relative; width: 25px; } .l_cont_right { background-image: url(images/l_right.jpg); background-repeat: repeat-y; background-position: right top; position: relative; width: 25px; } #l_content { position: relative; width: 1024px; background-color: #7F969E; margin: 0px; padding: 0px; } #l_footer { position: relative; height: 67px; width: 1024px; } Here's where its hosted what i want it to look like (different fonts tho) What ive got so far Cheers Lance Hi I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image. Does anyone know why, and can they please help me Thanks Is it possible without any client side scripting to load in backgrounda.gif for 800x600 resolution and backgroundb.gif for any other resolution? Server side scripting is ok but I was hoping for a CSS method although I am pretty sure it's not possible. This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well... Any ideas? I have a website that I am trying to add some graphical enhancements to. I made them, and I think they look great! The problem is that they do not look the same when viewed in IE and I am not even sure where to start fixing them, as the problem doesn't make sense to me. starcraft-source.com/sandbox/ That is the URL to the page. It works great in FF but as I have said IE is messed up. Any help anyone can offer would be awesome. Thank you in advance. Help please. When I add the extra <div> the background disappears. Background image appears behind "Testing" <body> <div id="siteinfo"> <div id="fullinfo"> <h1>Testing</h1> </div> </div> </body> Background image disappears <body> <div id="siteinfo"> <div id="fullinfo"> <div id="myinfo"> <h1>Testing</h1> </div> </div> </div> </body> Stylesheet entries: body { background-color: #DADADA; background-image: url(/background2.gif); background-position: center; background-repeat: repeat-y; } #siteinfo { position: relative; margin-right: auto; margin-left: auto; width: 800px; } #fullinfo { position: relative; top: 10px; padding-left: 0px; padding-right: 25px; } #myinfo { position: inherit; float: right; width: 600px; } All help appreciated. |
|||||||