I have some webapplications, written in Netbeans, using CSS.
When I run the file from Netbeans, all works fine. However, there seems to
be a difference when I acces the application from the browser !
this is a simple example :
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#border_top_and_bottom {
border-top-style: solid;
border-top-color: coral;
border-top-width: 0.5px;
border-bottom-style:solid;
border-bottom-color:coral;
border-bottom-width: 1.5px;
padding-bottom: 3px;
padding-top: 3px;
width :600px;
</style>
</head>
<body>
<div id="border_top_and_bottom">TODO write content</div>
</body>
</html>
and this is the result, when I acces the application from the web browser (IE):
as you can see, there is a border-line missing at the top.
This is one of the problems, features like a shadow on the box, or
creating tekst near a picture are not working eather.
this is very annoying for other users because I have never the same result !
(I hope my question is clear ?? )
make sure you are using the correct version of IE ... it worked fine on my IE11. the code looks fine
Related
I have an Eclipse RCP 4.5.2 (32bit) application on Windows 7 (64bit) which contains a browser control that uses SWT.MOZILLA to run on XulRunner 31.0 (the latest compatible as far as I've researched (yes I know, that link is for Linux)).
In this browser control I'd like to show a Google Map, which generally works fine, but the zoom controls and some other images are not rendered properly:
This is the HTML file I use to load the map (except for the manual focus on Iceland):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<style>
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
#map img { max-width: none; }
</style>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
</script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=<api-key>&signed_in=true&callback=initMap"></script>
</body>
</html>
[EDIT] If I use the default browser (SWT.NONE -> ie11) the page is rendered properly. I was mistaken. IE (SWT.NONE) renders wrong too.
Is there anything I could change to make Google Maps work (while using SWT.MOZILLA)?
I'm currently doing a Scheduling module for our project, and to be able to achieve this, we are going to use DHTMLX Gantt. However, I cannot store the values that is entered into the gantt chart!
Here is my code for the chart
<!DOCTYPE html>
<html>
<head>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
<script src="http://export.dhtmlx.com/gantt/api.js"></script>
<script src="codebase/dhtmlxgantt.js"></script>
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
</head>
<body>
<input value="Export to PDF" type="button" onclick='gantt.exportToPDF()'>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript">
gantt.init("gantt_here");
gantt.load("events.php");
var dp = new dataProcessor("events.php");
dp.init(gantt);
</script>
</body>
</html>
and here is the code for the events.php
include ('codebase/connector/db_sqlite3.php');
include ('codebase/connector/gantt_connector.php');
$dbtype = "MySQL";
$res=mysql_connect("localhost", "root", "");
mysql_select_db("myfirstdb");
$gantt = new JSONGanttConnector($res, $dbtype);
$gantt->mix("open", 1);
$gantt->render_links("gantt_links", "id", "source,target,type");
$gantt->render_table("gantt_tasks","id",
"start_date,duration,text,progress,sortorder,parent");
?>
What seems to be the problem?
You php code seems ok. What happens when you try saving the event, can you check the server response? It may contain an error message.
Try also enabling logging for gantt connector so you could see an actual sql requests and their results
http://docs.dhtmlx.com/connector__php__errors.html
One other thing - make sure you've enabled auto increment for id column, otherwise connector will be unable to insert new records
i have a very simple layout where i have three icons in the right side of the HTML page and have hard coded the Heading in the middle.
I am giving the size of heading in percentage :
<!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">
<title>Insert title here</title>
</head>
<body>
<img src="images/upload.png">
<img src="images/render.png" class="menuc">
<div style="width: 100%;text-align: center;position: fixed;z-index: 100;background-color: #C2C2A3;height: 100%">
<span id="cannvasfilename" style= "position:fixed;left:40%; z-index: 100; color:#3C3C41; font-weight:bold; background:transparent;font-size: 200%;">Filename:Meshworks Test</span>
</div>
</body>
</html>
its a very simple page and u can see the layout using the link Test.
But when i am opening this HTML page in the browser , the icons shrinks and the heading also comes in small size.
So my question is that is there any way to set the size so that it automatically takes the page length and width and then set the size of the heading and the icons. ???
I am already giving the text size in percentage so i thought this will do the task. but no !
NOTE : you can check the link i have given. Its just a sample so don't see the alignments. Only the size variance is a issue.
It will come properly in your browser but try and open the link in your mobile phone browser. That is the issue !
What simple change i can do in the code to solve this problem ?
Okay, I'll answer my own question and close this question.
I used HTML meta tag in the head and the issue is solved.
<meta name="viewport" content="width=device-width, initial-scale=1">
It might help someone with the same problem!
I linked my stylesheet to my base html file.
<title> <link rel="stylesheet" type="text/css" href="style.css">
and when i click go to link it goes to the right file. i can change the background color and all of the other margins. but when i insert a url the css seems to find the picture but doesnt load up to the html and if i click preview non of the images does load.
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
link your css under header tag not title tag as title tag is referring to Website Title.
<header>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</header>
and the typo mentioned in comments, and ensure your destination is correct.]
p/s (typo)
picture{
background-image:url(img/header.jpg);
}
Like this below code paste in your html
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="etbplaza.nl/css/style_basic.css"; />
</head>
<body>
<div class="picture"> your code hre </div>
</body>
</html>
CSS
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
This might be a typo:
picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg/);
picture has no class nor id selector which might causing the problem and/or may be try to use url('img/header.jpg'); within quotes. or url('../img/header.jpg') but we don't know where is the image is located.
Also try this:
Inspect Element
hover over the path and see is there the path is being loaded if yes
your image would show there
See this technique
change background-image:url(img/header.jpg/); to background-image:url(img/header.jpg); also make sure the /path/to/file is correct and if picture is a div class then it will be like .picture in your css
you have to use the css as in the form of class or id and try the code as
.picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
or as id
#picture {
width: 984px;
height: 148px;
background-image:url(img/header.jpg);
}
surly you got the preview of the Image to your HTML page.
Please check the path of css file is correct or not.
I've just installed grails rendering plugin and would like to use it for generating PDF files. I've created simple template, but it is exported without any css styles. If I simply render template from grails, then page appears with all styles in my web browser.
So, my question is - how to correctly include CSS file during PDF generation process?
My template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" href="${resource(dir:'css',file:'main.css')}" />
<link rel="stylesheet" href="${resource(dir:'css',file:'webui.css')}" />
<r:layoutResources/>
<title>Report</title>
</head>
<body>
<div id="content">
<div id="center-container">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<table>
<thead>
<tr>
<th class="trip">trip</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>
${tip}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
And I have style .odd in my webui.css, but it is not applied on the row.
Any help would be appreciated.
Edit1: I found out that styles are fetched, if I do it in the following way:
<link rel="stylesheet" href="my_appname${resource(dir:'css',file:'main.css')}" />
But I don't want to hardcode application name (this is also a base context path). Is there a better way to generate proper link to a css file?
It may be late with my answer but I wanted to share my experience here with rendering pdf in grails. I followed the below steps and failed over to the next until I get a pdf:
Used the resource plugin in the template gsp to grab a module where css was bundled.
For example:
Test.gsp
<html>
<head>
<r:require modules="bootstapApp"/>
<r:layoutResources/>
</head>
<body>
....
<r:layoutResources/>
</body>
</html>
The above worked fine but the styles were not used in the pdf after rendering. I had to fall over to step 2.
2.Started using tag as mentioned above in the problem statement.
Result: No change. I wasn't able to get the styles in the pdf.
Failed over to step 3
3.Added the styles inline in the template gsp. And then I was able to apply them to the pdf. Point to note here is that if you follow step 3 and you have css like bootstrap.css then inlining them in the template will be cumbersome. Even if we add them, do not forget to put them inside the media tag. For me the below worked perfectly fine:
<style type="text/css">
#media all {
//CSS styles goes here
}
</style>
Try setting grails.serverURL in Config.groovy to the app url (ex. grails.serverURL=http://localhost:8080/appname). The plugin resolves all relative links via this setting
I shared my answer elsewhere, but I ended up just embedding the external file contents into the gsp for pdf rendering:
https://stackoverflow.com/a/32767378/1599616