KonquerorLocalStylesheet < Wikilearn

Tags: view all tags

See Codev.KonquerorVerticalWhitespaceProblemResolution for the latest status of this issue.

See Konqueror Vertical Whitespace Test Page for other notes and tests I've done.

Notes

Restating My Objectives

Develop a stylesheet that (if possible) modifies konqueror's treatment of vertical whitespace so it is more like that of Mozilla and IE

Install that stylesheet on my local machine(s) so that it affects any web page I view using konqueror

(Later) Install that stylesheet on the Wikilearn web site, with whatever it takes so that it affects only visitors using konqueror as their browser (if possible — an alternate could be a stylesheet that fixes konqueror without adversely (sp?) affecting Mozilla, IE, or any other browser).

Finding the Existing Stylesheet

I did (but will have to repeat) some searches for files with the extension .css, some of them appear to be in locations where they might be the "default" konqueror style sheet. (Ooh, and I just realized that since I can make some changes to the stylesheet from the (konqueror) Settings -> Configure Konqueror -> Stylesheets dialog, I might be able to search for specific content in the css files to decide which one is the appropriate one to edit.)

Tom's Posts

Tom Stoddard of the LVLUG sent me two posts with quite a bit of information in them. I pasted them here and am now condensing them.

Reference to (one of) the posts:

Re: [Lvlug] Using a Local CSS Stylesheet with konqueror
From: "Tom Stoddard" <tomshome@bellatlanticSTOPSPAM.net>
To: lvlug@thelinuxlink.net
Date: May 18, 2003 01:18:47 pm

When you link a css file to a web page you must provide a path to the css file. Usually that path is relative to the location of the html file itself. That means that if you put the css file in the same directory as the html file you can link it by using just the file name like this:
<link rel="stylesheet" href="filename.css">
Using this syntax, the browser will look for the style sheet in the same directory that the html file is in. That means that the css files you see on your machine are probably used by local html files (unless your machine is a web server). You could put a complete qualified web address in the href attribute and link your html page to any css file on any public web server.
> What I don't know is whether it's realistic to think I can solve the konqueror vertical white space problems with a stylesheet. To recap those, where IE or Mozilla show, for example, one blank line between paragraphs, konqueror shows three. (And similar excess white space between headings and paragraphs or list items.)

You should try experimenting by putting a style tag into one of your local html files and specifying some attributes for the
tag. The attributes that you should experiment with are the border, margin and padding attributes. Here's an example to try. Paste this inside the <head> tag:
<head>
� � <style type="text/css">
� � � � p {border: 0; margin: 0; padding: 0;}
� � </style>
</head>
What this should do is cause all paragraphs in your html document to be rendered without any space around them. The browser's rendering engine has the last word, of course, so it still might not do what you want it to do but it's worth a try. It works this computer which is running windows and using IE. I'll attach the files I used to test it.
Hmm, guess I need to know more precisely what the border is — is that the edge of the surrounding page (container?), or is it an imaginary rectangle surrounding the element (like the paragraph?). No doubt I'll do some Googling.
Ahh, OK, this appears to be a good link 8 Box model. In simple terms the answer is it's an imaginary rectangle surrounding the element, but I think there may be some subtleties to this -- what purpose does having all three serve? (Margin, border, padding form three enclosing rectangles around the element, with padding the innermost and margin the outermost. Maybe some are allowed to overlap the corresponding rectangles of another element and some are not? Probably time to read.)
Let me know how you make out.
In case you're wondering about margins, borders and padding. The margin is the space outside the border. It designates how much room is left between the border and any adjacent elements. The border attribute specifies how thick the border itself is. Padding is the space between the content of the element and the inside edge of the border.
You can even be more specific and set top, bottom, left or right by using the following syntax:
margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin-top: 10px;
There are some shortcuts and nuances between doing this for borders, margins and padding but you can be specific for each of them it you use the correct syntax. A shortcut for the code above would be: margin: 10px 20px 10px 20px;
Those numbers represent top, right, bottom, left. You can even put only 2 values and the browser would interpret them as top/bottom and left/right or three values and the browser will interpret them as top, left/right, bottom.
You can specify different units of measure such as em, px, mm, cm, in and % for percentages. Usually the browser will default to px for pixels if nothing is specified but it's always a good idea to specify it anyway.
My guess would be that the margins are what need to be controlled to solve your issue with paragraph spacing but it could be a combination of all three attributes.
I'm sure this is way too much information but I'm trying to make the point about the purpose of style sheets to control the precise appearance of a web page. If browsers all conformed to W3C standards, you could force a web page to be displayed identically in all browsers. The fact that the style sheets can be portable and can be applied to multiple pages is just a bonus.

Contributors

() RandyKramer - 19 May 2003
If you edit this page: add your name here; move this to the next line; and if you've used a comment marker (your initials in parenthesis), include it before your WikiName.

Attached Files

Files are attached to this page and links are included below. The attachment table is hidden to reduce page download and rendering time. To view the attachment table, click "Attach", below.

psample1.html: Sample text, IIUC without effect of stylesheet
psample.html: Sample text, IIUC with effect of stylesheet

Page Ratings

WebForm
PageStatus	Scribbles

Topic revision: r3 - 2003-05-20 - RandyKramer

Edit
Attach

Copyright � 1999-2026 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding WikiLearn? WebBottomBar">Send feedback
See TWiki's New Look