I am using Google Chrome 3.0.196.2 and I noticed that for some reason the #main div's background is shrunk a tad bit, even though it should not be. It tests fine in every other browser but chrome.
Anyone know why?
Link to site: link text
Even have a screen shot: link text
Notice the green on the right side is cut off, as well as things not lining up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
#main {
border: 10px solid black;
height: 300px;
width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
background: #AAA url("http://www.ipalaces.org/weird/mainbg.gif");
}
#picture {
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
height: 100px;
width: 1000px;
}
</STYLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Imperial Palaces</TITLE>
</HEAD>
<BODY>
<DIV id="main">
<IMG id="picture" src="http://www.ipalaces.org/weird/mainbg.gif" alt="picture">
</DIV>
</BODY>
</HTML>
This seems to be working OK on Chrome 2: http://skipall.com/2vb.jpg
Remember that Chrome 3 is still in beta, it's possible this is just a bug (I'm not sure, of course).
To debug, I think I'd zero-out the paddings and borders - check for differences, then try substituting the IMG for DIV tag to check if it's the container or IMG at fault. Maybe even chuck in a couple of outline properties to see exactly what's going on:
#main {
padding: 0;
}
#picture {
border: 1px solid #EEE;
border-width: 1px 0;
}
/* and later... */
#main, #picture {
outline: 1px solid red;
}
Related
3px double border on the left or right side of a div, however in chrome it is leaving a 1px gap at the top of the border. I have tried looking extensively to see if this is a browser bug or for some kind of solution.
http://jsfiddle.net/QSm2Z/2/
If you view the code in firefox/ie you get continuous black bar, in chrome and on my phone/tablet I am getting a 1px gap at the top of each div which breaks the black bar
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
height: 100px;
width: 100px;
border-right: 3px double #c7c7c7;
border-left: 3px double #c7c7c7;
background-color: #06F;
padding: 0px;
margin: 0px;
border-bottom-style:
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
Observations
There appears to be a glitch in the corner-shaping algorithm that leaves a mitered edge in preparation of meeting a border on a perpendicular edge even though there is not one.
I doubt this is the intended behavior, even though the spec states that:
This specification does not define how borders of different styles
should be joined in the corner.
You can see evidence of the mitered join with a 2 pixel solid border (screenshot):
If you look very closely, you can see the manifestation of another potential problem: the edges of the top and side borders don't touch (screenshot):
Workaround
This is complex/inelegant by comparison, but one way to fix the problem is to hide both the top and bottom edge of the offending elements. You'll need to adjust the dimensions for your actual site.
Example: http://jsfiddle.net/QSm2Z/10/
.test{
position: relative;
height: 100px;
width: 152px;
overflow: hidden;
}
.test:after {
width: 100px;
height: 102px;
content: "";
top: -1px;
position: absolute;
background-color: #06F;
border-left: 26px double #000;
border-right: 26px double #000;
}
Looks like a browser bug - it doesn't happen with regular solid borders - check this out: http://jsfiddle.net/QSm2Z/8/
Maybe related to this bug: https://code.google.com/p/chromium/issues/detail?id=61702
I'm trying to use custom png cursor using data uri but the cursor doesn't change.
I've tested on FF 17 which support png as custom cursor.
The same data uri work as a background image.
Am I using wrong syntax or maybe data-uri can't be used as a cursor image?
example:
http://jsfiddle.net/u8t3j/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>cursor test</title>
<style>
#cursor {
width: 300px;
height: 300px;
border: 1px solid black;
cursor: url(data:image/png;base64,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);
}
#background {
width: 300px;
height: 300px;
border: 1px solid black;
margin-top: 10px;
background-image: url(data:image/png;base64,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);
}
</style>
</head>
<body>
<div id="cursor"></div>
<div id="background"></div>
</body>
</html>
The answer works for png in FF and Chrome so I'm adding an example for .cur image that doesn't work in IE
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>cursor test</title>
<style>
#cursor {
width: 300px;
height: 300px;
border: 1px solid black;
cursor: url(data:application/cur;base64,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wP////3//v7+//38+//+/fz//////4aGhvwQEBB5AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOgAcCTsBGyM8ABsiMQAWGx8RGJM4Ojn/zce4//Lq2P/r49L/6+PS/+vj0v/r49L/6uPR/+rj0f/q49L/6+HK/9/TtP+PiXv/dXNy/9XU1f/////////+///////R0dH/Ly8vyBEREQ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8ABgJOwEbIzsAGyAxABUfGxAWoERHQ//b1MT/8enX/+vj0v/r49L/6+PS/+rj0f/r49H/6uPS/+rj0f/e1Lf/5tvA//j39P/IyMr/dHRz/5KSkf/t7ez/7Ovr/1pZWeAODQ01AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwAFwo7AR0jPAAbIC8AFSEZDhSqU1RQ/+Layv/w6Nf/6uPR/+vj0f/q49H/6+PR/+rj0v/r5NX/5NzE/+DUuP/28uv////////////v7+//mJeX/1pZWv87Ozv/HhwdvAkHCA8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOQIgCzwBGiM8ABwfLgAVJRcOE7RiYlz/5+HP//Do1v/q49H/6uPR/+vj0v/q49H/6+TT/+nhz//h1rz/9O/l///////9/Pv//fz7///+/f//////19fW/21sbf8uLi7/GxsbuQoKCicAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4Ax8LPAEaIzsAGx4uAhUoFg4TumtsZf/r5NP/7+fW/+rj0f/q49H/6uPR/+rj0v/q49H/5NnA//Hr4P///////fz7//38+//9/Pv//fz7//79+////////////7Gxsf9PT0//HB0czwwNDDAAAAAAAAAAAAAAAAAAAAAAAAAAADYBHQw9ARsjOwAbHi4DFSoVDxS9dXNs/+7m1f/v59b/6+PS/+vj0v/r5NP/6uTS/+bcxv/v59j///7///79/f/9/Pv//fz7//38+//9/Pv//fz7//38+////////////+Hh4f99fn3/JSYlwwoKChoAAAAAAAAAAAAAAAAAAAAAOwEeDDsBGyM7ABodLQQWLBUQFcB9fHP/8ejW/+/m1P/q49H/6uPR/+vk0//o38r/7OXU//38+//+/v7//fz7//38+//9/Pv//fz7//38+//9/Pv//fz7//37+v/9/Pv//////+zr6v85ODj5EhITVQAAAAAAAAAAAAAAAAAAAAA+Ah0MPAAbIzsAGR0sBBUuFxIXw4KBeP/x6df/7eXU/+rj0f/q49L/6ODN/+riz//7+fb///////38+//9/Pv//fz7//38+//9/Pv//fz7//38+//9/Pv////+///////y8vL/gYCA/x8fH7kUFBMcAAAAAAAAAAAAAAAAAAAAADwBHA08ARskOwAaHCwEFjAYFBjFiId9//Hp2P/t5tT/6+PS/+ni0P/n4Mv/9/Ts///////9/Pz//fz7//38+//9/Pv//fz7//38+//9/Pv//v79//////////7/v76+/15eXv4ZGRmWDg4OGQAAAAAAAAAAAAAAAAAAAAAAAAAAOgIbDTwBGyQ7ABocLAMVMRkVGcaOjYP/8urZ/+3m1P/q49L/597J//Lu4v///////fz8//38+//9/Pv//fz7//38+//+/fz////+///////+/f3/x8fH/2lpaf4rKyu+ERERTRUVFQgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7ARsNPAEbJDsAGhwrAxUxGhcax5STif/z69r/7ebV/+XdyP/t5tb///7+//39/P/9/Pv//fz7//38+////v3////////////19fX/xsbG/2lpafUlJSXHDg4OXBoaGggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADoBHA08ARslOwAaHSwDFTQcFxvInZuQ//Tt2v/n3sb/5t7J//z7+f///f3//fz7//79/P////////////7+/f/m5+b/rq6t/11cXOoiIiK0DxAPUwwLDAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOgEcDjsBHCQ5ABoXJAMSLBwaHMeinpD/7ODH/+LXvf/59fD//////////v////////////T09P/R0dD/kpKR/0hISNoWFhefDQ0PQwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8AR0IPgEdDzkAGQMWAgoZGB0dwaObhv/m2Lf/9fHo/////////////////9/f3/+urq7/bGxr+zAwMMMPDw97ERESLwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoIChcaHB3BrqWO///87f//////6+vr/7u8vP+Dg4T/SEhI7hwcHKkMDAxZDg4OGgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABwoKGiEgH8OxrJ7/zs/O/42MjP9TU1P+LCssxhISEn0LCws7ExMTDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQEBAaJiYmyEhJSfoxMTG7FxcXfA8PD0AUFRUZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEREQwaGhpCHBwdLRMTEw4UFBQDAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//gP/+DwB//AYAP/wAAD/4AAAf+AAAB/gAAAPwAAAD8AAAAfAAAAHwAAAB8AAAAfAAAAHwAAAD8AAAA/AAAAfwAAAH8AAAA/AAAAHwAAAA8AAAAPAAAADwAAAB8AAAA/AAAA/wAAA/8AAB//AAB//+AB///gB///4D///+D///8=), pointer;
}
#background {
width: 300px;
height: 300px;
border: 1px solid black;
margin-top: 10px;
background-image: url(data:image/png;base64,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);
}
</style>
</head>
<body>
<div id="cursor"></div>
<div id="background"></div>
</body>
</html>
Thanks
Add , auto after your data url like such:
cursor: url(data:image/png;base64,...), auto;
Not sure why this fixes the problem.
Cursor data-uri's are not supported in IE. IE also doesn't support PNGs as cursors. So the best fallback I could get for this case was the following: (tested on IE, Edge, Chrome, FF, Safari
style.cssText += ";cursor:url('cursors/" + file + ".cur'), auto;"; // For IE
style.cssText += ";cursor:url('cursors/" + file + ".cur') 16 16, auto;"; // For other browsers - this will do nothing in IE
I am trying to understand the basics of CSS layouting and have some problem with a page being too high when I add a border.
Here comes my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
<div class="links_aussen">
<div class="innen">Rechts</div>
</div>
<div class="mitte_aussen">
<div class="innen">Mitte</div>
</div>
<div class="rechts_aussen">
<div class="innen">Links</div>
</div>
</body>
</html>
I use the following stylesheet:
#CHARSET "ISO-8859-1";
* {
height: 100%;
margin: 0;
padding: 0;
}
html,body {
background-color: grey;
width: 100%;
}
.innen {
border: 1px solid black;
}
.links_aussen {
float: left;
background-color: green;
width: 33%;
height: 100%;
}
.mitte_aussen {
float: left;
background-color: yellow;
height: 100%;
width: 34%;
}
.rechts_aussen {
float: left;
background-color: red;
height: 100%;
width: 33%;
}
And here is jsFiddle
My problem is that this code gives me a nice 100% layout horizontally but creates a scrollbar being to high verticcally. I would like to have no scrollbars but also see the borders (so overflow: hidden; will not help me in this one I think) - tested in Chrome and Firefox.
So: How can I tell my little browser that it should remove 2 pixels from the height so that I can have borders and no scrollbars?
Thanks in advance for any ideas and answers
André
Here is a solution for you using box-sizing: border-box. It also removes the need for the .inner div.
http://jsfiddle.net/mqchen/xHFvG/
EDIT: If anyone is wondering why this works, look down at Joakim Johansson's post. Now, back at this post. The box-sizing property simply redefines how the browser calculates the size of elements. More about it here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing
This is because the default box model is content-box, and works like this:
The heights you set changes the "Content" part. So if you have height set to 100%, and border set to 1%, that will add up to 101%.
This is solved in different ways depending on what you're trying to do.
For example you can set the box-sizing attribute: http://www.quirksmode.org/css/box.html to make the height attribute work in different ways.
Can't for the life of me figure out a good solution right now (since relying on box-sizing isn't that compatible), but here's a bad one, using absolute positioning: http://jsfiddle.net/XhfmR/
Your problem is borders:
Instead of
.innen {
border: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/
Use
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/1/
When you write just border it adds borders to all sides of div. In your case, bottom and top border takes extra 1px, you're getting result 2px taller in height. That's why you see scrollbar.
And always use jsfiddle for this kind of questions.
.innen {
border: 1px solid black;
}
is your problem. It creates the vertical scrollbar.
To solve this, use this code:
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/yrLtz/
Edit: Maybe the best solution is box-sizing: border-box as #mqchen suggested.
<!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=utf-8" />
<title>Test</title>
<link href="tester.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="tray">
<div class="tray_header">THIS IS A HEADER</div>
<div class="container">
<div class="red_line"></div>
<div class="text_1">THIS IS THE FIRST LINE OF TEXT</div>
<div class="text_1">THIS IS THE SECOND LINE OF TEXT</div>
</div>
</div>
</body>
</html>
Hello! First off, this is NOT a browser-related question. When you open this in Dreamweaver the second and third lines of text are displaced downward underneath the red line by about 20px or so.
The thing is they shouldn’t be. They should be tucked right underneath the red line.
Now this is where it gets weird – if you view it in any browser it does just that – sits right underneath the red line (as desired).
Normally I would just say screw it, it’s a Dreamweaver bug or something. However, in the real document (I’ve stripped down the code and included only the bare necessities so it can be viewed without all the other items getting in the way) there are more lines of text with red line separators in between them and so they just keep adding more and more vertical space to the layout and making it very difficult to see other items on the page.
I’ve gone through and added zero padding and margins on all rules thinking that perhaps there might be some issue with that but to no avail.
The interesting thing is if you remove the red div line, the text beneath pops up where it should be (as expected).
Any ideas?
Below is the CSS for the document:
body {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0;
background-color: #900;
font-family: Arial, Helvetica, sans-serif;
}
.tray {
width: 290px;
margin: 120px auto 0;
padding: 0;
position: relative;
}
.tray_header {
width: 290px;
height: 28px;
margin: 0;
padding: 0;
position: relative;
color: #FFFFFF;
font-size: 20px;
text-shadow: 0px 2px 2px #000;
text-align: center;
}
.container {
width: 290px;
margin: 0;
padding: 0;
position: relative;
}
.red_line {
width: 252px;
height: 2px;
background-color: #CB0000;
margin: 6px 18px;
padding: 0;
position: relative;
}
.text_1 {
width: 252px;
margin: 0 0 0 18px;
padding: 0;
position: relative;
color: #FFFFFF;
font-size: 15px;
}
Dreamweaver's Design View (and Live View for that matter) contain weird CSS rendering bugs and should never be taken as "true" views. What looks perfectly fine in the browser may look "off" in Design View due to the constrained workspace, presence of hidden element icons, or just plain weirdness. Altering your code to make it work in Design View is not a good use of time and may break things.
In short, always test with browsers. If it looks good there, you are all set.
I need a div with a height of exactly 1em minus 1px. This can be achieved in most browsers like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.helper {
/* background-color: black; */
position: absolute;
top: 5em;
left: 5em;
width: 2em;
height: 1em;
}
.target {
background-color: #89f;
position: absolute;
top: 0;
bottom: 1px;
width: 100%;
}
</style>
</head>
<body>
<div class="helper">
<div class="target"></div>
</div>
</body>
</html>
The "target" div has the desired height. The problem is, that this doesn't work in IE6, because it ignores the bottom attribute, when top is set (a well known problem).
Is there a workaround for IE6 (maybe with multiple nested divs, with borders/paddings/margins/whatever), or will JavaScript be the only solution?
Please note, that I can't use Quirks Mode.
Does the target div have to be physically 1px smaller or just display 1px smaller?
The easiest way would be to add in an "ie6 only" stylesheet:
.helper {overflow:hidden;}
.target {top:auto;}
This will display target as 1em - 1px but its real height is 1em with the top 1px is hidden.
IE6 is flaky when it comes to absolute positioning support.
Another solution, instead of the code above, would be to add in an "ie6 only" stylesheet:
.target {position:static;margin:-1px 0 1px 0;}
I see you got the absolute positioned solution to work. Great!
Is it required by the client? If not then just abandon IE6 and hacks for this crappy/old browser.