|
|
Confusing HTML/CSS rendering issues in Firefox.
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
This particular problem has me stumped and is incredibly frustrating. I'm working on a wiki, and while it works in WebKit/MSIE browsers, it oddly fails in Firefox. The problem, I think, has to do with newlines, but I'm not exactly sure how I can fix my problem. Here's a link to a page that would be outputted by my wiki:
http://weswiki.com/muffins/index.php?title=Butterfields
and a static link to the same content:
http://weswiki.com/muffins/testpage2.html
If you load it in Firefox, you can see that there are some clear rendering issues. Load it in any WebKit browser to see how it should render. Now, if you refresh the static page, the problems go away. I really don't know where to start looking for problems here. I'm just using straight XHTML and CSS, no fancy JavaScript or anything.
I have an inkling of an idea that my problem involves text encoding and newlines, and when Firefox fetches a copy of the page from its cache, it somehow renders a version with different newlines, which affects how the page is rendered. If you empty the cache and view the page, you can see the problem again.
As I said, I'm really lost here, and it's a big problem. Has anyone had problems like this? Would messing with my doctype help anything?
Thanks!
|
|
|
|
|
|
|
|
|
Mac Enthusiast
Join Date: Aug 2001
Location: Durango CO
Status:
Offline
|
|
Hmm, its really hard to read through your css but I think it has something to do with this:
background-color: transparent;
background-image: url(br.gif);
background-repeat: no-repeat;
background-attachment: scroll;
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
Originally Posted by mania
Hmm, its really hard to read through your css but I think it has something to do with this:
background-color: transparent;
background-image: url(br.gif);
background-repeat: no-repeat;
background-attachment: scroll;
I'm not sure where you're finding that... There's only one CSS file linked ( http://weswiki.com/muffins/skins/weswiki/main.css) and that's not in there. Or are you suggesting that I should change my CSS to be more like that?
Oh, and I think my CSS is easy enough to read I indent it to follow the nesting of tags in my XHTML.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
When I use the FF web dev toolbar to edit the HTML, I find many many sets of <b> elements that wrap around each element.
I know you well enough that I'll skip the lecture about presentational mark-up.
But seriously, check it out. When I view source, it's fine, but when I go to edit HTML with the Miscellaneous menu on the web dev tool bar, those corner <b>s are everywhere. I'm not sure what's causing FF to freak out and do that.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Don't know if this is related to your problem, but as registered_user says, you have all sorts of these:
Code:
<b id="ml"><b id="mr"><b id="mb"><b id="mtl"><b id="mtr"><b id="mbl"><b id="mbr">
Code:
</b></b></b></b></b></b></b>
|
|
|
|
|
|
|
|
|
Mac Enthusiast
Join Date: Aug 2001
Location: Durango CO
Status:
Offline
|
|
Originally Posted by Synotic
I'm not sure where you're finding that... There's only one CSS file linked ( http://weswiki.com/muffins/skins/weswiki/main.css) and that's not in there. Or are you suggesting that I should change my CSS to be more like that?
Oh, and I think my CSS is easy enough to read I indent it to follow the nesting of tags in my XHTML.
well I was using the FF web developer extension and thats what it showed. very handy.
oh and your pages dont validate. try that as well.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
Thanks for the advice guys; I'll try converting the <b>s to <div>s and see if that works more consistently. Now that I think about it, it seems that Firefox is somehow treating them as inline elements and applying the corners to everything, or closing them after each new block element.
I originally chose to use <b>s because of an argument I read a while back. It went something like this: since we use <div>s to define corners, even though they have no semantic purpose, we might as well use a deprecated tag like <b> or <i> since they truly have no semantic purpose. I know it sounds sketchy from me, but the article convinced me at the time, and the space saving is appealing
I'll make the page validate first, then I'll switch to div elements since they're traditionally block elements and then I'll report back. I'm sure it'll fix it, but the problem is still intriguing.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Oct 2000
Status:
Offline
|
|
It's fixed.
Changing to divs worked well enough, and it's not as visually annoying in the code as I thought it might be originally.
As for the page not validating... It seems that the majority of the errors are due to the ampersands in the links. I'll try and work with MediaWiki and see how I can make sure all the ampersands are &'d. And then there's the search field. I'm not sure how much I care about arbitrary "validation," if the only error is that I'm using a new input field that gracefully degrades to a text field. That I'm using a few extra properties (autosave, placeholder, results) that some browsers might not understand doesn't bother me. The page is a lot more semantically correct and cleaner than Wikipedia is (which wasn't easy ).
Thanks again; this problem was solved a lot more easily than I thought it would be.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
Possibly relevant, a css guru I know makes me use <strong> instead of <b> for some reason.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2001
Location: Madison, WI
Status:
Offline
|
|
Originally Posted by skalie
Possibly relevant, a css guru I know makes me use <strong> instead of <b> for some reason.
It's a good reason, like using <em> instead of <i>. Content as opposed to presentational markup, as someone else said.
|
|
|
|
|
|
|
|
|
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status:
Offline
|
|
<i> and <b> are not useless, fwiw. well, <b> might be.
<i> is useful for preserving typographic tradition in which you might italicize a word. It's not meant to be expressed with emphasis as content within an <em> element might be, but it's meant to stand out. As for <b>... well, I've got nothing, though perhaps there are similar conventions that would ask that type be bold for no semantic reason.
You could as well use <span> elements for your corners, too.
|
|
|
|
|
|
|
|
|
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status:
Offline
|
|
Originally Posted by Macola
Content as opposed to presentational markup, as someone else said.
The penny actually dropped for me with that statement, I had been battling with a <div> that wanted to add a line break, when I really needed a <span>.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|