Rounded corner div in IE(6/7) - css

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;

Related

Firefox Div gap issue

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.

Mobile CSS Overlay Not Appearing Correctly

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.

Firefox and IE looks different in Chrome

The styling I wanted to be is in Chrome but it looks different in Firefox and IE. All my fields are float to the right except the field "name". Is it about the floating?
My Chrome:
My Firefox and IE:
There is a huge spaces besides "Status" and the header looks bigger in height too.
===CSS====
.column-name { margin: 2px; width: 40%; }
.column-priority { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-severity { float: right; margin: 2px 12px; text-align: center; width: 100px;}
.column-status { float: right; margin: 2px; width: 100px;}
===HTML====
<div class="results-header ">
<div class="column-status" value="status">Status<span class="sort jive-icon-sml"></span></div>
<div class="column-severity" value="severity">Severity<span class="sort jive-icon-sml"></span></div>
<div class="column-priority" value="priority">Priority<span class="sort jive-icon-sml jive-icon-arrow-generic-down"></span></div>
<div class="column-name" value="name" >Name</div>
</div>
I'm 99% sure it's because you need to tell which padding it has because that has higher priority in those browsers.
You might make a star rule
*{margin:0; padding:0;}
but again you need to post more code before I can tell you 100% what to do. btw if your uncertain about anything, related to browser compabtility see: http://www.quirksmode.org/css/contents.html
always use css resets {margin: 0; padding: 0; border: 0; outline: 0;}
beacuse every browser has it's own margin, padding...

strange CSS issue on IE8

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...

CSS elements being separated / breaking / wrapping

Edit: fixed. Thanks everyone for the help ;)
Hello everyone,
I'm having a few problems with the blue bar elements being separated instead of being together.
Both elements "Notícias" and the blue bar are inside a div called "content". The blue bar is inside a span, and is created with 3 divs. One for the left image, the middle one is a repeating background and finally the third one with the last image.
Here's an image to ilustrate the problem: http://i52.tinypic.com/b3vhic.png
The code is the following:
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
display: inline-block;
height: 14px;
width: 7px;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
display: inline-block;
height: 14px;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
display: inline-block;
height: 14px;
width: 7px;
}
And the html is:
<span class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</span>
What is the best way to accomplish this?
Thanks in advance ;)
It's hard to answer without being able to experiment with the actual code and graphics. But you can start with adding the following.
.barra div {
padding: 0;
margin: 0;
}
If it doesn't work it would be great if you could post a link to a demo of bar.
The problem is that they're inline-block elements per your CSS rules and you have whitespace between them in your markup. You should either float them, or position them absolutely.
HTML:
<div class="barra">
<div class="barra-azul"></div>
<div class="barra-azul-meio"></div>
<div class="barra-azul-fim"></div>
</div>
CSS:
.barra > div {
float: left;
height: 14px;
width: 7px;
}
.barra .barra-azul {
background: url(outros/barra_sidebar_e.png) no-repeat top left;
}
.barra .barra-azul-meio {
background: #56a3eb repeat-x;
width: 50%;
}
.barra .barra-azul-fim {
background: url(outros/barra_sidebar_d.png) no-repeat top right;
}
That also cuts out a bunch of duplication you had going on.

Resources