Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Doctype changes the layout of my site! Desperate help! 1

Status
Not open for further replies.
UncleMortis

UncleMortis

Programmer
Jan 28, 2003
120
AU
Just added a doctype to my site and when I uploaded, I noticed that the positioning of everything has completely changed. Paragraphs that were normally so wide are now spread out across the page, images aren't in their original spots. I've fixed the front page of the site, by taking the doctype out, But i've left the other pages with their doctype in as an example. the site is The doctype I used is:

Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
 
Sort by date Sort by votes
Sorry guys, The tech Talk link has the doctype in it, I've removed it from most of the site. The layout of the tech talk page should be the same as other pages with a paragraph width of 600 or so.
 
Upvote 0 Downvote
You need to specify a unit for width in your CSS.

Run your CSS through a validator:


________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
I can see this is going to be a long night. I was missing the px off a couple of classes in my css. It's always something small for me that seems gigantic. Thanks heaps for the pickup, I would never have noticed it. I actually noticed it when I cut the code into here to show I did have everything in it's place, lol.

While I'm on the subject, do I need a doctype for the css file as well? I haven't done much html/css work since 4.01 came in and can't seem to get css validated.
 
Upvote 0 Downvote
You don't need a doctype for your CSS file.
You don't need </style> at the end of your CSS file.
You may be missing a few semicolons.
list-style-position only takes values 'inside' or 'outside'
You need to separate background image from background color in ul#mainNav

That lot will get you started. The validator has links to the relevant definitions for anything else it flags up.

________________________________________________________________
If you want to get the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
Upvote 0 Downvote
Are semi colons necessary if there isn't anything following? Changed the background bit. Thanks heaps.
 
Upvote 0 Downvote
Ok, here's the output form the validator:
Code: 
Line : 5 (Level : 1) You have no color with your background-color : .standout 
Line : 27 (Level : 1) You have no background-color with your color : b.price 
Line : 40 (Level : 1) You have no background-color with your color : a:link 
Line : 44 (Level : 1) You have no background-color with your color : a:visited 
Line : 48 (Level : 1) You have no background-color with your color : a:hover 
Line : 59 (Level : 1) You have no color with your background-color : ul#mainNav 
Line : 65 font-family: You are encouraged to offer a generic family as a last alternative 
Line : 65 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : ul#mainNav li a:visited 
Line : 65 (Level : 2) font-family: You are encouraged to offer a generic family as a last alternative : ul#mainNav li a:visited 
Line : 78 (Level : 1) You have no background-color with your color : ul#mainNav ul.subNav li a:visited 
Line : 78 (Level : 1) You have no background-color with your color : ul#mainNav ul.subNav li a:visited 
Line : 80 (Level : 1) You have no background-color with your color : ul#mainNav ul.subnav li a:hover
I don't understand the first line 5 with the lack of colour. Is this meaning I have to declare a background color as well as the font color? what if the background color is an image? I think I've just killed the color and the image in the menu... I'm off to bed to have css nightmares. Thanks for the help.
 
Upvote 0 Downvote
It's a warning. It's not required as such.

The logic being that if you define one colour you should also define a background to ensure the element is visible.
i.e. if it were transparent and appearing on top of an element with a similar color you wouldnt be able to see it!

It's good practice to do this anyway.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
So if one of the colours was defined as transparent and it was intentional, I won't get a validated css? I guess if that's the only problem and it's meant it's not a bad thing?
 
Upvote 0 Downvote
No, it's still valid. The messages you get fall into two types:

Errors - you've done something that's not allowed, your code is invalid.

Warnings - What you've done is technically allowed, but may cause you or your visitors problems. Your code's still valid though.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Phew, that's ok then, Now I've got to work out what I've changed so it looks great again, lol. Been a while since I've used validators and such. thanks for everyone's help so far in my journey, lol.
 
Upvote 0 Downvote
So if it's showing a warning on the validator (the w3c one) does that mean I'll still get my little gif that says it's w3c compliant?
 
Upvote 0 Downvote
Ok, I've managed to validate the CSS and got the gif, (never done that before with css :), only got the warnings about background color ).

I've come across a problem however. It seems that when I mouse over some of the links in the menu, the words seem to follow the mouse over the other links so it's a huge jumbled mess. Is it just my browser being buggy? Or does anyone else see it too? Just started doing it tonight and it's got me going silly seeing as the css validates and all... is the site Thanks so far for everyone's input, it's been a great guidance.
 
Upvote 0 Downvote
Yeah, they stick out in FF don't they? I'm still getting it, the link's background will turn black and then the words will follow the cursor into the other sections of the menu. I'll restart the pc and see what happens then.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Digital Dose
  • Locked
  • Question
My website refreshes twice when it is opened on any browser. 1
Replies
3
Views
272
sartechy
sartechy
rosarij
  • Locked
  • Question
Help me fix this document.write javascript code
Replies
1
Views
275
ggriffit
ggriffit
tyutghf
  • Locked
  • Question
Vertical height of homepage ideals
Replies
5
Views
253
cadel
cadel
javierdlm001
  • Locked
  • Question
Need advise to layout webfolio
Replies
0
Views
61
javierdlm001
javierdlm001
glenmac
  • Locked
  • Question
site icon 1
Replies
4
Views
119
glenmac
glenmac

Part and Inventory Search

Sponsor

Back
Top