CSS - Image Problems In Ie
Hi
I have a two curved images. They sit fine on the webpages in FF but there is a gap in IE. I have tried allsorts of things to get it sorted but nothing seems to work. Have a look at me code: PHP Code: <div class='main'> <div style='float:left;'><img src='images/left_corner.gif' alt='left_corner' /></div> <div style='float:right;'><img src='images/right_corner.gif' alt='right_corner' /></div> <div class='proheader'>Problem with images</div> </div> And heres the CSS code: PHP Code: .main{ position:absolute; top:125px; left:140px; } .proheader{ background-color:#0099CC; font-size:12px; font-weight:800; height:19px; } The file can b found at : http://pfwd.org.uk/sfd/image_problem.htm Please help Thanks Similar Tutorialsevery time i upload a picture through html or css it affects other images around it or creates a big gap how do i avoid this......also for a template im i best to use individual pictures or make the template all as 1 photo problem fixed, please delete this post Hello, I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed. I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best! My problem: I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first. I want to change both from their background color to an image. The text still have to be able to be read. I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way. Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem! And thank you so far! Here are the codes from my footer: Quote: #footer { text-align: center; font: 7pt arial, sans-serif; background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat; color: #BBBBBB; z-index: 100; clear: both; border: 0px; padding: 10px; } Hi there, This image gallery is working fine is Safari and Firefox, but has a problem in IE, but I just can figure it out! Here is the page: http://www.greatsouthmetals.com/image-gallery.html Please help! Thanks! I've got a background image problem with my first real attempt at a table-free CSS design. There are two main images (one is top-right in the body background, the other is bottom-left in a div). It looks like the bottom-left image occasionally gets displayed at the bottom of the viewable area instead of the actual page. When you scroll down you can see that the image is repeated. Refreshing the page sometimes solves the problem (and sometimes creates it), but switching windows with Alt-Tab fixes it every time. Hovering over the links in the body of the page, which change the background color, sort of "erases" the repeat image. Has anyone come across this before? Any chance it's the same problem Dave Shea mentions at: http://www.mezzoblue.com/archives/2004/04/08/ie_vs_image_/index.php Thanks, Josh html: http://66.213.53.5/index.html css: http://66.213.53.5/season.css screen: http://66.213.53.5/images/problem.gif - 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? for 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 I have followed several tutorials for using a bg image as a bullet and I can't figure out why it isn't working. Here is the webpage These are the items that should have a custom bullet (an upside down blue triangle) Introducing the New ATS/ERS Standards Spirometry Training is Essential Guidelines for COPD Emphasize Spirometry Training COPD: Make Your Goal Early Detection by Tom Petty Here is the css: Code: #newsletter ul { padding: 0; list-style: none; } #newsletter li { margin-left: 30px; background-image: url(../images/bullet.gif) repeat-n; } Here is the xhtml: Code: <div id="newsletter"> <h1>Vitalograph Newsletters</h1> <div class="row"> <span class="imgLeft"><a href="/pdfs/newsletters/vitalink_fall2005.pdf"><img src="../images/vitalink_fall2005.jpg" alt="vitalink spirometry newsletter" width="125" height="161" border="0" lowsrc="/pdfs/newsletters/vitalink_fall2005.pdf" /></a></span> <h2>Vitalink Newsletter</h2> <ul> <li>Introducing the New ATS/ERS Standards</li> <li>Spirometry Training is Essential</li> </ul> <span><a href="/pdfs/newsletters/vitalink_fall2005.pdf" target="_blank">Vitalink Fall 2005 (pdf 583 KB)</a></span> <ul> <li>Guidelines for COPD Emphasize Spirometry Training</li> <li>COPD: Make Your Goal Early Detection by Tom Petty</li> </ul> <span><a href="/pdfs/newsletters/vitalink_spring2005.pdf" target="_blank">Vitalink Spring 2005 (pdf 583 KB)</a></span> </div> <div class="row"> <h2>Pharma Newsletter</h2> <p>The Pharma Newsletter provides up to date information on Vitalograph's latest respiratory clinical trials products and services, news about our people and where you can meet us. It also highlights important new legislation and other relevant news in the industry that we hope will be a useful resource for you. </p> <p><a href="/pdfs/newsletters/pharma_newsletter_jan2006.pdf" target="_blank">Pharma January 2006 (pdf 76 KB)</a></p> <p><a href="/pdfs/newsletters/pharma_april2006.pdf" target="_blank">Pharma April 2006 (pdf 49 KB)</a></p> </div> <div class="line"></div> </div> Hi: I am using an image as the background in a <td> tag. Also, that <td> tag has a border on the top and bottom. When viewing this page in FF, the border sits perfectly against the image (and the <td> tag). When viewing this in garbage IE, there is a pixel line between the image and the border. What is the problem? What is the fix to get the borders to sit perfectly on the image? Here is the style for the <td> with id="header" Code: #header { background: #FFF; background-image: url(include/head.jpg); background-repeat: no-repeat; height: 136px; width: 100%; background-position: right; border-top: 1px solid #999; border-bottom: 1px solid #999; } And here is the <td> Code: <table id="main"> <tr> <td id="header"> <ul id="nav"> <li><a href="">Home</a></li> <li><a href="">Benefits</a></li> <li><a href="">FAQ</a></li> <li><a href="">About</a></li> <li><a href="">Pay Your Bill</a></li> <li><a href="">Contact</a></li> </ul> </td> </tr> </table> Thanks in advance. Link: http://www.wiu.edu/users/mujas2/test/ Also, if anyone has an idea about those tabs, let me know! Thanks in advance, please ask if further info is needed! 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% } hey all..got a wierd one..well to me anyway ! hope someone can tell me what im doing wrong !! i have code like this Code: #banner img { height: 15em; width: 25em; margin: 0.5em; } to manage the size of an image but i want to add another image to the page and i can't the css can be found here and the page im working on can be found here if anyone has any ideas that wouldbe marvelous... thanks RF Hi all, I seem to be having some problems between FF & IE i have the background image set at 100% in CSS and it works fine in IE but if you look at it in FF there is some of it missing.. Here is the script If you look at it in IE first you will see what it is meant to look like.. Code: /* * Main Background */ #main-body { margin: 0px auto; width: 999px; height: 100%; background: url('./images/bricks.jpg') 100% repeat; } So what am i missing ? hey guys I am quite new to CSS, so i am hoping someone will be able to enlighten me - i am sure this is one of those "easy to sort out when you know how to work with IE7" problems... Anyway - this page is causing me problems anambar. co. uk/ listings / The page displays fine in Firefox, but in IE7, the Square images for each event are cut off halfway. Seems like they are hidden behind another div layer... Any ideas why? or how this is solved? Any feedback on dodgy CSS / code also welcome - I had loads of problems with the dreaded Operation Aborted in IE7 yesterday with conflicting JS, hence the lightbox code being right at the end of the page, so if anyone knows a cleaner solution or why its happening, i would love to know! Cheers guys Jim 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 i am trying to use this very simple image gallery from cssplay stu nichols site "A permanent image click gallery with 'previous' / 'next' buttons" so i change the css to suit my images and create my own prev|next buttons but when i check it in a browser - i'm working with dreamweaver cs5 [trial] it dosn't show me the buttons i'm very new to css - and am bashing my head over this issue would appreciate any help - not sure if i need to put in my altered source code so i will Code: CSS #gallery { width:500px; height:500px; margin:0 auto; position:relative; font-family:verdana, arial, sans-serif; } #gallery a.previous {display:block; height:40px; width:32px; background:url(click/previous.gif); position:absolute; left:0; top:560px;} #gallery a.next {display:block; height:40px; width:32px; background:url(click/next.gif); position:absolute; right:0; top:560px;} #gallery a b {display:none;} #gallery #fullsize { position:absolute; left:0; top:0; height:550px; width:500px; overflow:hidden; text-align:center; } #gallery #fullsize div {width:500px; height:600px; padding-top:10px; position:relative;} #gallery #fullsize div img {clear:both; display:block; margin:0 auto; border:0;} #gallery #fullsize div h3 {padding:10px 0 0 0; margin:0; font-size:8px;} #gallery #fullsize div p {padding:5px 0; margin:0; font-size:10px; line-height:14px;} Code: XHTML <div id="gallery"> <div id="fullsize"> <div id="pic1"> <img src="images/greyday/gd1.jpg" alt="grey day1" /> <a class="previous" href="#pic10"><b>Previous</b></a><a class="next" href="#pic2"><b>Next</b></a> <h3>1 | 10</h3> </div> <div id="pic2"> <img src="images/greyday/gd2.jpg" alt="grey day2" /> <a class="previous" href="#pic1"><b>Previous</b></a><a class="next" href="#pic3"><b>Next</b></a> <h3>2 | 10</h3> </div> <div id="pic3"> <img src="images/greyday/gd3.jpg" alt="grey day3" /> <a class="previous" href="#pic2"><b>Previous</b></a><a class="next" href="#pic4"><b>Next</b></a> <h3>3 | 10</h3> </div> <div id="pic4"> <img src="images/greyday/gd4.jpg" alt="grey day4" /> <a class="previous" href="#pic3"><b>Previous</b></a><a class="next" href="#pic5"><b>Next</b></a> <h3>4 | 10</h3> </div> <div id="pic5"> <img src="images/greyday/gd5.jpg" alt="grey day5" /> <a class="previous" href="#pic4"><b>Previous</b></a><a class="next" href="#pic6"><b>Next</b></a> <h3>5 |10</h3> </div> <div id="pic6"> <img src="images/greyday/gd6.jpg" alt="grey day6" /> <a class="previous" href="#pic5"><b>Previous</b></a><a class="next" href="#pic7"><b>Next</b></a> <h3>6 | 10</h3> </div> <div id="pic7"> <img src="images/greyday/gd7.jpg" alt="grey day7" /> <a class="previous" href="#pic6"><b>Previous</b></a><a class="next" href="#pic8"><b>Next</b></a> <h3>7 | 10</h3> </div> <div id="pic8"> <img src="images/greyday/gd8.jpg" alt="grey day8" /> <a class="previous" href="#pic7"><b>Previous</b></a><a class="next" href="#pic9"><b>Next</b></a> <h3>8 | 10</h3> </div> <div id="pic9"> <img src="images/greyday/gd9.jpg" alt="grey day9" /> <a class="previous" href="#pic8"><b>Previous</b></a><a class="next" href="#pic10"><b>Next</b></a> <h3>9 | 10</h3> </div> <div id="pic10"> <img src="images/greyday/gd10.jpg" alt="grey day10" /> <a class="previous" href="#pic9"><b>Previous</b></a><a class="next" href="#pic1"><b>Next</b></a> <h3>10 | 10</h3> </div> </div> </div> i really would appreciate some help with this - thank you in advance 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; } Hi-- I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help! I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png. In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background. My code: Code: <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } a img {border: none;} .button {width: 193px; height: 116px; background-image:url(button.jpg);} .button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;} .button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;} --> </style></head> <body> <div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div> </body> </html> 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 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] |