The Problem
I created the keyboard with 2 kinds of keyboards (alphanumeric, numeric) but when I test my script there appears to be an inheritance bug with CSS in IE 7. I used the class .backspace to segregate the two types of keys but they still inherit the background-position from .backspace
Code
Css code
key
.keyboard-table.numeric .key-element{background-position: 5px -90px}
.keyboard-table.numeric .key-element.keypressed{background-position: 5px -210px}
.keyboard-table.numeric .backspace{ background-position: -295px -90px}
.keyboard-table.numeric .backspace.keypressed{background-position: -295px -210px;}
Html Code
<div class="keyboard-column">
<span class="key-element" ascii-code="48" style="margin: 5px 0px 0px 5px; width: 300px; height: 112.5px;">
0
</span>
</div>
<div class="keyboard-column">
<span class="key-element backspace" style="margin: 5px 0px 0px 5px; width: 640px; height: 112.5px;">
← Apagar
</span>
</div>
Please, how can i fix this bug?
I don't think IE7 supports side-by-side sibling selectors. So these won't work...
.backspace.keypressed
You may want to add .keypressed to the keyboard-column instead and then use..
.keypressed .backspace
IE7 supports the multiple class selector.
I suspect the problem is that you are not using a DOCTYPE in your HTML, so browser rendering is switched to quirks mode, which is something you would like to avoid.
You should simply add this as the first line of your HTML:
<!DOCTYPE html>
This is the DOCTYPE for HTML5, but it does not really matter, it will work fine in IE7 and trigger standards mode instead of quirks mode.
Related
I have unwanted padding on the left of images (see code below). I have tried changing, deleting or substituting every line of code in the CSS .wrapper-shadow -- no luck. This error appears in Firefox, Chrome and Explorer. Interestingly, I have very similar code for tablet and mobile pages for the same site which do not have the error. I tried substituting the tablet CSS and HTML for the desktop code and the error showed up anyway. See attached image of the problem.
Also interesting: The tablet and mobile sites (which display correctly) have narrower left margins than the desktop site. See attached image of margin difference. I searched through every line of my custom bootstrap CSS to see if I could find a difference between the desktop and tablet style sheets -- again, no luck. Any help will be greatly appreciated. Thanks.
Zaffer
.wrapper_shadow{
max-width: 765px;
background-color: #9ebade;
border: thin solid #758fa9;
-webkit-box-shadow: 2px 2px 5px 2px #758fa9;
box-shadow: 2px 2px 5px 2px #758fa9;
margin-bottom: 15px;
padding-left: 0px;
}
<div class="container-fluid">
<div class="pageHeaderText">Virtual performance art made with Unity3D game creation software</div>
<div class="row">
<div class="col-sm-6">
<div class="wrapper_shadow center-block">
<img src="images/ColorCubed_765.jpg" class="img-responsive center-block" alt="ColorCubed"/>
</div>
I just found the answer myself. It's wonderful how thinking about a question enough to post it sometimes makes the answer pop up in your brain a few minutes later.
I had the line: "padding-left: 5px;" in the *{} style of my parent bootstrap.css which was cascading down and causing the error in my styles.css. (See code below). The fact that the error was appearing only in the desktop version of my site and not in the tablet or mobile, which have their own stylesheets was the clue. I guess the moral of the story is always to check your cascades. Thanks.
Zaffer
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-left: 5px;
}
I've always wondered what the 'best' way to position text inside a div is
1) Put padding on the element surrounding the text and minus the padding from the height/width of the element.
<div class="button">
Activate
</div><!-- button -->
.button
{
height: 20px; /* -10px from padding for text */
width: 90px; /* -10px from padding for text */
padding-left:10px;
padding-right:10px;
}
2) Put a span around the text, and position it as its own element.
<div class="button2">
<span class="button2-text">
Activate
</span>
</div><!-- button2 -->
.button2
{
height: 30px
width: 100px
}
.button2-text
{
padding-left:10px;
padding-top:10px;
}
I always go with 1) because its less code, but I feel 2) is more proper or something Wondering if I'm in the wrong for using method 1) in any way.
Your second option doesn't mix the height / width with the padding.
Nowadays browsers all follow the same box model (which is how you position in option 1). This is equivalent to having box-sizing: content-box.
Internet Explorer versions up to 6 and Quirks mode didn't and used the alternative one which included padding as part of the width, equivalent to box-sizing: border-box.
In order to correctly position for both models, using option 2 is the safest.
If you check http://jsfiddle.net/stb5a/ , box-sizing is set to content-box. Changing it to border-box doesn't change the positioning of the text;
So basically, option 2 would be used for compatibility with older versions of Internet Explorer (now pretty much gone) and by developers who use to code for these versions, using the same pattern as they've always done.
The best way would be to use the <button>
jsBin demo
<button class="button">Activate</button>
CSS:
.button{
border: 1px solid #888;
background:#eee;
padding:5px 30px;
border-radius:4px;
}
And you'll have free time to play with colors :)
I'd go with 1) . In 2) the <span> tag is semantically useless. Unless you have no other content inside the <div> dont compliate your markup.
KISS - Keep It Simple Stupid
Problem Description
Browser Version: IE 7 only (or compatibility mode)
Use Case: Box with rounded corners using PIE (http://css3pie.com) behavior which contains a scrollable div
Issue: Cannot scroll using the drag handle
Workarounds
You can refactor the contents of the DIV -- some structures give the issue, some do not. This is not really a viable solution, since it would only be temporary. I could fix the issue now, and some other developer might add to what I did and break it again.
Use Case
I am trying to refactor a bunch of portlets (or rounded corner boxes that have a blue header) to use a simple CSS 3 structure and use PIE behavior in IE 7 and 8. The old code used a complicate HTML structure using background images.
I have removed as much unnecessary HTML and CSS from the example code, but originally the portlet contained a table of "combo boxes". A combo box is an input box that functions like a drop down (which has a toggle button which shows a popup onclick showing auto complete suggestions). After updating the portlet HTML (and not touching the content) now in IE 7 the content is no longer scrollable when dragging the scroll handle.
Reproduction Steps
Source Code: https://gist.github.com/1926652
Live Example: http://www.codefactor.net/examples/scrollbarIssue.html
I have modified your code as below and it works under IE 9's IE 7 browser mode ( I did not have IE 7 installed so I tried using IE7 browser mode from IE 9's developer tool, I was able to recreate your bug using the same )
Basically, I removed nested spans ( I removed 3 nested spans and kept the main span )
I am not sure about the reason why its not working when you have nested spans but that was one thing that I noticed while looking at your code and removing it seems to work.
<!DOCTYPE HTML>
<html>
<head>
<style>
.box {
padding: 10px;
width: 600px;
behavior: url(PIE.htc);
border: 1px solid black;
border-radius: 10px;
background-color: white;
}
.scroller {
overflow: auto;
*overflow-x: auto;
*overflow-y: hidden;
*padding-bottom: 17px;
}
.box input {
width: 320px;
}
.combo {
white-space: nowrap;
}
</style>
</head>
<body>
<div class="box">
<div class="scroller">
<table>
<tr>
<td>
<div>
<span class="combo"><input /></span>
</div>
</td>
<td>
<div>
<span class="combo"><input /></span>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I have this as my rule for rounded:
.rounded { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
On my site I'm working on, http://urlme.cc/movies6, if you view it in Chrome, each movie div has the class "rounded", but, the div has straight edges.
In Firefox, it's rounding correctly. Please see image comparison below.
You can view source / inspect elements on the above link, but, the html looks basically like this:
<div class="movie rounded">
<img src="..." />
<div class="details">1 hr, 20 min</div>
</div>
Question: any reason why Chrome is not rounding those div.movie corners, while Firefox is? Thanks!
Taking off position:relative on .movie seemed to do it in Chrome Developer Tools.
I just encountered a IE6 bug that I don't seem to identify over the net.
Basically this is when the behavior is triggered: a block element has border, on all sides except bottom, and top/bottom padding. and inside it there's another block element.
My entire code is to big to fit in here, but I narrowed it down to this simple example:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px;">
<p>adasasasdas</p>
</div>
Following stuff
Now the thing that goes wrong is that the "Following stuff"'s position (whatever that is), will be altered weirdly. In this case a few pixels to the left.
To disable that weird behavior I can either keep the bottom border, get rid of the padding or make the contained element inline. But I kinda want them both. Before I have to give them up, I wanted to see if there is knowledge about this bug and if there is an alternative fix.
Thanks!
This is a pretty good fix to the bug:
<div style="border: 5px solid red; border-bottom: 0; padding: 5px; font-size:0">
<p style="font-size:16">adasasasdas</p> 
</div>
Following stuff
Basically, there has to be some inline text at the end of the div for IE6 to render it correctly. Since the   added an extra line to the bottom, I changed the font size to 0 in the div, then back to 16 (or whatever you'd normally use) inside the <p>. This has a very minimal effect on the height of the div (about 2 pixels in all major browsers) but it shouldn't be at all noticeable to users. Alternatively, you can try altering the line-height variable to 0% in the div, then back to 100% in the p, but that seemed to change the div's height by a few more pixels than the font-size method when I tried it.
My fix would be
<div style="border: 5px solid red; padding: 5px; padding-bottom:4px; border-bottom: 1px solid white;">
<p>adasasasdas</p>
</div>
Following stuff
but that may not be applicable for you depending on the context
This may help you
<div style="border-left: 5px solid red; border-top: 5px solid red; padding: 0px;">
<p style="margin:0px; padding:10px;">adasasasdas</p>
</div>
Following stuff
If you want padding adjust padding in <p> tag
Hey, I know this is old, but I also just spent several hours fighting with this bug (and in fact it took me this long to figure out that it was because of border-bottom + padding-bottom...which is a shame because if I knew what to search for I would've found this much sooner).
Anyway it suddenly occurred to me that this is yet another manifestation of the hasLayout issue in ie6. For my purposes, adding "zoom:1" to the offending divs suddenly and magically fixed it, which has the benefit of not fussing with font sizes and line heights and such.