# [web] Help w/ Browser Compatibility (Fix for FireFox)

This topic is 4007 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

After completing a significant portion of of the backend, I decided it was time to actually give it all a face based on the temporary page I've had up for ages. I have a perfectly standard-compliant page (according to the w3 validator), so I opened it up in firefox to see how well it looked, and I was quite surprised to see something not at all what I believed the page should look like, especially since it works fine in even IE6! The HTML is: index.html The CSS is: inaneravings.css I'd really appreciate any and all advice on how to adjust the CSS and HTML to keep both standard compliant while also making it look the same in all browsers as it does in IE6: proper_look.png

##### Share on other sites
FWIW, it looks exactly the same in Opera as it does in Firefox.

The problem is just that there is no vertical spacing between the panes, right?

[Edited by - Rebooted on October 29, 2007 6:05:24 PM]

##### Share on other sites
Quote:
 Original post by RebootedFWIW, it looks exactly the same in Opera as it does in Firefox.The problem is just that there is no vertical spacing between the panes, right?
The vertical spacing is absent and the border is missing in spots, and the HTML is very 'fragile' - minute changes can make both problems significantly worse or introduce new ones (for example, removing "float: left;" from ".TextPane" introduces vertical spacing between the header and body in each block, and that area is filled with the background color. In IE6, the page remains unchained as it should IMO).

##### Share on other sites
That's weird... If you view your page without any style, there's still some space between the div's which shouldn't be there.
I went through all the CSS and disabled random nearly everything, including removing the class references for the div tags but there's still that extra space, so I don't know what's going on.

I started a blank page and put in this code and it seemed to work well enough:
<style>.group { background: #ddd; margin-bottom: 10px;}</style><div class="group"> <div class="title">Blarg</div> <div class="body">test text</div></div><div class="group"> <div class="title">Blarg</div> <div class="body">test text</div></div><div class="group"> <div class="title">Blarg</div> <div class="body">test text</div></div>

Maybe it's your DOCTYPE declaration, try changing it from strict mode to transitional mode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

At least, that's what works for me.

##### Share on other sites
I havent checked the output in IE6 but to fix it in Firefox you can do the following:

1) Remove float : left from .TextPane
2) Remove width : 100% from .TextPane as well (this is redundant as divs automatically expand to the full width of their container)

.TextPane p {  margin: 0px 10px;  padding: 10px 0px;}

The problem you had when you removed float : left was that you were then seeing the margin of the contained p element of .TextPane. This resulted in the spacing between the header and the text.

##### Share on other sites
Quote:
 Original post by deadimp[...]Maybe it's your DOCTYPE declaration, try changing it from strict mode to transitional mode:At least, that's what works for me.
Sorry, but I really want to be strict-compliant. No real need for it, but it makes me warm and fuzzy inside =-)

Quote:
 Original post by Colin Jeanne[...]The problem you had when you removed float : left was that you were then seeing the margin of the contained p element of .TextPane. This resulted in the spacing between the header and the text.
Thanks a lot! Your fix obviously works, but is it the best way to change things? I'm not sure really why it works, and any help with that would be appreciated. Shouldn't the div expand to contain it's children (P in this case), barring restrictions that don't exist in this example? I just want to make sure I understand what is browser quirks and what is proper (so I can continue to work on this with constant supervision =-).

##### Share on other sites
From my understanding of the box model, I believe this falls under the definition of collapsed-through. The margin of .TextPane and its p child are adjoining and so they collapse resulting in a margin that is the maximum of the two. The p has the larger element and so its margin is used.

The .TextPane p rule I provided ensures that only .TextPane's margin makes a difference by zeroing the p's margin and at the same time ensures that the proper padding is provided visually by padding the p.

##### Share on other sites
Thanks for your help. The current files are now index.html and inaneravings.css. They both seem to work equally well in both browsers, but I have a strong feeling there is a better way to handle the spacing on the title than the way it is now. It seems like there should be a method using only one div, but as you say they expand to the width of their container or if I set it to inline display it doesn't pay any attention to margins, so I need one for margins and one for fitting to the contents.

##### Share on other sites
You could use one of the heading tags for the heading and a p tag for the text and wrap the whole block in the PaneFrame div. Heading tags and p are both block level and so they will also expand to the full width of their container.

1. 1
Rutin
27
2. 2
3. 3
4. 4
5. 5

• 11
• 11
• 10
• 13
• 20
• ### Forum Statistics

• Total Topics
632948
• Total Posts
3009398
• ### Who's Online (See full list)

There are no registered users currently online

×