|
CSS - Ie Makes Content Disappear And Move (occasionally)
Hi,
i made a page with DIVs and floats and all that and everything is peachy. i got myself an ecommerce solution, re-designed the interior to be tableless and now have a problem with IE that i cannot seem to get rid off. live example: www. chocolateriewanders.com/shop - the 3 floated images leave the div in IE (do not wrap) [thats the smaller problem] - if you click on 'Gift Boxes', then the content is moved down quite a bit opposed to the looks in Firefox, were its all aligned correctly. i tried to apply the holly hack - but i am not very comfortable with it. right now the 'shop' site does not validate and i have no idea why either (html validation) If someone could help me out, that would be great (and yeah i want to succeed in validation too! but this shop is pretty crazy put together and i have no clue about php and whatnot it utilizes .... btw, most pages are put together with php from a database and TPL files, which i can edit) Similar TutorialsHi to all. First off, thanks for reading my question. I appreciate any help or consideration anyone can give. I am developing a website for a singer friend, using joomla and a template I purchased. I have only been building websites for 9 months now, so please forgive my ignorance. The problem is that the content, navigation etc moves left or right, almost diagonally depending on the resolution of someones screen. This is noticeable to me as well, if I zoom in and out on my page. I have no idea what is going on at all. Could someone give me some pointers? Here is the site: fernyhillscomputers.com.au/fordham/ Thanks, Chris. Bear with me please. I am brand new to html/CSS etc... I just cobbled together a page a few days ago using someone elses code as a reference, I hardly know what I did or how it works, but it works just like I want it to - Background centered and stationary (no scrolling with content), but the content does scroll, with NO horizontal scroll bar. You can view it he bit(dot)ly/rbsZsH - THIS IS WHAT I WANT MY OTHER PAGE TO DO Ok, so feeling smug, I tried to do another one like it, without the sidebar/header, etc... For the most part it works, EXCEPT - I have an unexpected horizontal scroll bar that goes about 50% across the browser and allows the user to pull the content off-center across the background. I have nearly pulled my hair out trying to fix it and put a hidden message under the content just for fun.. (make lemonade when you get lemons, right?) You can view second page he bit(dot)ly/qMbYl2 - THIS IS THE GOOFY PAGE The only real clue I have is that the first page is set to 780px wide and has this comment in the container div: /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */ My second page container div is set to 802px because I am using an image from Photoshop rather than a background color. Thank you if any of you can shed light on the situation. P.S. - I'm sure I've totally butchered the code, and you can assume when you answer that I can cut and paste but not really understand what you are saying. occasionally in Netscape my CSS code displays on the actual page, which kinda ruins things! This is now the 7th forum I have posted to, please help!! My page is W3C HTML 4.0 transitional and CSS compliant. I'm having some trouble adding css code to my div well it works but when i try to copy the div and paste it right under it, it works (pic1) but ones i add the css code (pic2) they both stack on top of each other i used a site that convert psd's to css code thats how i got the code i have 0% css knowledge so i dont even know what my problem is called or else i would Google it so if any one can help or point me in the right direction would be highly appreciated thanks in advanced of course change $ for links to work htt$://i47.tinypic.com/2nuspe9.gif : div_preview_no_css htt$://i47.tinypic.com/28cdr2b.gif : div_preview_with_css htt$://ww$.megaupload.com/?d=LDKDTSHJ : div_code htt$://ww$.megaupload.com/?d=DGTIWKNX : css_code DIV CODE: PHP Code: <div id="tabs"> <div id="albumcoverimg"> <img src="{album_cover_url}" alt="albumcover" /> </div> <div id="titletext"> <p><h2>{artist_name}-{album_name}</h2></p> </div> <div id="descriptiontext"> <p><h3>{short_description}.</h3></p> </div> <ul id="infomenu"> <li>{album_price}</li> <li>Genres:<a href="http://#"><span style="color:#298CDA;">Hip Hop/Rap,</a><a href="http://#"><span style="color:#298CDA;"> Music,</a><a href="http://#"><span style="color:#298CDA;"> Latino</span></a></li> <li>Released: {month day, year}</li> <li><span>℗</span> {year : record_label}</li> </ul> <ul id="previewmenu"> <li><a href="http://#">{track_name}</a></li> <li><a href="http://#">{track_name}</a></li> <li><a href="http://#">{track_name}</a></li> </ul> <ul id="forummenu"> <li style="width:99.75%;"><a href="{forum_article_url}">Discuss in the Community</a></li> </ul> <div> <img src="/images/tabss/toprowimg.gif" alt="toprow" /> </div> <div> <img src="/images/tabss/btmrowimg.gif" alt="btmrow" /> </div> </div> CSS CODE: PHP Code: #infomenu li a, #previewmenu li a { padding-left: 0px; padding-right: 0px; text-decoration: none; width: 100%; display: block; } #previewmenu li, #infomenu li { width: 100%; display: block; margin: 0px; } #btmrowimg, #toprowimg { visibility: visible; position: absolute; left: 6px; z-index: 1; width: 540px; height: 23px; } #descriptiontext p { font: 12px/14px Verdana; margin: 0px; text-align: left; } #previewmenu li a { color: #000000; } #descriptiontext { visibility: visible; position: absolute; left: 212px; top: 96px; z-index: 1; width: 321px; } #forummenu li a { text-decoration: none; color: #000000; height: 100%; display: block; } #albumcoverimg { visibility: visible; position: absolute; left: 14px; top: 16px; z-index: 1; width: 189px; height: 189px; } #infomenu li a { color: #858989; } #forummenu li { height: 100%; display: block; float: left; margin: 0px; } #previewmenu { font: 14px/17px Verdana; margin: 0px; padding: 0px; list-style: none; text-align: left; position: absolute; left: 256px; top: 217px; z-index: 1; width: 284px; } #titletext p { font: 22px/26px Verdana; margin: 0px; text-align: left; } #titletext { visibility: visible; position: absolute; left: 212px; top: 21px; z-index: 1; width: 329px; } #toprowimg { top: 323px; } #forummenu { font: 12px/13px Verdana; height: 13px; text-align: center; margin: 0px; padding: 0px; list-style: none; position: absolute; left: 338px; top: 321px; z-index: 2; width: 202px; } #btmrowimg { top: 373px; } #infomenu { font: 12px/14px "Lucida Sans Typewriter"; margin: 0px; padding: 0px; list-style: none; text-align: left; color: #858989; position: absolute; left: 22px; top: 219px; z-index: 2; width: 190px; } #tabs { margin: 0px auto 0px 0px; width: 547px; } I am having a problem with IE. I have an anchor nested inside a list item with display: block applied. Because it is a block-level element (now), I applied a height. In Firefox/Win, it works wonderfully. In IE6/Win, the anchor area shrinks! If I leave it out, Firefox still works, but IE has gaps showing the background color of the body! I am okay with this problem since this page is for a friend, but I would like to know if there is a way to fix this for future reference. CSS: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Choose a Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* <![CDATA[ */
body {
font-family: arial, helvetica, verdana, geneva, sans-serif;
font-size: 11.5pt;
margin: 0;
padding: 0;
color: #fff;
background-color: #000;
}
h1, h3 {
text-align: center;
}
h2, #pgdesc, #img{
text-align: center;
margin: 0;
padding: 0;
}
ul {
margin: 0 0.5% 0;
width: 25%;
float: left;
height: 100%;
padding: 0;
border: 4px solid #009;
border-top: 1px solid #009;
list-style-type: none;
list-style-position: outside;
}
li {
background-color: #039;
width: 94%;
padding: 3%;
margin: 0;
border-top: 4px solid #009;
}
li a {
background-color: #099;
height: 1%;
margin: 0;
padding: 0 0 0 4%;
display: block;
font-weight: bold;
}
a {
text-decoration: none;
}
a:link {
color: #009;
}
a:link:hover {
color: #00f;
background-color: #0ff;
}
#active {
background-color: #f0f;
}
/* ]]> */
</style>
</head>
<body>
<h1>Directions</h1>
<ul>
<li><a href="index.html" title="E.T. Phone Home">Home</a></li>
<li><a id="active">Directions</a></li>
<li><a href="gbc.html" title="View GameBoy/GameBoy Color games">GameBoy/GB Color</a></li>
<li><a href="gba.html" title="View GameBoy Advance games">GameBoy Advance</a></li>
<li><a href="nes.html" title="View Nintendo/Famicom games">NES/Famicom</a></li>
<li><a href="snes.html" title="View Super NES/Super Famicom games">SNES/Super Famicom</a></li>
<li><a href="ggear.html" title="View Game Gear games">Game Gear</a></li>
<li><a href="genesis.html" title="View Genesis MegaDrive games">Genesis/MegaDrive</a></li>
<li><a href="32x.html" title="View 32X games">32X</a></li>
<li><a href="psx.html" title="View PlayStation games">PlayStation</a></li>
</ul>
<h2>Select a page</h2>
<div id="pgdesc">Select a console/handheld and then a letter of the alphabet to see the list of games for that letter.</div>
<h3>Note: This page does not host ANY emulators. If you came here looking for an emulation site, you will not find anything.</h3>
<div id="img">
<img id="atari" src="atari2600.jpg" alt="Atari 2600">
</div>
</body>
</html>
Thank you to all who try to help! It seems the form that creates unwanted space in IE. Site in question: http://www.phaseninedesign.com/p/uber/ HTML: Code: <div id="topMenu"> <form action="#" method="post"> <div id="reviewsBut"><a href="#"><img src="images/reviewsBut.gif" alt="Reviews" /></a></div> <div id="articlesBut"><a href="#"><img src="images/articlesBut.gif" alt="Articles" /></a></div> <div id="aboutBut"><a href="#"><img src="images/aboutBut.gif" alt="About" /></a></div> <div id="contactBut"><a href="#"><img src="images/contactBut.gif" alt="Contact" /></a></div> <div id="sponsorsBut"><a href="#"><img src="images/sponsorsBut.gif" alt="Sponsors" /></a></div> <div id="loginButTop"><a href="#"><img src="images/loginButTop.gif" alt="Sponsors" /></a></div> <div id="passwordBoxTop"><input type="password" id="password" onFocus="if(this.value=='password')value=''" onBlur="if(this.value=='')value='password';" value="password" /></div> <div id="userTopBox"><input type="text" id="user" onFocus="if(this.value=='Username')value=''" onBlur="if(this.value=='')value='Username';" value="Username" /></div> </form> </div> ----------------------- CSS: Code:
#topMenu{
width: 1005px;
height: 23px;
margin-left: auto;
margin-right: auto;
background-color: #282a1d;
background-image: url(images/topMenuBG.gif);
border-right: 1px solid black;
border-left: 1px solid black;
}
I've tried moving the form outside of the dive that its in, but that makes the space even bigger. Hey everyone, I am doing some stuff to my site, and I noticed that when someone clicks a link, the text shifts sligtly to the left. I thought it would be the active border, but I am not sure. It is a small bug, but it is kind of annoying me. Here is my link code. Code: #main a:link {
color: #41619a;
padding: 0;
}
#main a:visited {
color: #41619b;
}
#main a:hover {
text-decoration: underline;
}
#main a:active {
border: 0;
}
Here is one of the pages where it happens. Any suggestions on how to fix this? Hi I was wondering why only IE7 makes relatively positioned elements disappear into the right hand column on my site. It only happens when displayed in IE7, remaining browsers are ok (FF, Opera, even IE6). Being a newbie with IE7 bugs and workarounds, I ask you for advice. This is the page look at ghost images on RH column - IE7 only bug Please note the quircky behavior when you hover on any backgrounded area within the RH column: images within "LO MAS COMPRADO" and "RECIEN LLEGADOS" appear and disappear as lights turn on and off on a Christmas tree. All the areas that trigger this bug have in common to shift its background on hover. It's really funny, you hover on any area below those two blocks and all images dissapear, hover on any area above those blocks and images reappear, hover on areas within the blocks and image will appear only on the corresponding block. Is this an IE6 peekaboo variant? I've tried to isolate the problem, adding and deleting blocks inside the column, but it is a strange combination I can't realize. It happens just within the two blocks mentioned above, as you can see here. Images first appear ok, but they dissapear every time you hover over the "buttons" (wich are really block displayed <a>'s with shifting bg img. on hover), wich is almost the same that occurs in the complete Rh column version. Any thoughts? Thank you 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"> <body> <table cellpadding=0 cellspacing=0 border=0 style="margin:0;padding:0;"> <tr style="margin:0;padding:0;"> <td style="border:1px solid black;width:120px;height:90px;text-align:center;margin:0;padding:0;"> <img src="http://www.gamertagpics.com/filesave/k/Ku/s_Kurow_Shinobi.jpg" style="margin:0;padding:0;height:100px;"> </td> </tr> </table> </body> </html> I made it as simple as could be. 1 table, with 1 row, with 1 cloumn with 1 image. EVERYTHING has a margin of 0 and padding of 0. Why is there still a space below the image? Please tell me how to remove this space. Hello, please see this link: www. claeysconsult . be / misskado In the tab "Collectie" I need the hr (the little stripes underneath the list of brands) to give some margin, but it doesn't... Also, with a bigger screen, the footer doesn't properly align at the bottom of the page. How can i fix this? Thanks in advance for your help! I'm getting a headache here. What I'm creating is a very simple web gallery. Yes, wheel being reinvented, please don't tell me I need to use something canned. When an individual image is displayed, the image needs to be centered left-to-right. However, I want to offer a button that shows the EXIF data in a side-pane, and when it appears, the image and EXIF data block need to be centered as an aggregate. The image display and the EXIF retrieval are both done with server-side scripts (the latter being pulled via AJAX so that it does not need to be extracted if it isn't requested by the user). Now, here's the deal: I have this working perfectly using a table-based layout, but all my attempts to get it done using DIVs behave badly. I either get an image div that doesn't move when I activate the EXIF div, or the EXIF div ends up UNDER the image div. It should be really simple... I'm just too stupid to figure it out. CSS always kicks my butt. 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>
Hi, if i test my website with javascript disabled i don't see any colors or styles(it automatically disables css too). i don't know if its normal or not?? i din't disable css rather i disabled javascript only. all suggestions and recommendations are most welcome. I picked up the unitpngfix.js that was released recently because it's smaller, less complicated, and fit my needs better than the Twin Helix fix. (Twin Helix released an updated Alpha version 2 days ago that supports background-repeat and background-position!) Anyway, when the unitpngfix.js is fired upon site load, most of my content disappears. The general layout remains basically intact, but everything inside does not show. The IE developer toolbar outlines the divs in the upper-left hand of the page. I was shooting back and forth a few emails with the creator of the script, and he said that it happens when the Javascript is fired. The script goes through and changes most position:static elements to position:relative. He was not sure why it was effecting my page that way, because he said that how elements display should not change based on position:relative or position:static (default). I'm working on getting a test site up shortly and will edit the post accordingly. But does this sound familiar to anyone? hi, i am setting up a webstore with php and css and all that. FF is just fine and i love it. IE is a bad bad bad boy and does weird things when hovering over a button, like it makes the background of a certain object disappear ... when you scroll down the page just a little and then hover over the same button it re-appears. please someone tell me that it is not just me going nuts here? if i cannot resolve this issue, i am kinda forced to use tables and all this stuff i do not want to use, because i invested sooooo much time into this ... uh well, here is the url: www.chocolateriewanders.com/store and please - no purchases (yet) .... the whole payment thing is a worry for itself title doesnt really explain it, but i cant really explain it well in 1 line. code I use is at bottom of the post but using the below code. If I take out the border-top declaration in #bodycontainer, it seems to lose the margin-top that is declared in the flashcontainer. when i say lose, the background-color of the bodycontainer no longer exists above the flashcontainer. it seems as the flashcontainer overlays the parent and moves up or whatever, if that makes any sense. this is in Firefox 3.0.3 code validates as transitional (and even strict if i change the doctype) i cannot figure out why either. i've used firebug to see if any CSS was overriding, but it doesnt seem to be any 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" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
#bodycontainer {
width: 960px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
background-color: #000;
border-top: 1px solid yellow; /* remove this line */
}
.flashcontainer {
width: 950px;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
border-top: 1px solid red;
}
-->
</style>
</head>
<body>
<div id="bodycontainer">
<div class="flashcontainer">
<img src="images/home_flash_area.jpg" width="950" height="240" alt="flash container" title="flash container" />
</div>
<h2>Some Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed doamet, consectetur adipisicing elit, sed do.</p>
</div>
</body>
</html>
I have a textarea in a <td>which asks for users for some description. If users enter text and don't use any space or enter, the width of the table gets bigger and bigger and damages the pages design. What can I add (to td.fixed_width css for example )to make the line break after the width of the table is reached??? There is a solution that I put a div in td and then Code: #desc {
width:"100%";
width::fixed;
overflow:scroll;}
but it is not exactly what I want |
|||||||