I have a div which contains another div with a background image:
<div class="icePnlGrp graMyTasksHomePanelDiv">
<div class="icePnlGrp graMyTasksHomePanelTitleDiv" id="j_id157:j_id165">
<label class="iceOutLbl graMyTasksHomePanelTitle" id="j_id157:j_id166">PLAN</label>
<!--rest of the code--!>
</div>
</div>
This looks fine on Chrome and Firefox:
But on IE it looks strange:
The CSS classes for those two divs:
.gramytaskshomepaneldiv {
background-color: whiteSmoke;
width: 156px;
height: 150px;
margin-right: 50px;
border-right: 3px #EEE9E9 ridge;
border-bottom: 3px #EEE9E9 ridge;
display: inline;
float: left;
margin-bottom: 15px;
}
.gramytaskshomepaneltitlediv {
background: url('/resources/images/external/navigation_arrow.png');
height: 40px;
margin-top: -30px;
width: 185px;
position: relative;
margin-left: -4px;
}
Can you please give a helping hand? Most of the IE 8 issues I had I've solved using position relative, but here this simply does not work...
Thanks...
Ps: If I do hover on a link on IE, on the same page, on that main div (because the rest of the code contains those links), the image AUTOMATICALLY RENDERS fine... Or if I disable any css property from IE developer tools the page is re-render and the image appears fine...which is really strange, ineded...
Related
I have an annoying problem, it works fine in chrome but in firefox there is a gap for no reason between two divs.
<div class="body-right">
<!-- VERTICAL GAP IS HERE -->
<div class="body-right-container">
<div class="body-right-pad">
</div>
</div>
Chrome: http://gyazo.com/d5464f5fe791c3958d28816dfd03803c
Firefox: http://gyazo.com/f5f25eeab19622a2696e2d2510e1ea07
Nothing in my css has any kind of margin that would be causing this gap. Any ideas?
.body-right {
float: left;
width: 767px;
background-color:#ebebeb;
border-left: #c7c7c7 1px solid;
padding-left: 1px;
min-height: inherit;
}
.body-right-container {
display:block;
background-color:#ebebeb;
position: relative;
padding: 0 0 49px 49px;
min-height: inherit;
}
.body-right-pad {
width: 300%;
background-color:#ebebeb;
position: absolute;
left: 765px;
height: 100%;
}
I see a large gray rectangle on the far right, that element could be potentially the one that's creating your "gap". I see it on the Firefox screenshot, but not in the Chrome.
You should investigate that element and see why it's appearing there in Firefox. This could possibly be due to a width:100% applied to the container holding that gray rectangle.
Thanks in advance for any advice you can offer! I've got an overlay that works well on a desktop version of my website. However, when I design the overlay for use on a mobile, it gives me problems. Here's the jfiddle:
http://jsfiddle.net/kevindp78/bs3FT/1/
Code is below. When I try this in a mobile view, the content seems to be appearing at the wrong level (maybe below the #fixedoverlay but above the #overlaymatte?) Basically, I can't interact with the content in the #overlaycontent for some reason. It's got a layer of dark background over it, and there's only a strip of white at the top of the div. Any ideas? Thanks!
My CSS:
#fixedoverlay, #overlaymatte {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.7;
filter: alpha(opacity=70);
z-index: 999;
}
#overlaycontent {
position: relative;
width: 960px;
margin: 25px auto;
max-height: 75%;
overflow: auto;
background: #fff;
padding: 20px;
/* border: 20px solid #fff; */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index: 9999;
}
#overlaymatte {
background: none;
}
My HTML
<div id="fixedoverlay">
<div id="overlaymatte"></div>
<div id="overlaycontent">
<div><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p><p>Here's my content</p></div>
</div>
</div>
Apologies, but this is the result of an HTML and javascript issue related to the mobile design software I am using (Mobify.) Essentially, I have a bit of javascript that automatically appends the overlay:
function popUpOverlay(){
$('body').append('<div id="fixedoverlay"><div id="overlaymatte"></div><a title="close" href="#" class="closeoverlay">Close</a><div id="overlaycontent"></div></div>');
$('#overlaycontent').append(loaderimg);
$('#loaderimg').show();
$(window).keydown(function(e){
if(e.keyCode == 27) {
$('#fixedoverlay').remove();
}
})
}
My problem was that I was applying Javascript twice throughout the website: once in the head of the document through a reference link, and once through Mobify's Global Selections / Script feature. Since javascript was being applied twice, I was actually seeing two instances of the overlay: one on top of the other. I fixed the javascript so that only one instance occurred, and the problem no longer happens.
I have an issue regarding a div with overflow: hidden. It is positioned relative and it's child div is positioned absolute. On hover, the parent div changes from overflow:hidden to overflow:visible. This enables the child div to display properly.
The issue: although everything else works just great, when the mouse is no longer over the parent div (thus overflow is now hidden again), bits of the child div are still shown in their place. They are not actually displayed, because if I select some text or objects near them the dissapear completely. It's as if the page needs a "refresh" of some kind.
Has anyone else come accross this? I'm kind of stuck on this...
UPDATE: I made a jsfiddle with the issue and realised it's only occuring on webkit based browsers (Chrome and Safari). I still have no idea why, though...
<div class="list-name">
<ul>
<li class="truncated">
<a href="">
Hover me to see all the magic thext I'm hidding
</a>
</li>
</ul>
</div>
It would seem that an extra overflow:hidden added to the hyperlink solves the issue. Check it out in this fiddle.
That looks like a bug in rendering, not why it works like that. Developer tools show it like mouse is still hovered above the element. Possibly there some element became to wide/high and mouse out event can't happen. But if you remove position:relative;, position:absolute; and replace top/left with margin-top/margin-left - everything works nice to me:
http://jsfiddle.net/Nt5bN/13/
CSS:
.list-name ul {
margin: 50px;
padding: 0;
list-style: none;
}
.list-name li {
display: block;
float: left;
width: 60px;
height: 29px;
overflow: hidden;
background: #eee;
}
.list-name a {
width: 300px;
display: block;
float: left;
}
.list-name li.truncated:hover {
overflow: visible;
}
.list-name li.truncated:hover a {
margin-top: -3px;
margin-left: -8px;
background: #fff;
z-index: 9999;
padding: 2px 0 2px 7px;
border-radius: 3px;
border: 1px solid #ddd;
}
Here's the code for rounded div. Everything works fine except IE(6/7), even in IE(8/9) it's pretty good, and obviously other browsers seem nice on the rounded div. Described later after the code.
html code:
<div id="tweets">
<div id="tweets_text">
<div id="tweets_text_top">
<div id="tweets_top_left">
</div><!--#tweets_text_left-->
<div id="tweets_top_right">
</div><!--#tweets_text_right-->
</div><!--#tweets_text_top-->
<div id="tweets_text_middle">
TeXt HeRe....
</div><!--#tweets_middle-->
<div id="tweets_text_bottom">
<div id="tweets_bottom_left">
</div><!--#tweets_text_left-->
<div id="tweets_bottom_right">
</div><!--#tweets_text_right-->
</div><!--#tweets_text_bottom-->
</div><!--#tweets_text-->
</div><!--#tweets-->
css code:
#tweets{
clear: both;
margin-bottom: 10px;
padding: 0px;
border: 0px;
}
#tweets_text{
width:214px;
clear: both;
margin: 0px;
padding: 0px;
border: 0px;
background: #141414;
}
#tweets_text_top, #tweets_text_bottom{
width: 214px;
height: 10px;
background: #000000;
clear: both;
}
#tweets_top_left{
height: 10px;
width: 10px;
background: url('images/top_left.jpg') no-repeat;
float: left;
clear: left;
}
#tweets_top_right{
height: 10px;
width: 10px;
background: url('images/top_right.jpg') no-repeat;
float: right;
clear: right;
}
#tweets_bottom_left{
height: 10px;
width: 10px;
background: url('images/bottom_left.jpg') no-repeat;
float: left;
clear: left;
}
#tweets_bottom_right{
height: 10px;
width: 10px;
background: url('images/bottom_right.jpg') no-repeat;
float: right;
clear: right;
}
#tweets_text_middle{
width: 200px;
padding: 7px;
background: #000000;
color: #f4f4f4;
font-size: 12px;
}
The images are here:
rounded div's images
Now it occurs only in IE(6/7). The bottom portion isn't rounded like the top portion. If you test, hope you will find what I asked for.
If any one can find the mistake I will be grateful.
If you have any problem to understand or to get the docs, let me know.
Thanks.
Here's a very popular jQuery round corner plugin.
http://jquery.malsup.com/corner/
It's supported in all browsers including IE6. It draws corners in IE using nested divs (not images). It also has native border-radius rounding in browsers that support it (Opera 10.5+, Firefox, Safari, and Chrome). So in those browsers the plugin simply sets a css property instead.
Here's How to use it
You need to include the jQuery and the Corner js script before </body>. Then write your jQuery like $('div, p').corner('10px'); and place before ''. So your html will look like the below code. Here i'm making round corners for all div and p tags. If you want to do it for specific id or class then you can do something like $('#myid').corner();
<body>
<div class="x"></div>
<p class="y"></p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<script>$('div, p').corner();</script>
</body>
Check working example at http://jsfiddle.net/VLPpk/1
This is an excellent tool for cross-browser rounding corners: http://css3pie.com/
It's specifically made to handle IE6-8 which doesn't support any css corner rounding.
Use the code in CSS to round.
border-radius:7px 7px 7px 7px;
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.