This CSS problem is killing me :-(
I cannot remove padding under a link in this page http://www.yart.com.au/stackoverflow/test2.htm
I have reduced the problem to the bare minimum so its really clear.
You can see my issue here http://www.yart.com.au/stackoverflow/blue.png alt text http://www.yart.com.au/stackoverflow/blue.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<style type="text/css">
*
{
padding:0;
margin:0;
font:15px arial;
}
div
{
display:inline;
height:18px;
line-height:18px;
background-color :blue;
}
.PageMove
{
display:inline-block;
background-image: url(http://www.yart.com.au/stackoverflow/page_move.gif);
background-repeat:no-repeat;
width:18px;
height:18px;
line-height:18px;
}
.Text
{
background-color :red;
display:inline;
height:18px;
line-height:18px;
}
</style>
</head>
<body>
<div>18 pixels high</div>
</body>
</html>
Things which are display: inline-block are treated as as characters and sit on the baseline. There is space beneath for descenders (which you find on letters such as p, j, g and q).
Set vertical-align: bottom to position the element on the bottom instead of the baseline.
why not use float?
<div style="width: give-it-a-usefull-width">
...
...
</div>
I don't know where your problem is exactly stemmed from but
inline elements cannot be specified a 'height'. So your height:18px; for the 'inlined' div will be ignored.
I ran into this issue on some email templates. IE and FF did not show the blue line but emails opened on mobile devices such as iphone and android did.
Emails opened in web email clients over chrome browsers also showed the blue line.
I solved the problem by placing the image in the middle of the cell.
align="middle"
Set the cell to align="middle" as well.
(this places the blue line behind the image and solves the problem)
On irregular shaped images (that are png, or gif) you may want to consider saving the image with a background color or converting to a jpeg on white backgrounds. Again its not the type of image that solves this, just removing a clear background and creating a solid rectangle of square block of color to hide the line solves the issue.
Good luck!
Nate Boe
Related
I've a single line of text written with Myriad Pro vertically centered to parent. In most browsers it renders fine, however in IE9&10 the text is not exactly centered, it shifted up by about 3 pixels from its correct position.
I've found out that the problem is caused by the font, the same case is rendered correctly with Arial. On the following image you can see the problem. Part of the text is selected and
it seems that the text is sticked to the top of the selection for some weird reason and the selection is vertically centered correctly.
Source:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div
{
vertical-align:middle;
height:40px;
line-height:40px;
background-color:red;
font-family:"Myriad pro",arial;
}
</style>
</head>
<body>
<div>LOREM IPSUM</div>
</body>
</html>
Can you please explain me why this happens and how to fix it?
Thanks a lot.
I finally solved the problem using Adobe Typekit. Myriad Pro written with Typekit is correctly vertically centered.
But I still wonder why this happens.
When I create say a div container with a say 100px width and place 2 div elements one floating to the left and the other to the right with a border of 2px and a width of 46px each they should be drawn on the same line side by side covering the whole width of the parent container. This happens in Firefox and Chrome but IE9 draws them on separate lines and in order to have the same effect as in the other browsers I need to specify a width of 102px in the parent element.
Why is that?
Here's the code:
<html>
<head>
<style>
div {
margin:0;
padding:0;
}
</style>
</head>
<body>
<div style="border: 5px solid;width:100px;height:100px">
<div style='border:2px solid green;width:46px;height:46px;float:left'></div>
<div style='border:2px solid
green;width:46px;height:46px;float:right'></div>
<div>
</body>
</html>
Personally, I'd much rather use display: inline-block than much around with floats.
Anyway, the most likely cause of the problem is the empty whitespace between the two <div> elements. It could be shifting the second one down. Try removing it (ie. <div...>...</div><div...>...</div>)
OK I found a solution to the problem.
What you have to do is you have to add the Doctype declaration e.g.:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
It doesn't seem to be because of the ie box model bug http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
As this behaviour would result in smaller elements...
I'm really confused...
I am using a two column layout with the navigation bar placed with float:left. The content div uses margin-left so it sits beside it.
All good, except when I use a div of width 100% inside the content div, it gets shifted down to the bottom of the navigation bar.
This only happens with IE6, every other browser is fine with it (IE7+/FF/Chrome). I wouldn't normally worry about IE6 too much, but this is a biggy because with a long nav bar it looks like the page is empty unless you scroll right down the bottom.
I'm assuming it's the request for 100% width on the inner div that causes the problem, and IE6 is incorrectly seeing that as a request for 100% of the page, not just the containing content div.
Any ideas on a workaround? Live demo at:
http://www.songtricks.com/Ie6ClearBug.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.left
{
width:300px;
float:left;
background-color:#CFF;
}
.left .navpanel
{
height:300px;
width:200px;
border:solid 1px black;
margin:10px auto;
}
.right
{
margin-left:300px;
background-color:#FFC;
}
</style>
</head>
<body>
<div class="left">
<div class="navpanel">navpanel</div>
</div>
<div class="right">
<div style="width:100%;">this should be at the top</div>
</div>
</body>
</html>
OK I found an answer. New users can't answer their own questions, so here it is.
Turns out the behavior can be normalised in IE6 by marginally reducing the width of the inner div just to 99% (or making it auto, but then you are at the discretion of the browser as to whether you get full width for the div or not, depending on what's in it).
So the lowest impact solution is to use:
<div class="right">
<div style="width:100%;_width:99%;">this should be at the top</div>
</div>
This leaves normal browsers unaffected, and puts a safe 99% in for IE6.
I'm sorry i don't understand very well your problem, i haven't IE 6..so i cant test your css...but: i can say something about your css.
First you'll need to add float: left to your .right class.
Second, if u set a margin on the same side of a float, IE doubled the margin.
I hope u understand my english..i'm sorry!!
Third: i dont remember exactly but some browser calcuate the border inside the div, other outside the div...so something if u set: div width 300px and border 1px, u can find your div total width is 301px
bye bye
I'm trying to make a page with an image meant for being loaded in an iframe. But there is 4px of space at the bottom of the body tag that I can't seem to get rid of. Heres my simplified source:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
body, a, head, img
{ margin: 0;
padding: 0;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a>
</body>
</html>
You'll notice if you shrink your window within 4 pixels of the bottom of the image, you'll get a scroll bar. Where the crap is that space coming from?
The image is placed on the base line of the text line that it's in. The space below the image is the distance between the base line and the bottom of the character cell, where there is space for hanging characters like g and j. With the default font and font size of your browser that happens to be four pixels, you will get slightly different results in other browsers.
One solution is to make the image a block element, that way it's not part of a text line, and doesn't have a space below the base line. The anchor tag is an inline element and it can't have a block element inside it, so to make the elements make sense after the style is applied you have to make the anchor tag a block element also:
a, img { display: block; }
(To make the code valid XHTML you would also need a block element outside the anchor tag, the body tag can't contain inline elements directly. Making the anchor tag a block element using style doesn't help, the structure has to be valid also before the style is applied.)
All browsers come with default styles. Although you are resetting your tags for the page, there's no such tag as image in your CSS.
I suggest using a more global reset stylesheet. I like the one from Eric Meyer. Something as simple as this can help level the playing field between browsers.
replace image with img on your style
Put your "a" and "img" tag inside a div like this
<div><a><img src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg"></a></div>
This is a follow-on to hallie's answer, here is a full working example that has been updated in a number of ways to make it actually XHTML 1.0 Transitional compliant as well as not showing the spaces. Make sure NOT to introduce whitespace after the </a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>This is the title</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<style type="text/css">
body, a, head, img
{
margin: 0px;
padding: 0px;
border: none;
border-width: 0px;
}
</style>
</head>
<body>
<div><a><img alt="Cat In Portal" src="http://www.halolz.com/wp-content/uploads/2008/09/portals.jpg" /></a></div>
</body>
</html>
All Internet browsers have a small bit of padding they add to the pages themselves. One surefire way to get rid of it is to simply nuke all margin and padding from every element.
*
{
margin: 0px;
padding: 0px;
}
Of course, this will remove margin and padding form every element on your pages, so use this with caution, overriding this default whenever you need padding and margin (every other selector has a higher priority than this global one, so it's easy to do).
(Note, this is not the double-margin bug. I'm calling this the double-vertical-padding bug for now unless someone else has a more clever/documented name for this?)
Just when I thought I'd seen all the quirky IE CSS bugs, I've produced a simple test case that continues to confuse me. The page below looks and works great in FF, Opera, et al. However, IE 6 and IE 7 seem to be confused. I will let the document I'm pasting below speak for itself.
Edit: I've put this at the following URL: http://jsbin.com/efele Open it up in IE and again in FF. Compare.
My question is: what is this bug called? (Have I missed this somewhere? Is it found on this page?) I'm familiar with the 3px jog bug and the double-(horizontal)-margin bug and lots of other float-related bugs. But... vertical padding is being duplicated? (And put in the wrong place, to boot.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>IE bork!</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#container {
border:1px solid red;
background-color:#CC99CC;
width:800px;
margin:0 auto;
padding-top:100px;
}
#sidebar {
float:left;
display:inline;
width:200px;
border:1px solid blue;
background-color:#00CCFF;
}
#content {
float:right;
display:inline;
width:510px;
border:1px solid green;
background-color:#66CC99;
}
.clear {
clear:both;
/* height:0px; <<< setting height seems to be the only thing that makes this work as expected?!? */
background-color:#CCCCCC; /* bg color here is just for debugging */
}
</style>
</head>
<body>
<div id="container">
<div id="sidebar">I am the sidebar</div>
<div id="content">I am the content</div>
<div class="clear"><!-- clear! --></div>
</div>
<p>There should be 100px of space above the two floats, but <em>no</em> space below them...</p>
</body>
</html>
P.S., I did eventually figure out how to appease IE on this. The solution (explicitly setting a height on my "clear" div) is commented out in order to show the bug. I only wish I could have the last few hours of my life back that it took me to stumble across the real issue/solution!
Thank you!
Given the solution you found, it seems to be the hasLayout IE quirk. (Explicitly setting the height on your clear div set hasLayout to true in the eyes of IE)
On a side note, in cases where specifying height won't work for some reason, I've often found that including zoom:1; anytime I need hasLayout to trigger in IE has been a lifesaver. Anytime I have these types of weird layout issues in IE, I always try that to see if it's a layout refresh issue first. (Then if that doesn't work, proceed to bang head against keyboard)