• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 478
  • Last Modified:

CSS rendering problem in Firefox

Hi there,
I'm chucking together this site:
http://www.chrisbillett.net/index2.html
... and can't help but notice that my CSS goes nuts in Opera and Firefox, but not so nuts in IE (the other problems in IE I can deal with later). Does anyone have any idea why the HTML compliant browsers are rejecting my width and height commands? You can see them in the CSS here:
http://www.chrisbillett.net/stylesheet.css

... perhaps I'm just being stupid. I've tried several other variations today which I'll expand on if need be, but any pointers would be appreciated - what are people's opinions on CSS cross-browser?

Cheers,
Chris
0
chrisbillett
Asked:
chrisbillett
  • 13
  • 12
1 Solution
 
RedKelvinCommented:
for CSS cross browser compatibility check out this link
http://vzone.virgin.net/sizzling.jalfrezi/stylebml.htm

Also your page is not w3c compliant, fix those errors first, http://validator.w3.org/

0
 
chrisbillettAuthor Commented:
Cheers, but I'm looking for the reason why valid CSS isn't working in all browsers, not a few hours of reading off a screen.

Also, if you'd read the validation errors, you'd see that they're all due to this being a rushed test page, no encoding et cetara, seeing as I needed to get a demonstration link online for you guys to see what I'm talking about. I appreciate that I should ultimately validate my code, but I need to finish the site first, and any experienced developer should be able to understand why the eroors that are currently there have appeared.

I notice on your profile nearly all your recent replies are similar w3c police-like comments, so please refrain from wasting my time with more answers unless they're relevant to the question.

Best,
Chris
0
 
chrisbillettAuthor Commented:
Sorry, I just realised that I did actually ask for opinions on cross-browser CSS and your link was appropriate to that. I'm tired and snappy.
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
RedKelvinCommented:
Thanks for the apology, I police the w3c standards before helping people, as most people doing web pages are just hackers, and at least 50% of the time their problems are resolved just by fixing simple problems like closing tags. I will take another look at your problem a  little later
0
 
RedKelvinCommented:
Could you please provide more detail, on what exactly you does not work correctly, through FF, your page looks fine
0
 
chrisbillettAuthor Commented:
Yep, as you roll over the table cells that are blue, they should turn a pastel purple (not just behind the text, but the whole cell). It does this in Opera, but not FF.
0
 
RedKelvinCommented:
ok, I have opera 8.5 installed and FF 1.5.0.1 and the only difference I see is that on your TESTING cells, they have  a right, bottom, and top border, but that is because you are specifying borders on those cells in your css

with both browsers, rolling over these cells turns the cell contents to purple, excluding the text (and excluding the border in FF)
0
 
chrisbillettAuthor Commented:
Cool. Ok, well just to clarify, here are three screenshots taken a moment ago:

Internet Explorer - http://www.chrisbillett.net/error1.jpg
Firefox - http://www.chrisbillett.net/error2.jpg
Opera - http://www.chrisbillett.net/error3.jpg
Safari - http://www.chrisbillett.net/error4.png

... as you can see, the three browsers display the same code completely differently! To be honest, I'm happy with the look in IE (I can get rid of the white gaps, it's the CSS that's playing with my mind).

Any ideas what I'm doing wrong/what the browsers are doing wrong? It infuriates me that they can't keep to a standard, even the supposedly HTML compliant browsers render this CSS differently! What's going on?

