PDA

View Full Version : Making a page 'conform'



SteveH
Feb 16th, 2010, 03:29 PM
Hello

I have a trial site (governed by a main.css file). You can get an idea of the desired layout here:

http://proofreading4students.com/index.asp

I am now trying to 'co-opt' a contact form onto these few pages, which I have here:

http://proofreading4students.com/contact.asp

This contact page is not governed by the CSS I have used for my other page, which is why it is not centred, has different fonts, etc.

What is the best way to 'bring it into the fold', so to speak?

Simply copying and pasting files in the <head> tags such as <link rel="stylesheet" href="my_css_file.css type="text/css" etc does not work.

Thanks for any pointers.

Steve

Excavator
Feb 16th, 2010, 05:12 PM
What is the best way to 'bring it into the fold', so to speak?

Simply copying and pasting files in the <head> tags such as <link rel="stylesheet" href="my_css_file.css type="text/css" etc does not work.

Thanks for any pointers.

Steve

Maybe you just didn't get enough of it, you'll need more than just a few lines from the head of the document to create an empty template to make a new page from. Try making a copy of work.asp and stripping everything but the menu out of #container... then put your form in that.

Looks like you could spend some time with the validators. There are plenty of errors there that need looked at.

SteveH
Feb 17th, 2010, 03:41 PM
Hello Excavator

I have done what you have suggested and the basic idea of getting the form under the tabs is there:

http://proofreading4students.com/CopyWork.asp

It has been compromised: it looks smaller and the borders have disappeared. This was the original form I had:

http://proofreading4students.com/contact.asp

Do you think I should probably avoid applying those CSS 'rules' I have in my main.css file and make this page something of an exception?

Thanks.

Steve

drhowarddrfine
Feb 17th, 2010, 04:09 PM
Without a doctype you are in quirks mode and your margin/padding/etc will follow a broken box model.

SteveH
Feb 17th, 2010, 04:26 PM
Hello DrHoward

Thanks for your post.

Is this not a doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Thanks

Steve

Excavator
Feb 17th, 2010, 05:14 PM
Good morning SteveH,
This is a good example of why NOT to use the CSS Reset. Not at least until you actually know what it's doing.
Make your CSS look like this -
* {
margin: 0;
padding: 0;
/*border: 0; */
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

You need the browser's default borders for your form to look right. You could still use border:0; there if you wanted to specify your borders in your form.

The DocType on http://proofreading4students.com/CopyWork.asp looks valid but is there any real reason you are using XHTML 1.1?

SteveH
Feb 18th, 2010, 10:36 AM
Hello Excavator

Good morning to you!

Yes, changing that border to 1 has altered things:

http://proofreading4students.com/CopyWork.asp

I can see that the page still needs plenty of work, but at least I can see what I am doing now! Yet it does look a lot smaller than it did.

No, there is know reason why I am using XHTML 1.1. Is it not necessary?

Thanks for all your help again.

Steve

Excavator
Feb 18th, 2010, 11:01 AM
Hello Excavator

Good morning to you!

Yes, changing that border to 1 has altered things:

http://proofreading4students.com/CopyWork.asp

I can see that the page still needs plenty of work, but at least I can see what I am doing now! Yet it does look a lot smaller than it did.
Hello SteveH,
this could be yet another argument as to why you should not use the CSS Reset (http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/). Forms have default margin and padding too. Your reset has zeroed them out and that's what makes it look smaller.
You should enable/disable that reset a few times just to watch how and where your layout is affected.


No, there is know reason why I am using XHTML 1.1. Is it not necessary?

You do need a DocType but I doubt you're doing anything involving XHTML 1.1. I would suggest either XHTML 1.0 Strict or HTML 4.01 Strict instead. I prefer the first.

SteveH
Feb 18th, 2010, 01:08 PM
Hello Excavator

I am now using this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(I'll read up on what I can/cannot do with that DOCTYPE).

I have removed the * from the main.css file and the form looks a whole lot better. I was a bit concerned that it would affect the other pages, but they seem unharmed.

http://proofreading4students.com/CopyWork.asp

That is what you meant, wasn't it?

Thanks