CSS - Border Disappears When Viewing In Ie7/vista
I'm sure this is something stupid and simple I've overlooked.. So I am hoping that someone here can see what I am missing here.. I am FINALLY in the home stretch for this site, and I cannot for the life of me figure this out..
This only happens on the gallery pages.. The side border disappears when viewing the site in IE7 but ONLY under the Vista OS.. (At home I have IE7 and WinXP and the gallery pages display just fine..) http://clients.overthehillweb . com/hairisle/index.php?main_page=page&id=2&chapter=0 What the is different with IE7 and Vista? Screenshot of what's happening: http://i25.tinypic . com/2gtq4jr.png Perhaps a better question is this.. It appears that my method for applying that border to the center content and dropdown nav menu is not working well under IE7 with Vista (and for some folks XP and IE7). Is there a better way to apply this border to the center content and the nav menu that WILL work with IE7?? Similar TutorialsThe right hand border for some of my table cells (Class "item_body") disappears, but they have almost identical coding to the cells the work properly. My CSS that pertains to the borders: Code: td.item_body {background-color: #e7e7e7; border-left: 1px solid #c6c6c6; border-right: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6; margin: 5px 5px 5px 5px} And the code for the table with the cell that doesn't work: Code: <table cellspacing='0' cellpadding='0' border='0' valign='middle' width='100%'> <tr height='22px'> <td class='item_title' width='100%'><p class='title'> Search Roster </p></td> </tr> <tr> <td class='item_body' width='100%'><p class='item_body'> Use this form to search for any Bronco Virtual Airlines pilot. You may use as many or as little fields as you would like. For best results, try to enter all the information you know. <form action="index.php" method='get'> <input type='hidden' name='page' value='roster' /> <input type='hidden' name='act' value='shw' /> <table cellspacing='0' cellpadding='2' border='0' width='100%'> <tr><td width=50%><p class='item_body'>Full Name:</p></td> <td><p class='item_body'><input type='input' name="name" /></p></td></tr> <tr><td><p class='item_body'>Pilot ID</p></td> <td><p class='item_body'><input type='input' name="pilotid" /></p></td></tr> <tr><td><p class='item_body'>Pilot Base:</p></td> <td><p class='item_body'><select name="base"> <option selected='selected' value='' />Any Base <option value='kboi' />KBOI <option value='kgtf' />KGTF <option value='ksea' />KSEA <option value='kslc' />KSLC </select></p></td></tr> </table><br /><p class='item_body_center'><input type='hidden' name='orderby' value='last' /><input type='submit' value="Search"></form> </p></td> </tr> </table> ok i have links on the side, i have applied border-bottom:0.1em solid black properties so they look like they are underlined. Now it all works but sometimes when i scroll the page down and then up, SOME of the link's border have disappeared, i can fix this by moving my mouse of the links and the border appear but i was wondering is it to do with CSS/html? the only other thing could be my Screen/monitor's refresh rate this is my code and the display is different in IE on Vista, the rounded containers alternating in colours are showing up with a staggered border and not a smooth rounded edge as it should be. is this a fault in IE for Vista? or yet another coding error i need fixing Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> window.onload=function() { links=document.getElementsByTagName('a'); for(c=0;c<links.length;c++) { if(links[c].className=='bm') { /*this specifies the bookmark links by class*/ links[c].onclick=function() { bookmarks(this.title,this.href); } } } } function bookmarks(title,url){ if(window.sidebar) { window.sidebar.addPanel(title,url,''); } else { if((window.opera)&&(window.print)){ lnk=document.createElement('a'); lnk.setAttribute('href',url); lnk.setAttribute('title',title); lnk.setAttribute('rel','sidebar'); lnk.click(); } else { window.external.AddFavorite(url,title); } } } </script> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function leapto(form) { var myindex=form.dest.selectedIndex location.href=(form.dest.options[myindex].value); // You can output to ANY frame using: parent.[framename].location.href } // End --> </SCRIPT> <style type="text/css"> <!-- .verticalline { border-width: 2px; border-color: #FFFFFF; border-left-style: solid; height: 100%; } .horizontalline { border-bottom-width: 2px; border-color: #999999; border-bottom-style: solid; height: 100%; } .container1 { background:#799BD9; margin:0 5px;} .rtop1, .rbottom1{ display:block; background:#507BCD; } .rtop1 *, .rbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; } .container2 { background:#325EAF; margin:0 5px;} .rtop2, .rbottom2{ display:block; background:#507BCD; } .rtop2 *, .rbottom2 *{ display: block; height: 1px; overflow: hidden; background:#325EAF; } .container3 { background:#FFFFFF; margin:0 5px;} .rtop3, .rbottom3{ display:block; background:#507BCD; } .rtop3 *, .rbottom3 *{ display: block; height: 1px; overflow: hidden; background:#FFFFFF; } .menucontainer { background:#799BD9; margin:0 5px;} .menurtop1, .menurbottom1{ display:block; background:#125892; } .menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; } .r1{ margin: 0 5px} .r2{ margin: 0 3px} .r3{ margin: 0 2px} .r4{ margin: 0 1px; height: 2px } a.one:link { color: #000; } a.one:visited { color: #000; } a.one:hover { color: #fff; } a.one:active { color: #000; } a.one { text-decoration: none; } h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; } h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; } --> </style> </head> <body bgcolor="#000000"> <table width="319" align="center" style="border-collapse:collapse;"> <tr> <td width="311" height="126" valign="top" bgcolor="#000000"> <table cellpadding="8" style="border-collapse:collapse;"> <tr> <td valign="top"> <div align="center"> <table border="1" cellpadding="8" bordercolor="#FFFFFF" bgcolor="#507BCD" style="border-collapse:collapse;"> <tr> <td> <div><table width="100%" border="2" bordercolor="#FFFFFF"> <tr> <td><table width="100%" style="border-collapse:collapse"> <tr> <td width="100%" height="121" align="center" valign="bottom" bgcolor="#125892"><img width="707" height="49" border="0"></td> <td valign="top" bgcolor="#125892"> <div align="right"></div></td> </tr> <tr> <td colspan="2" bgcolor="#125892"> <style> <!-- A {color:#000000; font-weight: normal;} A:hover {color: #0066FF; font-weight: normal;} --> </style> <body> <table width="100%" style="border-collapse:collapse;"> <tr> <td height="21"> <div class="menucontainer" align="center"> <b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <a href="" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> m1</font></a> <b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b> </div> </td> <td width="5%"> <font color="#FFFFFF" size="2" face="Tahoma"> 3427 </font> </td> </tr> </table> </td> </tr> </table></td> </tr> </table> <table style="border-collapse:collapse;"> <tr> <td valign="top"> <table style="border-collapse:collapse;"> <tr> <td> </td> </tr> <tr> <td><font color="#FFFFFF" size="4" face="Tahoma"> <a href="?m=10&y=2007" STYLE="text-decoration: none"> </a> </font></td> </tr> <tr><td> <table width="100%"> <tr> <td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <a class="one" href="?v=3612" target="_blank"> <h1>Big Star Wars Toys Collection - And a nice thumbnail interface too</h1> </a> submitted on 11-10-2007 Via <a class="one" href="http://www.okfuture.net" target="_blank">OKFuture</a> <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td> </tr> <tr> <td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <a class="one" href="?v=3611" target="_blank"> <h1>Haunted Memories - Pictures of people that turn nasty when you catch them at an angle </h1> </a> submitted on 11-10-2007 <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td> </tr> <tr> <td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <a class="one" href="?v=3609" target="_blank"> <h1>Launchball - Tricky strategy game. Get the ball to the goal by using different objects</h1> </a> submitted on 11-10-2007 <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td> </tr> <tr> <td> <div class="container2"> <b class="rtop2"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <a class="one" href="?v=3610" target="_blank"> <h1>Launchball - Tricky strategy game. Get the ball to the goal by using different objects</h1> </a> submitted on 11-10-2007 <b class="rbottom2"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td> </tr> <tr> <td> <div class="container1"> <b class="rtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b> <a class="one" href="?v=3608" target="_blank"> <h1>Cuddly Tardis</h1> </a> submitted on 11-10-2007 <b class="rbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div></td> </tr> </table> </td></tr> </table> </td> <td valign="top" class="verticalline"><table cellpadding="4"> <tr> <td valign="top"> </td> </tr> </table> </td> </tr> </table> </div></td> </tr> </table> </div></td> <td rowspan="3" valign="top"> </td> </tr> <tr></tr> <tr> <td></td> <td></td> </tr> </table> </td> </tr> </table> </html> Hello, So my question is this: How do 'we' go about targeting browsers with IE7 between Vista and XP? The two versions render differently, and in my case, I need to be able to target one in a conditional comment (like I do for IE6 of course) to fix it in that version. The site is www.justmythoughts.com , and it renders correctly in IE7 Vista, however is a good 150px pushed to the side in IE7 XP. What is the 'new' remedy for this type of situation these days?? Is there any solution for this yet? Thanks, Nick Im just playing around with CSS and Photoshop and made this so far:- http://www.o0matte0o.myby.co.uk/windows-vista/ Lazy Link It look as its ment to in IE7, Vista IE and IE6 (apart from the PNG Transparancy in IE6) but when I view the site in Firefox there are spaces between each of the sub titles and the Title on the Transparent part is not in the correct place can any one help to see where Im going wrong please? I have tested the CSS and XHTML and bouth complie to the standard so I cant see what Im doing wrong :S Code: body { color:#565656; font-family: "Segoe UI", "Trebuchet MS", sans-serif; font-size: 80%; } hr { display:none; } img { border:none; } body { padding:12px 0 25px; background-image:url(../images/background.png); } h1 { padding:3px; font-size: 165%; padding-left:40px; } h2 { font-size: 100%; padding-left:110px; line-height:8px; } h3 { padding-left:225px; } .p1, .p2, .p3, .p4, .p5 { padding-left: 230px; padding-right:15px;} a { color:#6666FF; } a:hover,a:active { background-color:#9999FF; color: #565656; } #container { margin-left:10%; } #pageHeader { width:822px; height:80px; overflow:hidden; background-image:url(../images/header-test.png); text-shadow:#333333;} #quickSummary { width:822px; background-image:url(../images/content.png);} #preamble { width:822px; background-image:url(../images/content.png); } #explanation { width:822px; background-image:url(../images/content.png); } #participation { width:822px; background-image:url(../images/content.png); } #benefits { width:822px; background-image:url(../images/content.png); } #requirements { width:822px; background-image:url(../images/content.png); } #footer { width:822px; height:27px; text-align:center; background-image:url(../images/footer-test.png); } #linkList { position:absolute; float:left; top:100px; } #linkList h3 { padding-left:30px; padding-top:1px } #linkList h3, li, ul { list-style:none; display:list-item; } Any other idears people comment (noting that the XHTML file should not be changed as Im trying to only do every thing with CSS like the name of the site HTML page is from.) Hi, the background of the top navigation (it's a drop down menu) disappears when I make the google custom search box float left. I need it to float left because I want it to be on the same line as the top navigation menu. The id of the div that should show the bg is #topNavContainer. Page: http://hopewwamericorps.org/index.php Style: PHP Code: #topNavContainer { background: #000000 url(../images/topNavBg.gif) repeat-x scroll; } #topNav { height: 40px; width: 760px; margin: 0px auto; text-align: left; padding: 0px 0px 0px 100px; color: #bcd5df; float:left; } #siteSearch { padding-top: 10px; width: 300px; float: left; display: block; } HTML: PHP Code: <div id="topNavContainer"> <div id="topNav"> <ul class="sf-menu"> -**REMOVED FOR POST**- </ul> </div> <div id="siteSearch"> <form action="http://hopewwamericorps.org/page.php?Page=Search_Results"> <input type="hidden" name="cx" value="018067663729731490355:_3djw8ivavo" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="hidden" name="Page" value="Search_Results" /> <input type="text" name="q" size="31" /> <input type="submit" name="sa" value="Search" /> </form> <script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=en"></script> </div> </div> Thank you for your help! Please ask me to clarify if needed, thanks. I am having a problem.. The site am working on looks great in FF but in IE breaks when you click on a the link to view a larger picture and then mouse off the link. The padding on the bottom of the body (#main) disappears. i have a Javascript that switches the image out for another one. i am not sure if this is the problem. can someone please take a look i have been racking my brain on this for days. http://www.avallo.com/test/fatcatweb/phototest.shtml (Problem occurs when thumbnail is clicked and then moused off in IE 5.5 and IE 6) i have a border on the #main div so you can see what i am talking about. * Update * it isnt the javascript. here is the css and html. Code: #main { border:#333 dotted 1px; float:right; display:inline; position:relative; width: 610px; padding-bottom:30px; background:url(images/body-top.gif) no-repeat; } #mainbody { margin: 30px 20px 20px 15px; } a.thumb { float:left; margin: 0 5px 5px 0; padding: 2px; border: #fff 2px solid; } a.thumb:hover {border: #895FA5 2px solid;} <div id="mainbody"> <h1>Photo Portfolio</h1> <p>Fat Cat Art Studio is proud to provide our clients with images of their business, area, or workers. This portfolio is a SMALL representation of recent photos.</p> <div class="photos"> <h2>The Shore Photos</h2> <div class="floatR" id="change1"><img src="images/photos/photo-01.jpg" alt="Enlargment" width="350" height="245" border="0" /></div> <p>Taking a stroll on the shore leads to inspiration and some unique perspectives.</p> <a class="thumb" href="javascript:change('change1','photo-01',350,245)"><img src="images/photos/photo-01x.jpg" alt="Thumb" width="75" height="75" border="0" /></a> <a class="thumb" href="javascript:change('change1','photo-02',350,263)"><img src="images/photos/photo-02x.jpg" alt="Thumb" width="75" height="75" border="0" /></a> <a class="thumb" href="javascript:change('change1','photo-03',350,264)"><img src="images/photos/photo-03x.jpg" alt="Thumb" width="75" height="75" border="0" /></a> </div> </div> thanks, weston Ok i have a problem with css in IE7(figures!)... Dont know if i need a hack for it or i just suck at css but when i load my page in firefox everything is perfect but when i load it in IE7 there is nothing! I figured out it is because of im using a clear and if i dont use the clear it shows up but of course it doesnt look right. html4strict Code: Original - html4strict Code <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="main"> <div id="header"> <div class="logo"> <img src="images/Logo beta2.jpg" alt="Logo" /> </div> <div class="top-section"> </div> <div class="top-border"> </div> </div> </div> </div> </body> </html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> CSS: css Code: Original - css Code @charset "utf-8"; #container { height: auto; width: auto; padding: 10px; visibility: visible; overflow: auto; } * html #container { height: 1%; } #main { position: relative; } #header { height: auto; width: auto; position: relative; } .top-border { height: 10px; width: 900px; position: relative; background-image: url(css-images/t-border.jpg); background-repeat: no-repeat; clear: left; } .logo { float: left; position: relative; } .top-section { float: left; height: 120px; width: 600px; position: relative; } @charset "utf-8"; Im doing a project Located Here *** not work safe *** 96.0.176.55/login.php Please look at the css and html If you hover over with the mouse on the top navigation were you see Gallery you will notice there is a drop down menu with three separate choices or images... The problem is when you move the mouse down to the second or third image the dropdown disappears. Can someone please help? Thanks Ok, 'guys' I've hit a snag. I'm trying to redesign my website and am using blueprint css framework for the first time in my life. I've tested the layout in FF3.6, Google Chrome v8.0, Safari for Windows v5.03, IE8, and IE8 in compatibility mode [to emulate IE7]. It works great in ALL browsers I tested except emulated IE7. In this mode, the menu completely disappears except for a separate div that holds the left nav image. I have validated the html and my customized css file and have gotten rid of all errors found...but, still cannot get the nav menu to show up in emulated IE7 mode. So, I'm hoping Kravvitz or some other CSS god will come to my rescue. the short link to my dev page is http://drw65.servehttp.com/ this is a url redirect link that will redirect to my personal webspace from my ISP. thanks for reading. I have a wrapper div with a height of 600px and a width of 900px Inside it there are 2 divs The first is floated left with the below style Code: #left{ height : 100%; width : 600px; overflow:hidden; float : left; } The second one is not floated, so that it can occupy the rest of the space and the style is Code: #right{ height : 100%; overflow : auto; margin-left : 600px; } The above design is meant to create a 2 column layout with a fixed height. The html I used is Code: <div class="wrapper"> <div id="left"> <img id="main-image" src="/some/image"/> </div> <div id="right"></div> <br clear="left"/> </div> The thing is that Opera (v 10.01) and Safari (v. 4.0.3) do not display the right div. When I remove the overflow:auto, however they do. I cannot figure out why. Any help appreciated Thanks I have a basic div: Code: <div id="box1"></div> The CSS for the div: Code: #box1 { position: relative; width: 75%; padding-top: 10px; padding-right: 10px; padding-bottom: 0px; padding-left: 100px; background-color: #FFFFFF; *background: none; z-index: 1; left: 50px; top: 50px; background-image: url(images/1px_trans75percent.png); filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/1px_trans75percent.png', sizingMethod=scale, enabled=true); background-repeat: repeat; border: 1px solid #FFFFFF; } The transparent background flashes and disappears when the page is loaded in IE6. Any ideas on how to get it to appear and stay appeared would be much appreciated... thanks! Hi. Have created some simple tabs using table cells. Active tab should have bottom-border color equal to page background-color. Non-active tabs should have bottom-border=black. Works fine in IE, but does not work very well in Firefox. If I remove the border-collapse:collapse on the table, then firefox also work... but I would like to be able to keep the 1px border between each table cell. So is there a way to make this work in both IE and Firefox... and hopefully most other browsers... See code below: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd"> <html> <head> <style type="text/css"> a.menu_top:link {color: #000000; text-decoration: none;} a.menu_top:visited {color: #000000; text-decoration: none;} a.menu_top:hover {color: #000000; text-decoration: none;} a.menu_top:active {color: #000000; text-decoration: none;} td.menu_top_passive { background-color: #777; border-left: 1px #000000 solid; border-right: 1px #000000 solid; border-top: 1px #000000 solid; border-bottom: 1px #000000 solid; text-align: center; cursor:pointer; font-weight: bold; padding: 5px 20px 5px 20px; margin: 0; } td.menu_top_active { background-color: #bbb; border-left: 1px #000000 solid; border-right: 1px #000000 solid; border-top: 1px #000000 solid; border-bottom: 1px #bbb solid; text-align: center; cursor:pointer; font-weight: bold; padding: 5px 20px 5px 20px; margin: 0; } </style> <script language="JavaScript"> function change(id, url) { for (i=1; i<6; i++){ eval("document.getElementById("+i+").className='menu_top_passive'"); } eval("document.getElementById("+id+").className='menu_top_active'"); } </script> </head> <body style="margin:0; padding:0; background-color:#bbb;"> <br><br> <center> 1. Load the page.<br> 2. Click Item 4.<br> 3. Click Item 2.<br><br> Why is the bottom border of the menuelements (table cells) not getting correct in Firefox?<br> None-active menuelements should have a border-bottom = black, active should have same bottom-border as page.<br> Notice that I use border-collapse on the table in order to get the cell-border 1px thick between the menuitems.<br> If I remove border-collapse, then there is no strange behaviour in Firefox.<br> Any way to get this working in Firefox without breaking it in IE? </center> <br><br><br> <table border="0" cellpadding="0" cellspacing="0" align="center" style="border-collapse:collapse;"> <tr> <td id="1" nowrap class="menu_top_active" onClick="change('1');"><a href="javascript:;" class="menu_top">Item 1</a></td> <td id="2" nowrap class="menu_top_passive" onClick="change('2');"><a href="javascript:;" class="menu_top">Item 2</a></td> <td id="3" nowrap class="menu_top_passive" onClick="change('3');"><a href="javascript:;" class="menu_top">Item 3</a></td> <td id="4" nowrap class="menu_top_passive" onClick="change('4');"><a href="javascript:;" class="menu_top">Item 4</a></td> <td id="5" nowrap class="menu_top_passive" onClick="change('5');"><a href="javascript:;" class="menu_top">Item 5</a></td> </tr> </table> </body> </html> Hi Guys, Thanks to some incredible pointing me in the right direction yesterday, i have finally got to my 3-col layout that I want. The only issue is now my news box will let content role behind it, but really i want it to push down as with the footer bar! Can anyone point me in the right direction please? Stylesheet below and output at www.generating-sets.com/index.new2.php PHP Code: html {height:100%;} body { margin:0; padding:0; height:100%; background-image:url(bgs.gif); background-position:top right; background-repeat:repeat-y; background-color:#ffffff; font-family: Times, "Times New Roman", serif; } #wrap { background-image:url(bg.gif); background-position:top left; background-repeat:repeat-y; min-height:100%; } * html #wrap {height:100%} #header { background-image:url(label2.gif); background-position:right; background-repeat:no-repeat; background-color: #000066; border-bottom: 2px #ffffff solid; color: #ffffff; margin:0; padding:0; height:80px; } p {margin:5px; padding:0;} h1 { position:relative; line-height:80px; margin:0; padding-left:20px; } #left { float:left; width:150px; color: #ffffff; text-align:center; background-color: #000066; } #main { position:relative; margin-left:200px; } #right { float:right; width:10px; text-align:center; color: #ffffff; background-color: #000066; } #content { padding:5px; margin-right:200px; text-align:left; } #clearfooter { clear:both; height:80px; overflow:hidden; } #footer { height:40px; background-color: #000066; border-top: 2px #ffffff solid; margin:0; padding:0; margin-top:-0px; color: #ffffff; text-align:center; } div#newsbar {padding: 1%; text-align: center; height:150px; background-color: #000066; color: #ffffff; margin-left: +150px; margin-right: +10px; margin-top: -190px; border: 2px #ffffff solid; width: auto;} code { font-size:0.8em; border:1px solid navy; background-color:white; color:#333333; padding:10px; display:block; width:80%; margin:10px auto; overflow:auto; } There must be a reason why it works like it does, but i don't know!! Charlie Originally it worked in IE, but nothing else, now we've gotten it to work in FF, Safari, Opera, et. al., but the page wrapper background disappears in MSIE 7. http://www.splatteredink.com/realms/ CSS: Code: #overall { background: #ababab url(../images/wrapper_bg.png)100% 0 repeat-y; width: 100%; min-height: 335px; float: right; } any ideas? In IE6, the vertical scrollbar disappears if the browser window is opened vertically past the <div id="text intro"> section (if the bottom of the browser window is within or above this section, the scroll bar is present). The scrollbar is present as normal in FF and Safari. So this is apparently an IE issue. I've tried a couple of fixes to seemingly related bugs, such as adding the line "display:inline;" to both of my floating elements. I also tried the Holly Hack fix of adding "height:1%" to my relatively positioned element, "body". The scrollbar behavior remains the same. The following are my .php and .css files. Any ideas on this would be much appreciated... thanks. PHP Code: <!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=iso-8859-1" /> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <title>Title</title> <body> <div id="container"> <div id="address">Address</strong></div> <div id="banner">Banner<div id="logo"></div> <div id="redseethru" class="redseethru"></div> <div class="redseethru" id="links"></div> <div id="link1">Link</div> <div id="link2">Link</div> <div id="link3">Link</div> <div id="link4">Link</div> <div id="link5">Link</div> </div> <div id="breadcrumbs">Script </div> <div id="red_title">Products</div> <div id="title">Kayaks</div> <div id="body"> <div id="text_intro">Text</div> <p>ipsum lorem</p> <p>ipsum lorem</p> <p>ipsum lorem</p> <p>ipsum lorem</p> </div> <div class="redseethru" id="footer"></div> <div id="copyright">Copyright</div> <div id="silver">Design</div> </div> </body> </html> CSS: PHP Code: /* CSS Document */ #container { position:absolute; width:750px; left:50%; margin-left:-350px; } #address { position:absolute; width:615px; height:12px; z-index:10; left: 165px; top: 0px; font-family: Arial; font-size: 11px; color: #FFFFFF; padding-top: 1px; padding-bottom: 1px; } #banner { position:absolute; width:750px; height:125px; z-index:1; left: 0px; top: 50px; background-image: url(http://www.sportingrage.com/js/banner_images.js); border: 2px solid #CF1C0D; } #logo { position:absolute; width:285px; height:150px; z-index:2; left: -40px; top: -49px; visibility: visible; background-image: url(http://www.sportingrage.com/images/TSR_white_SML.png); } img, #logo { behavior: url(http://www.sportingrage.com/iepngfix.htc); } body { background-color: #000033; } .redseethru { position:absolute; width:150px; height:100px; z-index:3; left: 602px; top: 0px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://www.sportingrage.com/images/redseethru.png'); } .redseethru[class] { background-image: url(http://www.sportingrage.com/images/redseethru.png); } #red_title { position:absolute; width:145px; height:25px; z-index:10; left: 598px; top: 120px; text-align: right; font-family: Arial; font-size: 24px; font-weight: bold; color: #FFFFFF; } #links { position:absolute; width:750px; height:25px; z-index:5; left: 0px; top: 100px; border-top: 1px solid #CF1C0D; } #link1 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left:2px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link2 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 87px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link3 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 172px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link4 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 258px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } #link5 { position:absolute; width:74px; height:15px; z-index:10; font-family: Arial; font-size: 12px; font-weight: bold; color: #FFFFFF; padding: 5px; left: 342px; text-align: center; border-right: 1px solid #CF1C0D; top:100px; } /*White Links*/ a.white:link { font-family: Arial; color: #ffffff; text-decoration: none; } a.white:visited { font-family: Arial; color: #ffffff; text-decoration: none; } a.white:hover { font-family: Arial; color: #ffffff; text-decoration: underline; } #breadcrumbs { position:absolute; width:730px; height:20px; z-index:1; font-family: Arial; font-size: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 5px; padding-top: 10px; left: 0px; top:179px; background-color: #FFFFFF; border-right-width: 2px; border-left-width: 2px; border-right-style: solid; border-left-style: solid; border-right-color: #FF0000; border-left-color: #FF0000; text-indent: 7px; } a.breadcrumbs:link { color:#000033; text-decoration:underline; font-weight: normal; font-family: Arial; font-size: 10px; } a.breadcrumbs:visited { color:#000033; text-decoration:underline; font-weight: normal; font-family: Arial; font-size: 10px; } a.breadcrumbs:hover { color:#000033; text-decoration:underline; font-weight: normal; font-family: Arial; font-size: 10px; } #title { position:absolute; width:740px; height:20px; z-index:1; font-family: Arial; font-size: 20px; padding-right: 5px; padding-left: 5px; padding-top: 10px; left: 0px; color: #000033; font-weight: bold; text-align: left; padding-bottom: 5px; top: 214px; background-color: #FFFFFF; text-indent: 10px; border-right-width: 2px; border-left-width: 2px; border-right-style: solid; border-left-style: solid; border-right-color: #FF0000; border-left-color: #FF0000; } #body { position:relative; width:730px; height:1%; z-index:6; left: 0px; top: 249px; background-color: #FFFFFF; border-top: 2px none #CF1C0D; border-right: 2px solid #CF1C0D; border-bottom: 2px solid #CF1C0D; border-left: 2px solid #CF1C0D; padding: 10px; } #text_intro { position:relative; width:650px; height:50px; z-index:10; font-family: Arial; font-size: 12px; padding-right: 40px; padding-left: 40px; padding-top: 10px; left: 10px; color: #000033; text-align: left; padding-bottom: 5px; top: 10px; } #footer { position:relative; width:750px; height:20px; z-index:4; left: 0px; top: 249px; border-top: 2px none #CF1C0D; border-right: 2px solid #CF1C0D; border-bottom: 2px solid #CF1C0D; border-left: 2px solid #CF1C0D; padding-top: 5px; } #copyright { position:relative; float:left; top:249px; width:200px; height:25px; z-index:17; font-family: Arial; font-size: 11px; color: #FFFFFF; display:inline; } #silver { position:relative; float:right; width:200px; height:25px; z-index:7; top: 249px; font-family: Arial; font-size: 11px; color: #FFFFFF; display:inline; } ont his page : http://www.sahasraadhipura.org/News/news.html viewing it with internet explorer the text disappears and then reappears when scrolling, refreshing the page does not help. Anyone know whats going on ? Using mozilla it works fine. Sorry forgot to say this problem started whein i added some<hr> horisontal rulers The background is fixed in a wrapper div using background-attachment: fixed. When I place a fixed footer div in the wrapper using position: fixed, the background disappears. If I place the footer outside the wrapper, it appears outside and disconnected from the rest of the content. How do I fix the footer at the bottom without losing the background? Help, please! I have having trouble with CSS alignment when dealing with IE7 If i have 2 DIV tags (one inside the other) and set 10px padding for the first DIV tag and the set the left hand alignment of second DIV tag to 50% the left hand edge will be 50% plus the padding where as in FireFox and Safari it does not matter that there is padding it still aligns up to the 50% line. Can any body point me in the direction of a fix? Thanks |