(Cheers for your time and input on this, Kelvin.
0
 
RedKelvinCommented:
Hi again,
The problem is that you need to apply your "topmenubox" styles to the table cell, not the anchor.

Will take a little more tweaking than that, but that is why you are getting the display difference.

RedK
0
 
chrisbillettAuthor Commented:
Ah, I started off like that, and got problems with the rollovers. Let me revert it and then show you what happens then. I may be a couple of days as I'm off to Reykyavic!
0
 
chrisbillettAuthor Commented:
Hey RedK,
Sorry it took so long to impliment that tiny change. Life got a little hectic, have increased the points of this in light of your continued efforts.

I've made those changes (I think I have tried this variation in the past before discarding actually) and it does work *better*, but in IE and Firefox the rollover colour change doesn't happen, although it does in Opera and Safari. Pretty annoying eh! Perhaps this is the tweaking you speak of, so any tips would again be appreciated. I really just don't do enough coding these days to know all the quirks!
0
 
RedKelvinCommented:
Just been to the original page you listed, and I have noticed that you mouseovers are not working on your "testing" table cells, I usually use Javascript to control the mouseover effects with my CSS, here is an example
http://www.tutorialized.com/tutorial/Table-Cell-Background-Hover-With-CSS-and-Javascript/1359

Hope that helps
0
 
chrisbillettAuthor Commented:
Crikey. I hate web-design!

Ok, cheers, that helped a lot. I've *mostly* got it working how I want. I don't know how many browsers you have there, but do you see how the lines don't link up in Internet Explorer and Opera (less so)? Firefox is fine. So is Safari.  Any ideas why? I think the problem lies in the CSS style sheet, but I can't figure out where for the life of me.

I also can't get the cells to pad a bit on the left hand column. The text hugs the wall, which I can get around by 'text-indent: 3px;' but I can't get it off the line at the top. I have to leave the 'valign=top' in the parent table row, or it falls away from the rest of the site... oh HTML - I WISH I KNEW HOW TO QUIT YOU!

(RK - I'll accept one of your answers as you've done more than enough to help me, but if you can still comment and let me know if you can point me in the right direction that'd be great!)
0
 
RedKelvinCommented:
Hi Chris, I tried to take another look at your original link, to have another play, but the page cannot be found.

Do you have a current page, I can have a play with?
0
 
chrisbillettAuthor Commented:
http://www.chrisbillett.net <-- the homepage!
0
 
RedKelvinCommented:
I could be wrong, but I think both problems could be attributed to the fact that the menu items down the left hand side are split into spans, instead of actual cells, try using actual table cells
0
 
chrisbillettAuthor Commented:
It's something to try. I'll get around to it this weekend if I can!

(Hell, what a load of HTML to change if so... curses!)
0
 
RedKelvinCommented:
yeah, bit of a nasty change, reckon it should get you sorted though.

Good luck
0
 
chrisbillettAuthor Commented:
Alas, it doesn't work. http://www.chrisbillett.net/index2.html <-- all converted to a nested table there.

:(

It may be something I just have to live with (I don't want to!) and it does work in Firefox, so maybe the other browser will catch up. Assuming Firefox is in the right...
0
 
RedKelvinCommented:
got it sussed, look at this line
<tr valign="top"><td width="100"><table border="0" cellpadding="0" cellspacing="0"><tbody>.................................
just remove the cell width like this
<tr valign="top"><td><table border="0" cellpadding="0" cellspacing="0"><tbody>.................................

problem solvered
0
 
chrisbillettAuthor Commented:
Alas, it makes no difference. See http://www.chrisbillett.net <-- where it doesn't have that line. I just put in the width="100" to try and force it to match the cell above, but it didn't work. I don't know *what* could be causing this. It's what I really, really hate about web programming. There's just too many variables, you can't write for all browsers. It sucks... [/teenangst]

(that should be real tag... shame I'm not even a teen! Haha...)
0
 
RedKelvinCommented:
that is really odd, that looked fine on my machine when I did it.

Time consuming, but all I can suggest at this stage is to strip the css and take it back to basics, and rebuild it until it screws up.
0
 
chrisbillettAuthor Commented:
Yuh. I sadly just don't have that time, I need to get my site up and written off, start work on three others, and go to New York for my Mac Analyst work for a month! Life's a bitch, HTMHell's just something I don't have time for... thanks for all your help though, you've gone way beyond what most would - cheers!
0
 
RedKelvinCommented:
something else I noticed is that you have specified your Blog menu item with the "topmenuboxleft" style, not quite sure why you have done that if you use "topmenubox" it makes the difference in the lineup less obvious.

Sorry I couldn't help more
0
 
chrisbillettAuthor Commented:
topmenuboxleft has a left border :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 13
  • 12
Tackle projects and never again get stuck behind a technical roadblock.
Join Now