15 replies [Last post]
yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

Here's the page with the problem:
http://www.markgoodwinpianos.co.uk/

The main content has been shunted down below the navbar. It works fine in IE

Css File:
http://www.markgoodwinpianos.co.uk/2colcss.css

I'm fairly newbie but I mostly know what's going on.
Any help very much appreciated

thanks
mark

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

My 2-Column not working in FireFox 1.0

Two problems: You were on the right track with your #content div with your margin (but it has to be equal to the #nav (width+padding+border+margin) - check how much it all adds up to.

#content {
	padding: 30px 0px 0px 10px;
	margin-left: 205px;
	background-color: #FFF6E1;
	background-image: url(img/other/horizontalorange.jpg);
	background-repeat: repeat-x;
	line-height: 120%;
	font-size: 13px;
	}
The other problem would have been hard to find without a validator. For an excellent thread on validation, read: http://csscreator.com/css-forum/ftopic6366.html

The #content div lacks a closing </div>. I ran your code through TidyUI (which has a link in the thread mentioned in one of my posts) and when I pasted the tidied code back in with the CSS from above, the page ended up looking like I think you wanted (see miniature attached)

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

Thanks very much for that help. I'm very grateful.

Hwoever.... I'm still not having much luck. I've just spent the last 20 minutes validating my code and changing the css file as you suggest. In terms of validation the only bits that it still complains about are my lack of ALT tags and it doesn't like how I've used javascript to scramble my email address (so the spam-spiders can't get at it).

Could you look again please? Something has changed but still not quite in the right way Smile

thanks again
mark

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

My 2-Column not working in FireFox 1.0

I'm a bit perplexed here, myself. It appears that your .clear is clearing below the left floated #nav but I'm not sure why. I think I have a mental block on this one :oops: so I hope one of the other gurus can take a look.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

Thanks, I appreciate you trying Smile
Thankfully it looks fine in IE and very few of my target audience will be using firefox so i'm not [yet] desparate Smile

Any further help [from anyone] would be greatly appreciated
thanks
mark

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

I'm stunned

I ran your code through my TidyUI validator again asking it to turn out XHTML transitional code and then pasted it back into the Firefox page using the Edit HTML bookmarklet.

Works like a charm. Your DOCTYPE had the browser rendering in quirks mode which meant the clearing behavior was borked. Using the XHTML transitional DOCTYPE causes the page to render in standards mode. I know all about quirks mode problems but forget to check it time and again.

Since you are using CSS extensively, you really should bring all your code up to XHTML transitional. Once you have the validator tuned to output code the way you want it, the process of converting your code should not be difficult. I have included the XHTMLTidy.tidy configuration file I use for outputting XHTML code for you to wish if you use TidyUI - you just put it into the Tidy directory and load the configuration (from the lower fileopen menu-button).

DE

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

My 2-Column not working in FireFox 1.0

DCElliott wrote:
Works like a charm. Your DOCTYPE had the browser rendering in quirks mode which meant the clearing behavior was borked. Using the XHTML transitional DOCTYPE causes the page to render in standards mode. I know all about quirks mode problems but forget to check it time and again.
Good point. My first step toward debugging any page is to run 'tidy -asxml -m filename', noting errors and warnings. Messing with quirks mode will only give you tired head.

I go one step further than you, David. I firmly believe there is no reason to code new stuff to anything but a strict DTD. Why put obsolete tags and attributes in a new document?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

Well those last 2 posts are slightly greek to me but I shall read up on what you've both spoken about and then hopefully I'll be in a better position to improve my code

thanks a lot
mark

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

My 2-Column not working in FireFox 1.0

I agree with the point about using the strict DOCTYPE, gary, but I believe in incremental improvements for persons adapting existing stuff. For from-the-ground-up sites I certainly would encourage coding to, and frequent validation against ,the 1.0 or 1.1 XHTML Strict DOCTYPE and it is what I code to almost universally.

I gave a link to a graphical version of the HTML Tidy application. It is just a small program that you run either by pasting your code into the window or by opening a file containing your HTML. In addition to validation, Tidy will ouput nicely formatted HTML with indentation showing off nesting of your page elements which can be a real asset when reading and picturing what the code is doing.

Mark, you may want to read this very popular article on using the right DOCTYPE from alistapart.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

thanks I will Smile

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 days 2 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

My 2-Column not working in FireFox 1.0

Hi yonnermark,
You need to move the content over a little more.
Most browsers plus IE in Standards mode measure the box model by taking the given width and adding padding, margin and borders to it.
In your case you have: padding-left 10px + width 185px + padding-right 10px, so the width of nav is really 205px.
If you move content left with margin-left: 205px; your page should look correct in most browsers.
Having a doctype that puts IE in Standards mode will help it use the same method of measuring the box model.

Hope that helps

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

well I've come to the rather rash & naive conclusion that I want to be working with the following DOCTYPE:

XHTML 1.1 DTD

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

That's taken from this article (thanks DE):
http://www.alistapart.com/articles/doctype/

However, I just tried to simply paste those 2 lines to the top of html template and unsurprisingly (I knew it couldldn't be so simple) the page didn't even parse.

So how does one get to the stage where the above doctype can be used? and is it even as simple as that? Are there any problems viewing sites built with that doctype in an older browser for example?

thanks
mark

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

My 2-Column not working in FireFox 1.0

XHTML1.1 may be overkill:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> will ease you in to XHTML without knocking off all the deprecated codes.

Did you d/l the validator?

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

thanks I'll try that one.
Yes I downloaded the validator but I don't know what to do with it Smile
I'm using dreamweaver which has an html & xhtml validator. Is that likely to be any good?

thanks
mark

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

My 2-Column not working in FireFox 1.0

Did you follow my directions regarding putting the Tidy XHTML configuration file in the Tidy directory? Please look up some of the reference material on Tidy - it will tell you what each of the configuration items do. Then we can discuss how to use it to help your situation.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

yonnermark
Offline
newbie
Last seen: 17 years 2 weeks ago
Joined: 2004-11-22
Posts: 8
Points: 0

My 2-Column not working in FireFox 1.0

Quote:
putting the Tidy XHTML configuration file in the Tidy directory?

To be honest I haven't actually understood that instruction Sad
Is the Tidy directory the folder where tidy has been installed?

thanks
mark