Hi All,

I have a site up and running http://www.mdas.biz - this is designed with CSS.

It displays well in IE - but falls down in Firefox. Any suggestions on howw to cure it, please?

Cheers!


Mike

Welcome to the forum!

Have you tried to validate, I know a lot of people think it is a waste of time but your site is a great example of the benefits of validation. There are a few <br /> inside <ul> these should be between <li></li> or before the <ul>. This isn't causing a problem in IE when in quirks mode but Firefox in compliance mode is going to make an issue about it.

Also I noticed a <ul> inside a <ul> you can do this but again the second <ul> has to be between a <li></li>.

I only briefly scanned the css but I noticed there are a few fixed attributes, ie is porperly excluded from these however, their positioning is not properly set for the footer and the other elements that are set with this property.

I think if you went through a validation on the css and html and corrected the issues there, most if not all of your other issues will resolve themselves.

Give it a try and if you still have a problem post again.

I hope I was helpful,

Cheers,

Hi Faze1,

Thanks for the advice.

I totally rewrote the CSS - site now displays fine in IE, Firefox, Netscape.

Site validates OK.

Still a single minor display glitch in Firefox - the navbar shifts a few pixels down the page - too minimal to worry about.

Cheers!


Mike W

I'm glad it helped. One of the main reasons I validate, is it points out mistakes I've made as well as invalid code. I'ts a great tool.

There are ways to work out your last glitch, if you want me to help you work it out post again. Truthfully, I think I like the space between the top border and the nav more than when it's flush.

Cheers,

Hi Faze1,

I agree with your comments on navbar - unfortunately the person I designed this for does not - no accounting for taste, eh?

Cheers,

Mike W

The Client is king. Well if you like I can help make it flush for both. I don't think it will be very difficult just a slight hack.

Cheers,

Hi Faze1,

Any tips greatly received.

Cheers!

I should have been in bed an hour ago, but I should have time this weekend if no helps by then. I think it should just need a small tweak to get the two browsers to display the same so it wont take me too long.

Cheers,

Originally Posted by faze1

Welcome to the forum!

Have you tried to validate, I know a lot of people think it is a waste of time but your site is a great example of the benefits of validation. There are a few <br /> inside <ul> these should be between <li></li> or before the <ul>. This isn't causing a problem in IE when in quirks mode but Firefox in compliance mode is going to make an issue about it.

Also I noticed a <ul> inside a <ul> you can do this but again the second <ul> has to be between a <li></li>.

I only briefly scanned the css but I noticed there are a few fixed attributes, ie is porperly excluded from these however, their positioning is not properly set for the footer and the other elements that are set with this property.

I think if you went through a validation on the css and html and corrected the issues there, most if not all of your other issues will resolve themselves.

Give it a try and if you still have a problem post again.

I hope I was helpful,

Cheers,

how to try validating it? i'm sorry but i kind of new to css as well. i'm trying to research on how to solve this proplem. i read through the thread and do not know how to use validating to solve the problem. Please advise. thanks

i went to this website "http://jigsaw.w3.org/css-validator/validator" to valid my css but then they say to achieve the result needs to have validated html. not only the css have to be validated, the html needs to be validated as well? thanks

I went through the websites and found that there are two mode of rendering. the quirk and compatible mode and the standard and compliant mode.

For the quirk and compatible mode, it's use to render the pages in old browsers whereas the other mode is for newer versions of browsers.

To display content in various browsers, do i need to consider this point? if so, how am i going to do it? by document type declaration? please advise. thanks

Hello Mike,

I'm sorry I forgot about this thread. I worked out a quick fix, it seems to work fine in IE6, Firefox1 and Opera 754. Those are the only browser I currently have installed so I can't say how it will display in other browsers. Change #leftnav to;

#leftnav {
	float: left;
	width: 210px;
	margin-top: -1.1em !important;/*opera*/
	margin: 0;/*IE*/
}
head:first-child+body #leftnav {
	margin-top: -1.45em !important;/*Firefox*/
}

THis worked great for all except in IE it canceled out the left margin for #leftnavinner so I changed it to;

#leftnavinner {
	width:190px;
	margin: 0 10px 0 25px;
	padding: 0;
	border-right: 1px solid #FFFFFF;
	border-bottom: 1px solid #FFFFFF;
	border-left: 1px solid #FFFFFF;
	background: #cbd6e5;
}

Can't think of why it fixed it but it did.

If you have any questions making these changes let me know.

Cheers,


Starsunited, this is a huge question, the first thing I would recommend is adding in a doctype, however until I see the code I don't know which one you need. The wrong doctype can render even worse results than none at all. Once you have declared the correct doctype you can than begin walking through the validation process for your x/html.

If you only want to validate css you can upload your file here. This will allow you to check your stylesheet out side of your site.

As I said this is a huge topic and difficult for me to know where to begin as I'm no master. Many people doubt the merit of validating and find it to be uneccessary. I have not been able to make much of this argument from either side however, I have only seen few occasions where completly valid code was not possible. I would recommend continuing gathering information and learning more about this subject as valid compliant code can do you no harm.

If you have not done so yet, I would also recommend downloading Firefox and the web developer tools extension. This combination makes validating your code very easy.

I hope this was helpful

Cheers,

W3C the whole organization is great the validators the resources the tutorials everything an excellent place...

Im a novice web "whatevea" its basically my hobby although im starting to make sites for other people...I find validation very helpful maybe its the engineer in me....

check out http://w3c.org/ and http://www.w3schools.com/ I find them to be very useful

Hang out with ya wang out

Starsunited, this is a huge question, the first thing I would recommend is adding in a doctype, however until I see the code I don't know which one you need. The wrong doctype can render even worse results than none at all. Once you have declared the correct doctype you can than begin walking through the validation process for your x/html.

If you only want to validate css you can upload your file here. This will allow you to check your stylesheet out side of your site.

As I said this is a huge topic and difficult for me to know where to begin as I'm no master. Many people doubt the merit of validating and find it to be uneccessary. I have not been able to make much of this argument from either side however, I have only seen few occasions where completly valid code was not possible. I would recommend continuing gathering information and learning more about this subject as valid compliant code can do you no harm.

If you have not done so yet, I would also recommend downloading Firefox and the web developer tools extension. This combination makes validating your code very easy.

I hope this was helpful

Cheers,

i have downloaded firebox but i do not know how to install the extensions. can give some advice on that? When i validate the css, i do not how to solve the errors of the css as i'm pretty new on this topic. can you give mi some guidance on how to do it? i knoe you have msn. can i make an appoinment with you?

Originally Posted by starsunited

i have downloaded firebox but i do not know how to install the extensions. can give some advice on that?

In Firefox: Tools > Extensions . Click "Get more extensions" Browse around and when you see one you like, click the install button for that extension. The Web Developer extension can be found in the Developer Tools category. You'll need to exit and restart FF for an extension to function.

Originally Posted by biff

In Firefox: Tools > Extensions . Click "Get more extensions" Browse around and when you see one you like, click the install button for that extension. The Web Developer extension can be found in the Developer Tools category. You'll need to exit and restart FF for an extension to function.

do i have to do anything else?

Nope, that will do it. If you install any and decide you don't like them, they can be uninstalled as easily.

Cheers

Originally Posted by starsunited

do i have to do anything else?

That depends on the extensions you install. Most of them have options you can tweak. For instance Web Developer: Tools > Extensions, then right-click the Web Developer listing and choose Options. It also has its own context menu and since I didn't like the toolbar taking up room, I right-clicked the toolbar and removed the check next to Web Developer Toolbar.