Tag error: <txp:tru_tags_if_has_tags> ->  Textpattern Warning: tag does not exist while_parsing_page_form: archive, default
/commentable: When Firefox Shows CSS Borders OUTSIDE DIV Width.
Dinarius = digital interest
5 May 2008

When Firefox Shows CSS Borders OUTSIDE DIV Width.

Mozilla-based browsers like Firefox (and Flock – you HAVE TO try Flock – it’s incredible) show CSS correctly even and they totally disagree with Internet Explorer’s rendering. Just ONE problem is nesting a DIV in a Table where you want WIDTHS to be very specific. If your Firefox/Flock preview shows your CSS borders OUTSIDE the width you specified, you’ve done one or two things wrong already. When you get it right, Firefox, Flock and Internet Explorer and Safari (Windows) will all agree…

Personally, I HATE getting advice on this stuff from the Internet because it seems that everyone uses different codes to achieve whatever they’re after. To help you in a way I would have liked to have been helped, I was creating a three-column Table. In the first column, I wanted CSS to close up some writing within a graphic box. The tactic is deceptively difficult if you’re not using a template.

Firefox CSS Borders expand beyond table width.

Note what a serious disaster this is. Anyone visiting will think you’re on crack. The Borders specified in the CSS go WAY outside the width specified in BOTH the CSS where the Width, you can see, is 144px, and HTML table where the width is only 150.

It takes these three #CSS elements to create a nice, graphic capped object on the page. Since I didn’t change the TOP or BOTTOM, we’re ignoring these later. The BACKGROUND is RED so you can see what’s happening. It turns out that there are TWO solutions to our explosive problem.

Eliminating the WIDTH attribute from CSS and adding MARGIN-LEFT and MARGIN-RIGHT to AUTO was actually the surprise solution because I thought we had to also get rid of the PADDING which I know Firefox/Flock/Mozilla hate. In the next example, you see that AUTO Margins become 3px (150px MINUS 144px is 6 divided by two [for centering]) and PADDING disappears shrinking the height of the graphic boxes but allowing the letters to go end to end.

What we learn is that when CSS is an element INSIDE a table, let the TABLE control the overall width. When removing the “Width:144px” from the CSS, everything worked out pretty well. Margin-left/right: AUTO is nice but better set to 3px in this example because the math is so strict anyway. Where PADDING used to give me a headache, it’s nice to see in the second example that it is renderable perfectly in Flock and keeps the words off of the sides.

So, again, if you have a TABLE where CSS will tightly control an element similar to what’s pictured, let the TABLE control the WIDTH and accurate MARGINS controlled in CSS are my best advice.

Favorite's the ARTICLE, not the SITE.