[web] Help w/ Browser Compatibility (Fix for FireFox)
Author
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
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]
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]
Author
Quote:Original post by RebootedThe 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).
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?
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:
Maybe it's your DOCTYPE declaration, try changing it from strict mode to transitional mode:
At least, that's what works for me.
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.
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)
3) Add the following style
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.
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)
3) Add the following style
.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.
Author
Quote:Original post by deadimpSorry, but I really want to be strict-compliant. No real need for it, but it makes me warm and fuzzy inside =-)
[...]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.
Quote:Original post by Colin JeanneThanks 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 =-).
[...]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.
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.
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.
Author
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.
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.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
