I am trying to design a form that uses the CSS inline-block display value for a table-like arrangement. I know that some browsers including Firefox 2 don't know how to handle it, so I used this method to make it work in all browsers. However, sometimes when I try it in Firefox 2, the browser freezes. My CPU usage gets stuck near 100% and sometimes the memory usage rapidly increases to a huge value. Does anyone know why this is happening or how to work around it? Here is a simple example of a page that shows this problem:
<!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=UTF-8">
<title>-moz-inline-stack test</title>
<style type="text/css">
div {
display: -moz-inline-stack;
}
</style>
</head>
<body>
<div>
<input type="radio" name="test" value="yes">
<br>
<input type="radio" name="test" value="no">
</div>
</body></html>
It works fine in Firefox 3 but it freezes Firefox 2. The <br> tag is not necessary for the bug but it keeps the inputs from being on top of each other.
try this instead
div {
display: -moz-inline-box;
display: inline-block;
}
Related
I have a styling issue on our company's intranet that I can't figure out. It only happens with IE8 or lower. IE 9/10, FF, Chrome, Safari and Opera are all OK.
The issue is a border and paddings are appearing even though I've used border:none;, margin:0!important; and padding:0!important; and it's pushing the content inside over to the right and causing a horizontal scroll bar to appear.
This is where it gets confusing...
Our intranet (asp) has the "panels" that you can see in the screenshot above. There is a "Custom HTML" panel that will allow me to insert HTML into the SQL database cell for that panel, but to view a complex html, it's best to store a file.html page and pull it into the panel using an iframe. I can supply the iframe reference and the css using in my file.html... which one is the most likely culprit?
iframe reference in SQL database:
{top|Members,Forum,HTML($$Summit 2013 Information$$<iframe src="http://www.myexternalsource/WORKING_FOLDER/Summit2013/Summit2013.html" width="768" height="1926" style="border:none!important; margin:0px!important; padding:0px!important;"><p>Your browser does not support iframes.<br /><br />Click here to open in a new window</p></iframe>)}{middleLeft|}{middleRight|}{bottom|}{hidden|Announcements,Items,Tasks,Collections,WhatsOn,Activity,RSS,QuoteOfDay,Absentee}
Summit2013.html with irrelevant styles and html removed
!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" />
<style type="text/css">
#iframe-wrapper {
display: block;
width:760px;
padding:0px;
margin:0 auto;
}
...
</style>
</head>
<body style="margin:5px 0 0 7px !important;">
...
<iframe frameborder="0" ...></iframe>
Margins IIRC you can define in the inner page.
I have a problem in the following html code in Chrome 19. If i copy the text "Hello" from the input field and paste it in the same field, the vertical alignment of the text is on top, but it should be in the middle.
If i remove the font-size property from style, the effect does not appear.
Is that a browser bug, or am i doing something wrong with the style attribute ?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:100%;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
This issue is most definitely a browser bug, but there's still a way to fix it. What worked for me was adding a line-height to the input with a value equal to that of the height.
I set my heights in pixels, not percentages, and when I tried setting them in percentages it didn't seem to work. Ems did, though. Using this tactic, your code might look something like:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
</head>
<body>
<div style="width:200px;height:50px;">
<input type="text" style="width:100%;height:2em;line-height:2em;font-size:1.75em;" value="Hello world!"/>
</div>
</body>
</html>
I want to put an icon image before a text. Any HTML tag such as <img> should be avoided because any changes of HTML structure may affect our javascript code.
I write the following code and it works on screen with IE8/Firefox.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv='X-UA-Compatible' content='IE=8' />
<style type="text/css">
div.before-test:before {
content: url("sample.png");
}
</style>
</head>
<body>
<div>aaaa</div>
<div>bbbb</div>
<div class="before-test">cccc</div>
<div>dddd</div>
</body>
</html>
But, when visitors try to print the web page with IE8, the image disappears. How can I show the image even when printing with IE8, or must I add HTML tag for the image?
IE8 supports before but not in compatibility mode.
i think you should look at this guide as to what properties and stuff are supported on some browsers especially IE 6 and up.
http://www.quirksmode.org/css/contents.html
by the way, the url in url() - quotes are optional. better to have none to avoid unnecessary escaping issues
http://www.w3.org/TR/CSS2/syndata.html#value-def-uri
<style type="text/css">
div.before-test:before {
content: url(sample.png);
}
</style>
The only way i could find is from in stackoverflow. I know, it is not a good approach but , i guess there is no solution about this bug
HTML:
<div class="PrintOnly">
<img id="PrintLogo" src="sample.png"/>
</div>
CSS:
.PrintOnly { display:none; }
#media print {
.PrintOnly { display:block; }
}
<html>
<head>
<style>
#content input[type=text]
{
color: green;
}
</style>
</head>
<body>
<div id="content">
<input type="text" value="Some Text" />
</div>
</body>
</html>
Here's how it renders in FireFox (font is green):
Here's how it renders in Internet Explorer 7 (font is not green):
Update: Adding the DTD solved the issue, however when the input is set to disabled="disabled", IE7 still won't show the specified color.
You'll need to add a strict doctype for IE7 to support attribute selectors with a value.
http://msdn.microsoft.com/nl-nl/library/aa770069
Use a doctype like this, which is about as loose as you can get without breaking this functionality:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Or rather use a more recent and more strict one, if you can.
You are running your site in Quirks mode. use the following doctype or similar
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
try this for starters <style type="text/css">
Try using quotes:
input[type="text"]
Alternatively, use a class and apply that class to all of your text inputs.
Maybe not what you wanted, but at least it works ;)
<html>
<head>
<style type="text/css">
.green {
color: green;
}
</style>
</head>
<body>
<div id="content">
<input type="text" class="green" value="Some Text" />
</div>
</body>
</html>
When we set disabled attribute for is set as true, in Firefox the button still looks like it is enabled but in IE it is working fine. Is it a limitation with Firefox or JSF.
All JSF does is generating HTML/CSS/JS. Webbrowsers doesn't retrieve/understand JSF code at all. Style and look'n'feel is usually controlled using CSS. All you could do is to view the generated HTML/CSS/JS code for pointers related to the style of a disabled button. You could maybe create a plain vanilla HTML page to do some quick tests to exclude the one and other.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<input type="submit" disabled>
</body>
</html>
You can select a disabled submit button using the attribute selector [name=value] in CSS like so:
input[type=submit][disabled] {
background: pink;
}
Test it like follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>input[type=submit][disabled] { background: pink; }</style>
</head>
<body>
<input type="submit" disabled>
</body>
</html>
And apply the learnt things in JSF side.