<div>
<ul class="ulCont">
<li>Sky</li>
<li>Sea</li>
</ul>
<img class="thinker01" src="images/thinker01.png"/>
<div class="clearBoth"></div>
</div>
CSS
.ulCont{float:left;}
.thinker01{float:right;}
.thinker01:hover{margin-top:-5px;}
.clearBoth{clear:both;}
Firefox and Chrome - works well, i.e. img is moved on mouseover, and ul stays in place.
IE8 - when mouseover img - it also moves ul up to -5px top margin.
So, could someone set an embargo on IE production ?
I just made a jsfiddle of what you gave me. I've tried what you're talking about in all three browsers. They all move up -5px on hover just like you told it to.
I didn't get any movement in IE8 for the hover. This is because hover works in IE only for "a" tags with an href.
W3Schools says you can get it work with the appropriate DOCTYPE but I'm not sure which one.
http://www.w3schools.com/cssref/sel_hover.asp
You can add the a tag around your image.
<img src="images/thinker01png_round_coaster.jpg"/>
and remove the border with
.thinker01 img {border: none;}
I realize this extra "a" may cause other problems but it might be a start to your solution.
I found this works in all browsers for me. Please, check
<div>
<ul class="ulCont">
<li>Sky</li>
<li>Sea</li>
</ul>
<div style="clear:right;"></div> // this line is added
<img class="thinker01" src="images/thinker01.png"/>
<div class="clearBoth"></div>
</div>
Related
I have done everything I could to make a decent web page validated with W3C validator etc and tried to make a responsive design and did all i could to enhance SEO onsite and off site. But all my efforts go down the drain with stupid IE ! I am using IE 8 now. How I wish internet bans IE for its various vagrancies !
My problem is I am not able to get a solution for clicking on elements laid over a div background image. Whether I use background color or not. If I use -ms-filter with opacity, the div disappears !
Somebody please give a proper solution ! I have tried posting the issue in another question. I just got one suggestion that did not work. Hence I am trying again.
My code
HTML
<div id="header">
<h1 style='float:left;margin-left:20px;color:white;font-family:verdana'>Landshoppe</h1>
<div id="smshare">
<img src="share.png" width="20" height="20" alt="Share on Social Media">
<div id="smp"></div>
</div>
<div style="clear:both"></div>
<div class="header-small-image">
<img src="images/bldg1.jpg" width="180" height='170' alt="Landshoppe"><br>
<div style="font-size:bold;text-align:center;margin:1px;width:100%">Landshoppe</div>
<div style="clear:both"></div>
</div>
<div class="opaq">
BLOGS
LOANS
SEARCH PROPERTY
FREE LISTING
</div>
<?php include('searchbox.php');?>
<div style="clear:both"></div>
</div>
CSS
#header{background:url('images/Thane2.jpg') no-repeat;background- size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o- background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg ',sizingMethod='scale') no-repeat;-ms- filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/Thane2.jpg',sizingMethod='scale') no-repeat;height:350px;border:1px solid black;margin-bottom:30px;}
#header h2{font-size:35px;color:white;text-align:center}
#searchbox{text-align:center;padding:5px;width:60%;margin:0px auto;margin- top:20px;z-index:5}
#searchbox input[type=text]{width:80%;padding:10px;font-size:25px;border- radius:1px;float:right;height:30px;margin-right:2px;border-radius:5px}
#searchbox input[type=submit]{float:right;
background: url("images/searchicon2.jpg") no-repeat;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;-ms-filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/searchicon2.jpg',sizingMethod='scale') no-repeat;
width:55px;
height:51px;
border:none;border:1px solid whitesmoke;
cursor:pointer;
padding:0px;
border-radius:0px;-webkit-border-radius:0px;-moz-border-radius:0px;-0-border-radius:0px;;
}
My site is www.landshoppe.com
Your header element has pointer-events: none; set in the css.
#header {
...
pointer-events: none; //remove this line
}
Remove pointer-events: none; from header and then click events will work within it.
Also this issue isn't IE specific. Didn't work for me in Chrome either. pointer-event: none makes that element and its child elements not clickable, and clicks to fall through to the underlying element.
#Arathi, I found a solution by putting all the events inside the div into another within this div and making its position:absolute. Now it works ! Though I have some issue in mobile responsive design. Guess I will tackle that as next level :)
Here is the scenario:
I was trying to put search div (black color) on top of nav (slate blue color) using z-index for IE7 but its not working.
Here goes the dummy Markup:
<div id="header">
<div class="container">
<div id="search"></div>
</div>
<div class="container">
<div id="nav"></div>
</div>
</div>
On CSS rule, #header is positioned as relative where #search & #nav are positioned as absolute. Any idea, how can I put the #search on top of #nav?
NOTE: for some reason, I need to put them in two different div. My CSS worked properly with IE8.
z-index on ie7 stacks the elements on the same level so you would need to apply the z-indexes to the .container divs to make it work properly
Thanks to #Pete as his answer gave me a clue to solve this! :) I'd like to share it:
For the second .container, I've set z-index: -1; & that worked for me!
I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
I'm aware of the z-index problem in IE7, but I have a strange situation here, and none of the fixes suggested online seem to work. I've got a list of items, each one has a pop-up bubble div inside the "li" tag, like so:
<div class="inner">
<ul>
<li onmouseover="bubbleOn(5661)" onmouseout="bubbleOff(5661)" id="c5661">
<img src="/images/new/simple-dot-brown.gif" class="coloredDot" />
Asthma,
<small id="year5661">1974</small>
<div class="mouseover-bubble orange" id="bubble_5661" style="display:none;">
<h6>Asthma</h6>
<div class="definition">
<p>A form of bronchial disorder....</p>
</div>
</div>
</li>
</ul>
</div>
Here is the relevant CSS:
div.mouseover-bubble {
position: absolute;
width: 360px;
left: 10px;
bottom: 10px;
z-index: 10000;
}
As long as I leave the CSS the way I received it, the pop-up works fine. But I've been asked to move the popup divs below the matching "li", instead of above it. If I change the line "bottom: 10px" to "top: 10px", then suddenly in IE7 the z-index fails and I can see the information that should be hidden underneath the pop-up div. Anyone have ideas why this would happen? Most of the IE7 z-index stuff I find talks about positioning, but I'm not changing the CSS positioning, just switching "bottom" to "top".
i got the same problem this moorning... you'll have to put the element in position:relative
Another way to do it is to set the parent's z-index to something higher...
dont ask me why... but it works
EDIT sorry.. i've just seen that you cant change the position to relative.. try the second option and let me know it that works
I am using ui tabs a lot.In my last project i add an icon just before tabs and the tab links start a strange behavior, you can not click to change the tabs if you are above tab name BUT only when you are outside tab name.
Here is the code
<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec">
<!--ICON just before TABs-->
<div style="z-index:1;position:relative;top:30px;left:5px">
<img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/>
</div>
<div id="tabs" >
<ul >
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-1"><span class="tabText" >TAB1</span></span>
</li>
<li >
<img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" />
<span id="tabContent-2"><span class="tabText" >TAB2</span></span>
</li>
</ul>
<div id="tab-1" >
contents
</div>
<div id="tab-2" >
contents
</div>
</div><!--tabs-->
I know that ui.css has position relative for tabs
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0.2em 0;
position:relative;
}
and i dont know if meshing up with my icon.
If i remove the position:relative from the icon (add.gif) everything works fine
Any help is appreciated
From the code you've posted, and if I've understood your problem correctly, the "top: 30px" in your icon div is interfering with your tabs. The icon image height is not declared but I'm assuming it's less than 30px. Therefore, given that your icon has a z-index of 1, it would appear on top of the tabs.
If the icon is intended to appear on the same line as the tabs, this may still occur as no width is declared for the icon's parent div. This means it may take up the entire row.
There are several ways to fix this, but I think you're in the best position to come up with right solution, depending on the exact effect you're going for. The culprit seems to be "top: 30px" which pushes the div down by 30px. If you remove that, you can likely also remove the "position: relative" from the same div.
Hope that helps.
It is most likely the IE hasLayout bug and the image is not forcing the height of the tab to change as expected. This can be fixed by adding zoom:1 to any position:relative elements.
Also you might want to add a padding with 4 specifications like so...
.ui-tabs .ui-tabs-nav {
list-style:none outside none;
padding:0.2em 0 0.2em 0;
position:relative;
zoom:1; }
Hope that helps!