Debugging CSS IE and FireFox

Topic

New Reply

I wrote a couple of very, very simple web pages. I started with the css tutorial at http://www.how-to-build-websites.com, and then found w3schools. My pages work perfectly in IE (coz that’s what I tested on, I spose). But in Firefox, only the first two links (out of about five) in the navigation bar are functional. They highlight properly when you hover, go when you click, all that good stuff. The others act like plain old text, although they look like the links that do work (until you hover over them).

When I plug the css into w3schools’ css validation page, I get 0 errors, 0 warnings.

Any suggestions how I can start to fault find this error?

tia,
Marty

Reply | Quote

Replies

Hi Marty

Any chance I can have a look? You can attach css files to posts now otherwise in a text file.

The normal problem people have with links in CSS is that they have them in the wrong order within the pseudo class remember to use LoVeHAte or

Link
o
Visited
e
Hover
Active
t
e

Any how , still send it through and I will do what i can to assist you

Reply | Quote

Try validating the HTML as well as the CSS. Sometimes it’s only a tiny mistake… IE is more forgiving than Fx in this regard.

Reply | Quote

Replying to myself rather than to Jezza and Jeff.

I validated the html. It’s 4.01 transitional. Validates as strict too, if you change the doctype.
The css seems to conform to LoVeHAte.

Attached index.html and myCSS.css for brighter eyes than mine.
Also to be seen at http://www.greatcircle.net.au[/url%5D; viewing pleasure currently depends on browser.

thanks for your thoughts so far

Reply | Quote

Hi Marty

It is because you had #CenterDoc has position: absolute;

Get rid of this line and replace with what I have below

#centerDoc {
	z-index: 15;
	padding: 0 0 20px 235px; /*top right bottom left*/
	margin-top: 50px;		
}

The absolute position actually created alayer which masked the menu hence why it would not change. The giveawau was the third option FAQ flickered slightly and then reverted to normal text. It should work now….but I am in between things at the moment so have not fully tested

Reply | Quote

Hi Marty

Just had a play, I have played around with your code and adjusted the box model. As you were using a 2 column box I thought it easier to just nest centerdoc and navigation and just create a margin on the centerdoc text, It gets rid of floats and absolute positioning making the box more flexible.

Using the nesting method then allowed me to create a header div which is independent of the other divs but just sits at the top of the page and again losing the requirement for over burdensome position issues and possible problems with IE

I have made it XHTML 1.0 validand this checks out at W3C and the CSS is fine too but it grumbled about the header colour being the same as your links but you can change that

Hope you don’t mind me deconstructing you code but I was just making it cleaner and less potentially buggy.

Reply | Quote

Thanks.
It’ll take me a little while to digest all of what you’ve done, but I like the sounds of it – and have a fixed page! I didn’t even know about xhtml, but will convert the rest of the site (won’t be too hard).
Seeing how someone does code is a great way to learn, so, no, very happy you were prepared to do that.

Thanks again,
Marty

Reply | Quote

Hi Marty

I just do it in XHTML because of my background, I am not sure what you are going to do with your pages but if it is just static content I would just stick with HTML 4.01. XHTML is a bit quirky and is very strict in the use of tags, how the tags are created etc.

I always develop in XHTML now so I don’t have to worry too much about yet another mark up language, there are different views about this in the Lounge (as expected) but Browser are becoming more CSS savvy although IE 7 has not addressed quite a few of the requirements yet. Another reason I use CSS more now is that a lot of the original mark up is now deprecated along with some of the attributes they contain…as I say, the choice is yours

Reply | Quote

One caveat to using XHMTL: you may see examples with an XML declaration on the first line, before the DOCTYPE declaration:




Although technically correct, you should not use the XML declaration unless you absolutely must. Many people still use IE6, and the XML declaration causes IE6 to ignore your DOCTYPE. IE then renders your page in IE6’s historical “quirks” mode, defeating your efforts at cross-browser consistency.

