|
CSS - Abs. Pos. Inside Rel. Pos. Causes Rel. Element To Disappear (ie7 Only)
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 Similar TutorialsHello, I know that putting a block level element (such as <p> or <div>) inside an inline element (such as <a>) is against "xhtml 1.0 strict" rules, so I'm putting a <span> (inline) within an <a> (also inline). I've made my <span> "display: block;", and it works in all browsers and validates fine, but I feel like I'm cheating the system a bit? The thing is, I need to put a margin under a piece of text without using <br /> (as when a browser forces a line break, it will use that rule and make different pieces of text look odd), but all the text is within an anchor tag, so I can't use <p> or <div>. Would appreciate any thoughts on the matter, Cheers! hi my page involves having a form element inside of a div. the div is floated left. relevant (seemingly) css from my stylesheet & html code (all simplified for readability) form { margin: 0px; padding: 0px; } .mydiv { float: left; } html looks vaguely like: <div class="mydiv"><form name="blah" action="blahblah"> .... all form controls </form></div> PROBLEM!!!! in mozilla, none of the form elements display. in ie, everything displays as expected. PLEASE HELP ME BEFORE I GO INSANE AND START KILLING INNOCENT PEOPLE. thanks in advance. d I have a <ul> list in which I set the opacity for the <li> elements. Inside the <li> elements I have <a> elements. The issue is that the <a> element text is inheriting the opacity for the <li>??? Here is a link http://casadelmar.tmhdesign.com Thanks. Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim 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. I have an navigation menu that I am building as an unordered list. What I have is an image rollover that appears at the bottom of the navigation menu when the cursor hovers over one of the first level links by using a span within the link that has its display set to none, and then set to absolute positioned directly below the navigation menu on a:hover. Here is an example: Code:
<ul>
<li>
<a href="link1.html" id="link1">Link<span></span></a>
</li>
</ul>
.link a { some link height }
.link a span { display: none; }
.link a:hover span {
position: abolute;
top: (some link height * the number of links);
background-image: (some image url)
width: (image width)
height: (image height)
}
Appearance: ------ Link1 Link2 Link3 Link4 ------- ------- Rollover Image to appear here ------- The problem that I have is that since the rollover image is positioned absolutely, if the size of the list of links changes (IE with sub-links in the list) it slides under or over where I have the rollover image placed. IE ------ Link1 sublink1 sublink2 Link2 Link3 Link4 ------- will break my scheme. Is there a way to get the span within the link to show up relative to the bottom of the <ul> element, or at the bottom of an element that contains the whole shebang? If I cant get this to work, I'm going to be forced to adopt the existing tables/javascript based template for our site, and I'd hate hate hate to do that. thanks. 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'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. 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! 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, 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) 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 Can anyone explain the difference between the two? For example, what is the difference between: this: element element {} div p { } and this: element > element { } div > p { } I don't understand it and have not found an explanation in tireless searching. Thx! I want to change this: LIST-STYLE-TYPE: square; I want to show a picture in the place of that square. Can this be possible? Hi guys! I am tempted to use the list element (<ul>) for almost anything... is this good practice or should I proceed differently? For example: 1/ Horizontal menu of images that should be spaced by 10 px. I could do that this way: Code: <div id="topmenu"> <a href="dsf.php"><img... <a href="sdfs.php"><img... <a href="sdf.php"><img... <a href="sdf.php"><img... </div> and in the CSS file: Code:
#topmenu
{
margin: 10px;
}
#topmenu a
{
margin-right: 10px;
}
OR I could do it this way with <ul>s: Code: <ul id="topmenu"> <li><a href="dsf.php"><img...</li> <li><a href="sdfs.php"><img...</li> <li><a href="sdf.php"><img...</li> <li><a href="sdf.php"><img...</li> </ul> and in the CSS file: Code:
#topmenu
{
margin: 10px;
list-style: none;
}
#topmenu li
{
margin-right: 10px;
display: inline;
}
MOREOVER, for example when aligning 4 input boxes on the same line and spaced (exactly the same problem but the images replaced by inputs), should I proceed with the first or second method? MOREOVER, for example when aligning 4 text URLS on the same line and spaced (exactly the same problem but the images replaced by text URLs), should I proceed with the first or second method? It would be so nice to ALWAYS use the <ul> element with CSS but is this poor practice? Thank you i have strange problem with IE 8 where an element is incorrectly placed when i open an Iframe, but if the iFrame is closed and reopened the element in question is correctly placed. I don' know if this is a code problem or if it's an IE 8 issue?? i see i cannot post a url. any help without seeing the problem? Here is the code snippet from the iframe: Code: <div style="margin: 0px;" id="votes"> <ul style="margin: 0px;" id="xvotes-0" class="star-rating-noh"> <li id="xvote-0" style="width: 81.25px;" class="current-rating"></> <span id="mnmc-0"> <li class="one-star-noh"></li> <li class="two-stars-noh"></li> <li class="three-stars-noh"></li> <li class="four-stars-noh"></li> <li class="five-stars-noh"></li> </li> </ul> </div> I've been adding local styles to try and zero any potential problems. i can post all css styles if noone has any ideas. Any help would be much appreciated. Thanks. I am defeated! I am trying to make this website and the design relies on it having a panel that float off to the left for navigation. It works great in Firefox and Safari, but not in IE. The strange thing is that the panels is gone not just out of place. I happens when I set the position to absolute no matter what else I change. Without absolute positioning there is not way to get it into the spot I need with out affecting other elements. Here is the URL if someone to take a look for me. http://www.godsplaceforyou.org/sperbeck/ This is hopefully a very easy question... I have a table which has 4 <td> elements to adhere to. My problem is that I want to put some text into the 3rd <td> which is wider than I want the <td> to be allowed. I know that there isn't any text it will overlap in the 2nd. Is there a command that will overextend the width to the left and fill there? Currently as is the text goes upward. Here is an image of my problem, any suggestions? *** Solved, All i needed was a |
|||||||