I have the following CSS and HTML:
.TestPadding{
width:29px;
text-align:center;
height:18px;
padding:3px 0px 2px 0px;
margin:2px 1px;
font-family:Trebuchet MS;
font-weight:bold;
font-size:13px;
border:2px solid black;
float:left;}
<div class="TestPadding">1</div>
<div class="TestPadding">2</div>
<div class="TestPadding">3</div>
<div class="TestPadding">4</div>
<div class="TestPadding">5</div>
<div class="TestPadding">6</div>
<div class="TestPadding">7</div>
<div class="TestPadding">8</div>
<div class="TestPadding">9</div>
<div class="TestPadding">10</div>
The problem is that the rendering is different in IE and Chrome. Here's what it looks like:
Chrome is on top and IE on the bottom. On IE, the numbers don't look vertically aligned. I tried making all sorts of combinations on the CSS but none have given me a consistent vertical alignment and sizing.
If you want to try it out, there's a **fiddle here.**
Thanks.
Try using line-height:18px; and no vertical padding (padding:0 2px;).
You could always use a little IE hack:
_padding-top:4px (for example)
If you do choose to go down the IE hack root, here's how to apply to the different versions of IE:
padding-top:4px\9; - IE8 and below
*padding-top:4px; - IE7 and below
_padding-top:4px; - IE6
Al
Do not use padding but use line-height (preferable use the unit em) on the divs.
By the way, I suggest that you even don't use divs but a list (ul width lis).
They are correctly middle-aligned in IE. Try adding a q in one of the boxes, and you'll see exactly what I mean.
You can "fix" this and get Chrome's look by adding: line-height: 18px;.
It's because Chrome and IE have different values for default line-height.
Set the line-height to 19px and it should vertically align in both browsers
Related
I have a navigation with a padding-top: 148px; in Firefox, Chrome, Safari, IE 9 & 8 its looks perfect, but in IE 7 its gives it too much, you can see an example of this at http://willruppelglass.com/index.php why is it doing this and how do I fix it?
Here is the CSS
.headerNav{
color:#000;
margin:0 auto;
width: 1280px;
padding-top: 148px;
}
Any help would appreciated, thanks in advanced.
Try to use below structure and adjust the padding of the <div class="headerNav"></div> because the upper elements have float:left property and you are using padding-top:148px; in IE7 the padding is applying inside the headerNav itself in comparison of other browsers.
In other browsers the padding is applying from the top of view port.
<div class="headerText"></div>
<div style="clear:both"></div> <!--this will clear the floating property for below elements and make the space and adjust all the elements below this div -->
<div class="headerNav"></div>
In below image (IE7) you can see the padding-top:148; is applying with in the div not from the top of the body.
See the padding-top:148px applying from the top of the body/viewport. in below image (Firefox)
filter: progid:DXImageTransform.Microsoft.Shadow(color='#b0b0b0', Direction=135, Strength=3);
That is the line I have in my CSS and it gives the shadow so it is good. The problem comes when i want the same thing on the left side too. If i just add the same line again and change the line, the second line gets executed only so now there is shadow on left side but not right. How can i put it on both sides?
Note: This is only for IE, I already have it working on Chrome and Mozilla.
Try to do this:
<div style="width:240px; height:160px; padding:10px; filter:progid:DXImageTransform.Microsoft.Shadow(color='Red', Direction=135, Strength=4);">
<div style="width:240px; height:160px; padding:10px; font:bold 13pt verdana; filter:progid:DXImageTransform.Microsoft.Shadow(color='Red', Direction=45, Strength=4); border:1px solid #000">
This is the DIV content.
</div>
</div>
Unfortunately you cannot put it on both sides, i had tried this earlier. Have a look at the options for the direction property.
Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.
img {border-radius: 10px; border:3px solid red}
See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/
Borders are fine in Firefox.
and in IE9 border edges are fine but it has a different problem. it shows some space between border and images
How to get the result like Firefox in all other browser?
You can give extra div to your img tag like this:
body {padding:100px}
img {
vertical-align:bottom;
position:relative;
z-index:-1;
}
div{
overflow:hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px solid red;
display:inline-block;
}
http://jsfiddle.net/4PLUG/4/
/* just make sure you're including border radius for all browsers rendering engines */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}
all browsers have different CSS capabilities, and handle them differently.
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
An alternative is to use a background image on a div instead, which may get better clipping.
You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.
I've done this effect with two divs using z-index.
<div class="picture-wrapper">
<div class="mask">
</div><!-- end mask -->
<div class="picture">
<img src="" />
</div><!-- end picture -->
</div><!-- end picture-wrapper -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
Up to you.
for img tags , percent border radius work perfectly:
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
link the image in the body:
<img src="image.jpg">
add your sizing to the image:
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.
I've tried various fixes but I'm still unable to solve this rather irritating issue in IE8. I have a container Div containing two child Divs, one floated left and the other floated right. There is a background image applied to the container DIV and this renders as it should in ie6 and ie7, however in ie8 it just will not appear. I think the issue is that the top padding applied to both child elements is not being respected/applied by ie8, and since the background image has a height of only 11px, the two child elements are sitting flush up against the parent DIV and therefore the background image is not displaying.
Here's my code and CSS:
<div id="bottom">
<div class="moduletable_footermenu">
<ul class="menu"><li class="item56"><span>Class Schedule</span></li><li class="item57"><span>Testimonials</span></li><li class="item58"><span>Contact</span></li><li id="current" class="active item59"><span>Sitemap</span></li></ul> </div>
<div class="moduletable">
Copyright © -2010 sitename </div>
</div><!--end of bottom -->
CSS:
div#bottom {
clear:both;
width:1014px;
margin:0px auto;
background:url(../images/footer-shadow.gif) top no-repeat;
}
div#bottom div.moduletable {
width:400px;
float:left;
font-size:0.9em;
color:#ccc;
padding:15px 0px 15px 0px;
}
div .moduletable_footermenu{
float:right;
padding:15px 30px 15px 0px;
}
It must be something specific to IE8 and probably something quite small causing the issue here - can anyone please spot the problem ? I just can't seem to solve it no matter what I try.
Grateful for any help.
Thanks in advance.
Have you tried Firefox and Chrome/Safari? Did you use standard DOCTYPE? They should behave the same way as IE8 did.
In standard CSS, container's height will not be adjusted to the height of the floated boxes; I will expect IE8 to not showing the container (height=0px) being the fact it's a more standard-compatible browser.
If you are looking for effects in IE6/7 in a standard-compatible browser, search for 'clearfix' solutions.
So here is my CSS problem with IE 8.
I have a parent div and 2 child div. I want the parent divs width to be increased based on the width of the inner -child div's. It works well in Firefox, but in IE8, the first child div's width going to the entire page width when I have a float:right for the inner element of that div.
My HTML markup
<div class="divPageContainer">
<div id="pnlOrderOptions" class="pnlOrderOptions">
<div class="divOrderOptions">
some content
</div>
</div>
<div class="divOrderDetails" id="pnlOrderDetails">
<div style="height:20px;width:800px;border:3px solid red;padding:2px;">this width of this red box can be vary from 100 to 1000</div>
</div>
</div>
and the CSS
.divPageContainer
{ width:auto;
float:left;
margin-left:8px;
height:auto;
border:1px solid black;
}
.pnlOrderOptions
{
min-height:10px;
height:auto;
overflow:auto;
margin-top:30px;
border:1px solid orange;
width:auto;
}
.divOrderOptions
{
margin-left:7px;
font-family:Verdana;
font-size:12px;
width:400px; min-height:10px;height:auto;
border:1px solid #858A8D;
float:right; padding:5px;
background-color:#F0F6F8;
}
.divOrderDetails
{
float:left;
margin-top:4px;padding:3px;
border:2px solid blue;
min-height:10px;height:auto;
}
It works well in Firefox; here it is:
And in IE I am getting (I reduced the red bordered divs width to 400 from 800 to get a good snapshot because my monitor is a wide one )
One thing I noticed is that this problem came when I deploy this as a intranet web application. It works well in local development machine. I remember some IE7 compatibility problem used to appear when we deploy sites to intranet.
The ultimate result I am looking for is the div with content "somecontent" here should be the right most side (not to the page but based on the width of the second div, which will change dynamically) ie it should behave like my Firefox screenshot.
The float right thing is a known bug in IE and FX 2.
Can you use display:inline-block; instead? There is a way to get it to work on non-inline elements for IE.
EDIT: You'd have to set text-align:right on the parent of the inline-block.
EDIT #2: Here is an example of the fix I was talking about: http://work.arounds.org/sandbox/64/run
Please let me know if this isn't what you need or if it doesn't work for you.