Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > Confusing HTML/CSS rendering issues in Firefox.

Confusing HTML/CSS rendering issues in Firefox.
Thread Tools
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Dec 17, 2006, 05:20 PM
 
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!
     
mania
Mac Enthusiast
Join Date: Aug 2001
Location: Durango CO
Status: Offline
Reply With Quote
Dec 17, 2006, 06:34 PM
 
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;
The Bitcastle
graphic design, web development, hosting
     
Synotic  (op)
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Dec 17, 2006, 06:57 PM
 
Originally Posted by mania View Post
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.
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Dec 17, 2006, 10:33 PM
 
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.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Dec 17, 2006, 10:40 PM
 
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>
     
mania
Mac Enthusiast
Join Date: Aug 2001
Location: Durango CO
Status: Offline
Reply With Quote
Dec 17, 2006, 11:12 PM
 
Originally Posted by Synotic View Post
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.
The Bitcastle
graphic design, web development, hosting
     
Synotic  (op)
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Dec 18, 2006, 12:14 AM
 
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.
     
Synotic  (op)
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Dec 18, 2006, 12:55 AM
 
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 &amp;'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.
     
skalie
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status: Offline
Reply With Quote
Dec 18, 2006, 11:08 AM
 
Possibly relevant, a css guru I know makes me use <strong> instead of <b> for some reason.
     
Macola
Mac Elite
Join Date: Mar 2001
Location: Madison, WI
Status: Offline
Reply With Quote
Dec 18, 2006, 05:57 PM
 
Originally Posted by skalie View Post
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.
I do not like those green links and spam.
I do not like them, Sam I am.
     
registered_user
Dedicated MacNNer
Join Date: Nov 2001
Location: Are Eye
Status: Offline
Reply With Quote
Dec 18, 2006, 09:45 PM
 
<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.
     
skalie
Mac Elite
Join Date: Mar 2002
Location: Clogland
Status: Offline
Reply With Quote
Dec 19, 2006, 02:37 AM
 
Originally Posted by Macola View Post
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>.

     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 05:01 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,