I have an asp.net web page. It has a fieldset to it.I visit this page in safari on my iPad. In portrait mode it is correct. As in, I can see the fieldset and functionality of page is also correct. I tilt the ipad to Landscape and the fieldset disappears.
Snapshot of how the page looks in POTRAIT MODE
When in landscape mode I noticed that the fieldset is present but very light. Here is a link for landscape mode.
Snapshot after moving it into LANDSCAPE mode.
If you look closely for landscape there is a faint line on "Filters" And "Customer Info Panel". How can i correct it to get the page to have the field set in both modes?
The code where I have fieldset is:
<table style="background-color:#EFEFEF; border-collapse: collapse; border-spacing: 0;width:100%">
<tr>
<td style="vertical-align:top; width:510px;">
<fieldset style="border:solid;border-color:brown;" onclick="">
<legend style="text-align: center">FILTERS</legend>
<table cellspacing="5" style="text-align: left; table-layout:fixed;" >
<tr>
.....
EDIT: This also happens on Chrome browser on iPad.
If you need more info,please let me know. Thanks
here the solution for tag fieldset:
<meta name="viewport" content="maximum-scale=1.0, user-scalable=no"/>
if you add other property (eg width=device-width, initial-scale=1.0) into content attribute it won't work properly..
Perhaps your problem can be solved by defining a viewport:
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0">
Related
I'm having a auto adding space issue when copying text on simple table:
<table>
<tr>
<td>foo</td>
<td>bar bar2</td>
</tr>
</table>
with a combination of meta tag below:
<meta http-equiv="x-ua-compatible" content="IE=9" />
Pasting text on copied text using IE10 browser with IE10 Browser Mode and IE9 Document standard mode resulted below:
foo bar bar2
Problem appears when I tried to paste text on copied text using IE9 browser with IE9 browser mode and IE9 Document standard mode with result below:
foo
bar bar2
It is not possible for me to upgrade the PC using IE9 to IE10..
Any help would be greatly appreciated.
Can anybody identify a solution for this.
IE10 is adding a border around table columns in the print out. They don't appear on the screen or the print preview but only when it's printed on paper or print-2-pdf. Additionly, it only happens when a border is applied that is 2px or larger. See my test code below.
<!DOCTYPE html>
<html><head>
<title>Sample</title>
</head>
<body>
<table style="border-collapse:collapse;table-layout:fixed;">
<tr>
<td style="border-bottom:2px solid black;">test</td>
</tr>
</table>
</body></html>
This will render this when printed to pdf. http://i.imgur.com/ttIdlPu.png
Thanks for all the help.
Are you only in standards mode? Try switching your Document Mode in Developer Tools (F12).
I am rendering some html in a webview that is embedded in a table cell. For some reason there is a black line at the bottom of the webview. I tried setting the background color of the webview and its scrollview to white but this did not change anything. Has anyone seen this before?
Here is the HTML that is being rendered:
<html>
<head>
<style type="text/css">
a {text-decoration:none;background-color:white;}
</style>
<title></title>
</head>
<body style="margin:0;padding:0;background-color:white;">
<a href="http://body/" style=
"font-family:HelveticaNeue-Light;font-size:20.000000;color:black;-webkit-tap-highlight-color:rgba(0,0,0,0);">
Portland Blazers vs Golden State Warriors | FULL Highlights | January 26 ,
2014 | NBA 2013-14 Season</a><span style=
"font-family:HelveticaNeue;font-size:12.000000;color:rgb(102,102,102);white-space:nowrap;"><a href="https://www.youtube.com/watch?v=2TfldZ4w57E&feature=youtube_gdata_player"
style=
"font-family:HelveticaNeue;font-size:12;color:rgb(102,102,102);-webkit-tap-highlight-color:rgba(0,0,0,0);"><img height="12"
src="file:link#2x.png" width="20">www.youtube.com</a></span>
</body>
</html>
This is on iOS7.
UPDATE: I'm still not sure what is causing the black line to appear but I managed to get rid of it by changing how I setup my layout constraints. Before I was setting constraints for the spacing around the views and letting the layout system figure out the size that the view should be. I changed it to explicitly set a height constraint of the webview when the webview finishes loading its content. This seems to have fixed the issue but I still do not understand where the black line was coming from.
I had same issue and solution is given below :
Set UIWebView's opaque to NO
Set UIWebView's backgroundcolor to clear color.
Note : Both things provided above are necessary.
Other solutions while using above one
webView.scrollView.backgroundColor = UIColor.whiteColor()
OR
The meta to go in the head tag of HTML
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
As Phu Nguyen told in comments the solution is to set opaque property of webView to NO.
webView.opaque = NO;
Hi I have written a Perl cgi script that prints a calendar. It works fine in IE10, Firefox and Chrome but not in IE8 and also not in IE Tab+ pulgin of Firefox. The page is displayed partially and the rest is clipped off...
The webpage also has embedded Javascript in it.
Has anyone faced this problem before? Any solutions??
I can't put the screen shots but I can say that I have 5 columns in my table, two and half columns are displayed, the java script attached to those cells work but the rest 2 and half columns are missing.
*this may not be pretty but this reproduces the problem.
*I tried this example in jsfiddle, there i saw that the two columns were overlapping over one other.
<html>
<style>
#today
{
color:red;
}
table
{
table-layout: fixed;
text-align:center;
width: 800px;
height: 500px;
}
td
{
padding : 0px 0px;
width: 80px;
height: 80px;
text-align:center;
font-size: 20px;
}
</style>
<body bgcolor="#COCOCO">
<h1>my blah blah blah Calendar</h1>
<table>
<t><td>
<table color="black" bgcolor="white" border="1px">
<tr>
xfgvfsd
</tr>
<tr>
<td>Su</td>
<td>Mo</td>
<td>Tu</td>
<td>We</td>
<td>Th</td>
<td>Fr</td>
<td>Sa</td>
</tr>
</table>
</td>
<td colsize="5">
edsafsdg
</td></tr>
</table>
</body>
</html>
If your document does not have a doctype or has blank space before the doctype, it will render in compatibility or quirks mode. This will cause the browser to use an older rendering engine with all the weird layout bugs included.
To verify this, press F12 to open your MSIE Developer Console and check the browser rendering mode.
If IE is rendering in quirks mode, you should add a doctype like <!DOCTYPE html> immediately before the <html> tag to ensure that it isn't triggered automatically.
You should also add a meta tag to your <head> to force IE to render the page with the latest rendering engine:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This should prevent IE from using compatibility mode. There are other server-side steps you can take as well. Take a look at this MSDN blog post for all the specific details.
I have an html page which renders an html page in an iframe where my page adds a topbar to the whole content. Inorder to render the whole page seemless, I had to rely on quirksmode rendering of the page to display the following:(similar to the way google image results page(page u get on click of an image with a top frame)-
<table>
<tbody>
<tr>
<td>
<!-- Top bar content -->
</td>
</tr>
<tr>
<td>
<iframe src="http://anysite.com/"/>
</td>
</tr>
</tbody>
</table>
The problem here is that there are pages which donot render properly in quirks mode. So they do not come out properly in the iframe. How will I overcome this? Can I render just the iframe in standards mode while the whole page is rendered in quirks mode(which I cannot compromise) .
Is there an alternative solution?
Delayed answer... but if you use an object tag instead of an iframe tag, in IE it will change the rendering mode.
<html>
<head>
<title>Quirks mode + iframe test</title>
</head>
<body>
<object type="text/html" data="http://stevesspace.com/test/quirks/modern.html" style="width: 300px; height: 500px;"></object>
</body>
</html>
Unfortunately, in IE10 this doesn't work if the outer page renders in IE8 mode using
<META http-equiv=X-UA-Compatible content=IE=8>
Which I'm still searching for a solution to...
See also iframe not rendering in ie9 mode when containing page is in quirks mode
According to this article (http://css-tricks.com/ie-iframe-quirksmode/), a page in an iframe who's parent page is in quirks mode will also render in quirks mode.
According to the author there's nothing you can do except build your page sturdy enough to withstand the brokenness of quirks mode.