Reply | Quote

Thanks for your time guys. I spent some effort over the weekend rejigging the site. Now it’s css & xhtml, and took a bit of time sorting out the javascript (didn’t realise I’d have a problem there, I presume it’s xhtml being more strict than html). Anyhow, all is well (er, except I haven’t had a chance to test the result with IE – there’s a dangerous assumption!!).

Reply | Quote

I just had a look at your page in IE 7 and this is what I see. The same problem applies to all the other pages.

Reply | Quote

Further to the previous post (so it is obvious to others what the problem is) here is what I see in Firefox.

Reply | Quote

John

Is that using the original link in post 635,017 ?

I have viewed it in FF and IE6 and it looks OK as Marty has nested the divs

Reply | Quote

Yes I just clicked the link in that post, which took me to http://www.greatcircle.net.au/%5B/url%5D

Reply | Quote

Thanks
I’ll find a coleague with IE7, it will be interesting t see it live as I cannot work out why it should do that.

Reply | Quote

This is what I see in IE7.

Reply | Quote

Yep got it, it appears that IE7 doesn’t like the nesting part. I think there will have to be a review on the box model…I shall await Marty’s response to your point.

Reply | Quote

I have just been playing around with a local copy.

Nothing that I tried got the text to appear other than changing the doc type .

This worked: DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”

Reply | Quote

The issue is in the CSS, it appears that the p tag is set to 80% the width of the current div which is not really a proper setting as it should be the div tag. The DTD is fine and interpreting it correctly. The original question was about why the links were not working but there is still a need to set the box model up properly

Reply | Quote

Oh Dear.
I also noticed another funny behaviour in IE6 on the contact page which I saw today. If you hover over the email address in the main div, it blanks out part of the navigation div. The other page like it had a trailing full stop and doesn’t do it, might try that. Back to the problem at hand: I copied the css from a sample/tutorial; I’m happy to take out the 80% width for the p tag (I didn’t even realise it was there!) – is this expected to solve the issue or is there something else going on? It also seems that two different IE7 browsers are giving different results, is that expected?

Have I taken what has been suggested and implemented it poorly? (I deliberately chose the elements I liked best). What is meant by the box model – is it time for me to get a book perhaps?

Is it possible to have IE6 and IE7 installed on a single machine?

Reply | Quote

Marty

I need to see the code. Can you attache the css and html in a zip file and I can look for you.

A basic box model is a design where you have a header div , a menu div, a content div and a footer div and shows like the image below. It is all about getting the widths and heights set correctly and adjust.

I think a book or course may be a good thing as although the mark up language is pretty straight forward it is good to get some design concepts in your virtual tool box.

Let’s look at your code anyway.

Reply | Quote

Here ‘Tis. I’ve not changed anything as yet…

Library got a hammering today. Brain to follow shortly.

Reply | Quote

Here you go Marty

I have redesigned the html and the CSS file to have the look and feel of the box model I depicted in post 637,016

I could not see what your new issue was but I have got rid of my previous idea of nesting the div inside one another and recreated it using CSS to position it.

What you have to do now is open the HTML and the CSS in two seperate instances of a text editor of choice , side by side and then highlight each

section and see what the corresponding CSS element is doing to it.

For example.

#navigation {
width: 200px;
height: 380px;
margin-top: 0px;
margin-bottom: 0px;
border-right: 2px solid #98A148;
font-weight: normal;
float: left;
margin-right: 15px;
}

has been set to be 200 px wide and 380 px high and has been formatted to hug the left hand side of the page. On the other hand:

#centerDoc {
padding-top: 0;
padding-right: 0;
margin-left: 205px;
height: 380px;
}

has been set to have a margin of 205px (so that the navigation appears to be to its left) and again 380px high.

I always draw my box model on a scratchpad and then put basic rough measurements in so that I can add them to my css file as I go ahead with the work…HTH

Reply | Quote