Home : Forums : Webmasters' Lounge : Source vs. Preview

Source vs. Preview

You are currently not logged in. You can view the forums, but cannot post messages.

20-Apr-07 07:56

Delete

Edit

NoAnxiety

No stars yet

Posts: 2

From: Placentia, CA USA

I'm a novice at CSS and HTML.

I'm using Evrsoft First Page 2006 (free version) to create a single web page. Evrsoft has an upper and lower window one can use to view code (upper) and preview what the page should look like (below).

I've been able to create an external CSS file and reference it from Evrsoft. The page looks just the way I want it in the lower panel. However, when opening in a brower (Firefox 2.0.0.3), the tables and text revert to a single size. Not all formatting is lost (table and text remain centered, background of text cell remains green, etc.)

Evrsoft has a "Source" button (which shows the lower panel view which look perfect) and a "Preview" button (which changes to a single panel which give a "brower-like" preview. That "Preview" option also loses most of the desired formatting.

I have no idea why the formatting effects disappear, especially since the "Source" preview panel looks absolutely perfect.

Comments (or clarification questions)?

20-Apr-07 10:44

Delete

Edit

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

Probably the way you link to the style sheet.

Need some code or a URL otherwise it's simply guesses.

Chris.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

20-Apr-07 19:52

Delete

Edit

NoAnxiety

No stars yet

Posts: 2

From: Placentia, CA USA

O.K. See below. The style sheet is in the same folder as the HTML file. I know that the CSS file is being referenced because when I change the "text-align" setting from "center" to "left", the text "Message" responds appropriately in the Source view of the program. However, in the "Preview" view (or browser), there is no difference because the boundaries of the green background hugs the edges of the text.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="landingstyle.css" />
</style>
<title>Message</title>
</head>

<body>
<br />
<div align="center">
<table class="greenblock">
<tr>
<td>Message</td>
</tr>
</table>
</div>
</body>
</html>

Style Sheet:

table.greenblock
{
layout: fixed;
height: 80;
width: 700;
font-family: arial;
font-weight: 600;
color: #ffffff;
font-size: 28;
border-width: 1px;
border-style: solid;
cellspacing: 0;
cellpadding: 0;
text-align: center;
background: rgb(51, 153, 0);
}

25-Apr-07 13:02

Delete

Edit

chrishirst

Gold

Posts: 833

From: Blackpool, Lancashire, England

I think you need to read up on some CSS tutorials first,

Why a table with one cell? just use CSS for layout.

HTML Errors
doctype is for HTML your coding is XHTML (<br />)
stray script end tag

errors in CSS

layout:fixed only exists in IE delete it

height & width 80 & 700 what? you need to add units

font-size 28 what? as above you need units

cellspacing & cellpadding don't exist delete them

you have no border colour defined just style & width.

A bit of cleaning up gets this

<!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" type="text/css" href="landingstyle.css" />
<style type="text/css">
#greenblock {
height: 80px;
width: 700px;
font-family: arial;
font-weight: 600;
color: #ffffff;
font-size: 28pt;
border-width: 1px solid blue;
text-align: center;
background-color: rgb(51, 153, 0);
margin:0 auto;
}
</style>

<title>Message</title>
</head>

<body>
<br />
<div id="greenblock">Message</div>
</body>
</html>

which looks like this
http://www.candsdesign.co.uk/articles/css/header-box/

Chris.

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/