How to load css file in WebBrowser?

Y

Yaroslav Ryazanov2017-01-26 16:35:00

css

Yaroslav Ryazanov, 2017-01-26 16:35:00

Good afternoon.
I use the C# language and the WPF system to build a GUI interface. And there was a task to display a " beautifully " designed text, so that the user could create it himself. For this I chose HTML + CSS.
For display, I use the WebBrowser class, but at this moment (display) our problem appears, which I will now describe, as well as supplement my guesses, which, as I do not exclude, are correct.
Let's say we have the following HTML file:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Тест подгрузки css-файла</title>
        <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <link rel="stylesheet" type="text/css" href="cs_start.css">
    </head>
    <body>
        <h1>Заголовок</h1>
        <p>А это уже абзац, который не несёт в себе смысловой нагрузки и служит для более полного наполнения скриншота, что бы понять суть проблемы.</p>
        <p>Конечно нам одного абзаца мало и поэтому мы добавляем ещё парочку.</p>
        <hr/><br>
        <h1>Второй заголовок</h1>
        <p><q>А правда, правды нет?</q> - довольно интересная фраза, но в данном контексте вообще смысла не несёт.</p>
        <p>И ещё один абзац, последний.</p>
    </body>
</html>

CSS file:

/*Все заголовки по центру*/
h1 { 
    text-align:  center;
}

p {
    text-indent: 20px;
}
/*Разрыв абзаца*/
hr {
    border: none;
    background-color: #dbdbdb;
    height: 2px;
}

/*Фон*/
body {
    height: auto;
    width: auto;
    overflow: hidden;
    background: #ffffff;
    border: 25px solid #dbdbdb;
    margin: 10px;
    padding: 10px;
    font-family: Segoe UI Historic;
    font-size: 19px;
}

On the screen of the Google Chrome browser, it looks like this:

But WebBrowser is playing a joke on us and displays a different result:

The reason is clear, it does not load the CSS file. Or it loads something wrong. To make sure of this one hundred percent, in the head tag we add the style tag with the content of the CSS file:

<head>
        <link rel="stylesheet" type="text/css" href="cs_start.css">
        
        <style type="text/css">
            h1 { 
                text-align:  center;
            }
            
            p {
                text-indent: 20px;
            }
            
            hr {
                border: none;
                background-color: #dbdbdb;
                height: 2px;
            }
            
            
            body {
                height: auto;
                width: auto;
                overflow: hidden;
                background: #ffffff;
                border: 25px solid #dbdbdb;
                margin: 10px;
                padding: 10px;
                font-family: Segoe UI Historic;
                font-size: 19px;
                
            }
        </style>
        
    </head>

And lo and behold, WebBrowser gave us what we wanted:

Here are my guesses as to the reason for this mess:
The HTML file is loaded in the following path: file:/// D:/ ... .html
, and here is the CSS file, loaded using the link tag , in a slightly different path: http:// D:/ ... .html
The CSS file is loaded via a virtual address, although it lies on an absolute path, not a relative one.
These are purely my guesses, but if they are correct, then: How to properly load a css file in WebBrowser?

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

T

tommy_13, 2017-01-26
@tommy_13

test everything on the server

A

Andrew, 2017-01-26
@AndrewHaze

Such a spelling
means that the cs_start.css file is loaded from the same folder where the file in which this code is written is located (at least this is how it works in a regular browser)