CSS - Background Image Problems With Internet Exploder
If infinite monkeys, with infinite time, can write Shakespeare, IE's CSS support = 5 monkeys, 15 minutes.
I have a div with a background image, repeat-y. Both IE and Firefox put the background image in place, both repeat correctly. The problem is, IE puts the background image on top of the text!!! Background images don't get z-indexes, do they? Nothing is absolutely positioned, either. MPEDrummer [edit] On further experimentation, it seems if the div with the BG image is position: relative, then it screws up IE's idea of what a background image implies [/edit] Similar Tutorialsfor some reason my background image is NOT showing up-- i have tried everything that i can think of -- i do have an IMAGE directory on server-- and the image is in the directory -- i am sure it is something stupid that i am not seeing or doing but sure would appreciate a little help-- thanks in advance for help-- i so appreciate it here are links to site and code PAGE CSS - EDIT - I feel stupid because the images are named content_02.jpg not content02.jpg Sorry - I knew I wasn't crazy I've encountered a seriously odd css difficulty. Where as two nearly identical tags being called upon in the same manner... one will work and the other will not. This is my Stylesheet Code: td.bgimg1 { background-image: url('images/content02.jpg'); } td.bgimg2 { background-image: url('images/content06.jpg'); } td.bgimg3 { background-image: url('images/index_17.jpg'); } td.bgimg4 { background-image: url('images/index_18.jpg'); } td.upbgimg1 { background-image: url('../images/content02.jpg'); } td.upbgimg2 { background-image: url('../images/content06.jpg'); } td.upbgimg3 { background-image: url('../images/index_17.jpg'); } td.upbgimg4 { background-image: url('../images/index_18.jpg'); } td.upbgimg5 { background-image: url('../images/comic_01.jpg'); } A:link { FONT-FAMILY: Verdana, tahoma, Arial; COLOR: #284966; TEXT-DECORATION: underline; } A:visited { FONT-FAMILY: Verdana, tahoma, Arial; color : #284966; text-decoration : underline; } A:active { FONT-FAMILY: Verdana, tahoma, Arial; COLOR: #284966; TEXT-DECORATION: underline; } A:hover { FONT-FAMILY: Verdana, tahoma, Arial; COLOR: #FF8C00; TEXT-DECORATION: underline; } body{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000000; margin-top:0; margin-left:0; margin-right:0; margin-bottom:0 } table{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; font-style: normal; line-height: normal; font-weight: normal; font-variant: normal; text-transform: none; color: #000000; } This is the code where they are called upon... Code: <td width="16" class="upbgimg3"></td> This one works Code: <td width="16" class="upbgimg4"><div align="right"></div></td> As does this.. --- But the following don't work. Code: <td class="upbgimg2"> </td> Code: <td class="upbgimg1" valign="bottom"><div align="center">- Text -</div></td> I am linking to my style sheet as follows. Code: <link href="../textstyle.css" rel="stylesheet" type="text/css"> Any ideas? I have a problem that I just cannot figure out. Scenario I want to have my site have 2 background images, one for the actual html (THE WHOLE BROWSER WINDOW) which I created an image 20 pixels wide x 2500 high, so it accounts for most used screen resoltuions. Then I need to have a second image within the pagediv (container) ( think that is correct place to have it) that fills the width of the actual page, I have my page set for 940 pixels wide. Now I can acheive this fine by placing the second image in the css style sheet for my page container. But the problem that happens is the page goes beyond the window height, and when you scroll down at the point of the end of your window, the background image is cropped off. It seems that it is finishing at the end of my window. How can I stop this so that it is the actual lenght of the window with teh scroll. A link to the page where if you scroll it cuts off the lilac colour: http://www.acklamflooringservices.co.uk/development/index.html The css code for my html/body and page div. Code: html { height:100% } body { margin: 0px; background-color: #CCCCFF; background-image: url(inc/grnd.gif); background-repeat: repeat-x; height: 100% } #PageDiv { position:relative; width: 940px; margin:0px auto; background-image: url(inc/grnd2.gif); background-repeat: repeat-x; height: 100% } ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com Below is what I have. Displays fine in FF. In IE, there is approximatly a 13px white space under the image. Can't find an answer to this. Any insight is appreciated. --Sean HTML: <p id="dot"></p> CSS: #dot { position:relative; left: 0px; top: 0px; width:200px; height:6px; background-image: url(dot.jpg); background-repeat: repeat-x; line-height:0pt; margin: 0px; } Dear all, I have an iframe of variable width (width="100%") and a fixed height. Within the iframe I show multiple divs containing calendar appointments. Quite often, the number of divs that are side by side causes the iframe to scroll horizontally, which is fine, but when I scroll to the right I lose my background image and colour in the portion that wasnt visible when the page loads. If I reduce the screen size down, and refresh, then expand again, the area of the iframe that appears has a white blank background. Is there any way around this? Many thanks, Mark Hey Guys, I designed a header logo in the top left corner of my psd document. I am now slicing my design up and I can't seem to be able to position the header into the top left hand corner. Any help would be greatly appreciated. Here is my CSS Code: ul#nav { height: 91px; width: 271px; margin:30 auto; background: url(images/logo.jpg) no-repeat; } Hi, I would really appreciate some help sorting out an error that seems to only crop up on IE. http://www.formulation.org.uk/redesign Is fine on mac browsers (Safari/Camino/Firefox etc.). and fine on windows firefox. the problem appears to be with content wrap. It covers a majority of the banner and navigation bar background. I did manage to fix this with fixed positioning - however this caused adverse effects to the footer. Thanks in advance, Tom Hi guys, On the following page http://www.thekhans.me.uk/origami.php Internet Explorer only displays the image below the content on the right hand side; This glitch is only apparent in IE, Firefox and Opera render the page correctly, like below: Any work arounds? Hey guys, I'm trying to use div classes and z positioning to make a background that will stretch to the size of the browser window. The following code works fine in Firefox but the dimensions are wrong when viewed in IE. .bg_image { width: 100%; height: 100%; left: 0px; top: 0px; position: fixed; z-index: 0; } <div class="bg_image"> <img src="image_link.extension" width="100%" height="100%"> </div> My solution so far has just been to use the following to ensure that if it doesn't load properly that at least something loads- *html .bg_image { width: 1600; height: 2150; left: 0px; top: 0px; position: absolute; z-index: 0; } Is there any way I can get IE to recognize the 100% for height and width? Hey guys, I'm in need of some help here. Okay, so. My site looks the way I want so far on google chrome and safari (mac). And right now I'm at the stage of getting it to display like the two. If anyone who decides to help doesn't have access to certain browsers, I'll further explain, but I think it's easiest said to see for yourself. Right now I'm focusing on ie6, ie7, ff3. The markup in some areas is whacky, I know, but I decided to pick up where I left off on this project (which I first began building awhile ago) instead of starting completely over with a good template. http://thecheckoutplace.com/compute...eOneNetbook.php If anyone can offer a hand, it means a lot. Cheers guys. 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. I'm trying to set the background-image as follows- background-image: url("http://ezi-trading.com/test/welcome.gif"); This works fine inside the browser, but the background image does not display when the HTML is embedded within an HTML email. Any ideas please. The full listing is below. Thanks Matthew Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- #banner{ background-image: url("http://ezi-trading.com/test/welcome.gif"); background-position:center; height:100px; width:700px; background-repeat:no-repeat; position:relative; background-color:#CCCCCC; } --> </style> </head> <body> <div id="banner"> </div> </body> </html> I have recently (as in yesterday) installed Fireworks and Dreamweaver and I have been turning a png into a webpage and I have spent so much time getting the page to how it is now, my problem is that when I add a paragraph <p> into the html so that I can add some text, the default css background stays but does cover the entire page any more. I could be wrong and this could be a html issue (which as I am posting this seems more apparent) but if I remove the <p> the page displays perfectly although obviously no place to add text. I tried grouping them into different <div> and assigning them different ids and trying multiple different css functions to get it working,assigning the background in css but this provided the exact same result so any help would be appreciated (I think this could be more html related so after looking at my files if it is feel free to move it). You will see when you open the html file that there is a white gap under the main buttons but if u remove the <p> from the html it disappears. XHTML 1.0 Transitional complaint CSS level 2.1 Valid Ok, I cant post a link to my files so below is the best I can do or torquesro.info/Full.rar (if this is against the rules, sorry and feel free to remove it) hi im just learning css and im trying some things out and i ran into a problem i cant solve. my background is 4 images that overlap and it looks fine when i load it on the browser. but if i try to add my banner image i cant see the banner but my "background" is still there. can i set a specific order of the pictures some how because i think the background pictures overlap my banner image. heres the code minus the banner image. let me know if theres a code to put the images in the front or the back or whichever order i want. <html> <head> <title>Weblinks Webdesign</title> <style type="text/css"> #background { position:fixed; left:3px; top:3px; width:717px; height:720px; background-image:url(images/background.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } #background1 { position:fixed; left:400px; top:3px; width:717px; height:720px; background-image:url(images/background1.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } #background2 { position:fixed; left:400px; top:300px; width:717px; height:720px; background-image:url(images/background2.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } #background3 { position:fixed; left:3px; top:300px; width:717px; height:720px; background-image:url(images/background3.jpg); background-attachment: scroll; background-repeat: no-repeat; border:0px solid black; // added for clarity } </style> </head> <div id="background2"></div> <div id="background"></div> <div id="background1"></div> <div id="background3"></div> <P style="position:absolute; top:-30px; left:225px; padding: 5px 5px 5px 5px; font-size: xx-large; color: white;">Welcome to Weblinks Webdesign</P> <p STYLE="position:absolute; top:150px; left:225px; font-size: medium; color: black;">Weblinks is currently under construction</p> </body </html> In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work. You can clearly see the problem here, a gap at the bottom: http://www.groundedgroup.com/clients/NWR/ Here's the relevant css: http://www.groundedgroup.com/client...WR-GG/style.css I've googled and subsequently tried out some solutions, but no luck. Got any ideas? Thanks in advance. PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed. Hello, I am trying to automatically make my height of the website larger as more text is put in. It works fine with my center body div as it gets larger as i type more text into the site. However, the list i have in there isnt making it larger for some reason. here is my css code: html, body { margin: 0px; padding: 0px; background-color: #000000; } /**************************/ /**************************/ /**********LAYOUT**********/ /**************************/ /**************************/ div#container { margin-left: auto; margin-right: auto; margin-top: 20px; width: 963px; height: 100%; border-style: solid; border-color: #CC9900; border-width: 2px; } /*****HEADER*****/ div#header { background-color: Teal; width: 963px; height: 175px; } /****************/ /*****MIDDLE*****/ /****************/ div#middle { width: 963px; float: left; background-image: url('../images/left.png'); background-repeat: repeat; } /*****LEFT BOX*****/ div#leftbox { background-image: url('../images/left.png'); background-repeat: repeat-y; height: auto; width: 213px; float: left; } div#links { width: 213px; height: 375px; float: left; background-image: url('../images/links.png'); } /*****MIDDLE BOX*****/ div#centerbox { background-image: url('../images/body.png'); background-repeat: repeat-y; width: 535px; float: left; border-left: solid 1px #CC9900; border-right: solid 1px #CC9900; } div#title { width: 535px; height: 40px; border-bottom-style: solid; border-bottom-color: #CC9900; border-bottom-width: 1px; margin-top: 0px; } div#list { width: 535px; height: auto; background-image: url('../images/left.png'); background-repeat: repeat-y; } /*****RIGHT BOX*****/ div#rightbox { background-image: url('../images/left.png'); width: 213px; background-repeat: repeat-y; float: right; } div#news /*This is the title text for the news box*/ { width: 213px; height: 25px; margin: auto; } div#newsbox /*This is the news box div*/ { width: 199px; height: 199px; border: 0px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } div#events { width: 213px; height: 25px; margin: auto; } div#eventsbox { width: 199px; height: 199px; border: 0px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } /****************/ /*****FOOTER*****/ /****************/ div#footer { background: #333333; width: 963px; height: 55px; clear: both; background-image: url('../images/footer.jpg'); } /*****CONTACTS*****/ div#phone { float: left; width: 213px; height: 55px; text-align: left; } div#address { float: left; width: 535px; height: 55px; text-align: center; } div#e-mail { float: left; width: 213px; height: 55px; text-align: right; } /*****FLASH DIVS*****/ div#flashcontent { width: 963px; height: 175px; } /********************/ /*****PROPERTIES*****/ /********************/ /*****DIVS*****/ div.event1 { background-image: url('../images/event_1.jpg'); width: 210px; height: 150px; float: left; margin-left: 37.5px; margin-right: 20px; margin-top: auto; margin-bottom: auto; } div.event2 { background-image: url('../images/event_2.jpg'); width: 210px; height: 150px; float: left; margin-left: 20px; margin-right: 37.5px; margin-top: auto; margin-bottom: auto; } div.list { width: 535px; } div.listtext { width: 435px; } div.sublisttext { width: 335px; } /*****LISTS*****/ ul { text-decoration: none; margin-top: auto; margin-bottom: auto; margin-left: -10px; width: 213px; } li { list-style-image: url('../images/diamond_bullet_white.png'); width: 213px; height: 31.25px; margin: auto; line-height: 31.25px; } /*****ANCHORS*****/ a { text-decoration: none; color: #000000; width: 213px; height: 31.25px; margin: auto; } a.e-mail /*This is issued to any anchors for e-mail, addresses*/ { color: #000000; font-weight: bold; } a:active { color: Red; text-decoration: none; list-style: none; } a.contacts { margin: none; color: #FFFFFF; } /***PARAGRAPHS***/ p#contactinfo { color: #FFFFFF; font-size: 11.5px; height: 55px; margin-top: 6px; margin-left: 10px; margin-right: 10px; } p.title { color: #000000; font-size: 30px; text-align: center; margin-top: 0px; margin-bottom: 0px; height: 40px; } p.body { width: 500px; margin: auto; } p.boxtitle { font-size: 20px; text-align: left; margin-left: 7px; margin-top: auto; margin-bottom: auto; } p.subheader { width: 500px; font-size: 14px; text-align: left; font-weight: bold; margin: auto; } take a look at www.bosszine.be, looks fine isn't it sidebar no problems at all both in IE and FF now take a look at http://www.syntra-ab.be/template.aspx, again no problem both in IE and FF but is that so? try to capture the sidebar images from IE it won't work don't take notice at the flash infobox, that's a work in a progress furthermore take a look at http://www.syntra-ab.be/helpdesk/ and notice there's suddenly a big problem in IE (much smaller boxes on the sidebar) there's clearly a rendering problem in IE with my background images in the css how can I make this work properly? any suggestions? I need a solution urgently, the new website is due this thursday and I already spent the whole day trying to find the problem and now I've found it to fix it :-) any suggestions are greatly appreciated Thanks for viewing my post. Here is the site I am working with: http://www.flattrackillustrated.com/dev/ I am having two problems: 1) If you shrink your browser too far in on the left, the floating right image goes over everything. I need to MAX left side margin to be about 600px, but with float on, the margin-left doesn't work! Is there a way to tell this image to float, but stop at a certain point? 2) I want the background image I have on the left nav side to continue all the way to the bottom of the page, however, since I already am using a background image for the top, I can't seem to do a horizontal and vertical of two different images. Is there a way to make this happen? Thanks! |