Firefox displaying padding differently to all other browsers - html

I have a tab that has two borders on either side, the borders must fill the toolbar they are within and to achieve this I have used padding. In Chrome, IE, etc. the top and bottom padding must be set at 9px to fill the toolbar, however in Firefox they must be at 4px.
Here's a jsfiddle with a mockup of the toolbar added.
The markup is pretty simple;
<a href="Discover">
<span class="navButton">
Discover
</span>
</a>
I have removed transitions and other unneeded styles from the css;
.navButton {width:50px; border-right-color:#171717;
border-right-width:1px; border-right-style:solid;
position:relative;
padding-left:10px; padding-right:10px;
padding-top:9px; padding-bottom:9px;
}

display:inline-block would be quite appropriate here (at least a reasonable suggestion without seeing the rest of the code). You'll also need to drop the width declaration as your tab caption is wider than 50px - the reason you can't notice it now is because elements rendered inline (including <span> with default display property) can't have dimensions applied to them.
Works fine in this fiddle

I've had a fiddle and it works fine now. I have set it to display: inline-block and changed paddings and positions around.

Span is an inline-element by default and maybe handles the padding completely different than a block-element. Try setting:
.navButton {
display: block;
}
and check the results.
In general, you should include a CSS reset script (Google for it).

Related

How can I work around this IE11 layout bug related to table-cell, text-decoration, and padding?

It seems I've stumbled on an annoying Internet Explorer 11 layout bug. (Ugh, I thought these days were behind us.)
In the following example, the padding on the right table cell disappears when you hover over it in IE11:
http://jsfiddle.net/xx4Z4/
This seems to arise because of an incredibly specific CSS scenario:
The element uses display: table-cell
The element uses percentage-based padding, e.g., padding: 0 5%
A subelement adds text-decoration: underline when the parent element is hovered over
If you change any of those three things, the problem goes away.
This seems to be an IE11 bug, but I'm wondering: Can anyone think of a workaround for this problem without abandoning display: table-cell and percentage-based padding?
Again a IE11 problem that seems so unusual. I see that the percentage padding is not even calculated and is not applied in the layout. However the text is still padded according to the padding percentage. So i would assume the text is positioned with the padding but after the positioning the percentage padding is "disabled".
I can't tell you why this happens. But if you really want to fix these you might want to use these quick fixes.
Use margin
Because the percentage bug only occurs on the padding of a table-cell, you can actually use a margin on the span itself.
span
{
margin-left: 10%;
}
and ofcourse reset the padding of the sides:
div.table-cell {
display: table-cell;
padding: 20px 0;
}
This "solution" is not as dynamic as with percentage padding on the table-cell itself.
Why not?
It's because the percentage takes is value from it's parent element, the table-cell. Where as the table-cell did take it's percentage value based on the tabel. Now when you would just use left-margin: 5%;. It would be half of the space as it should be. This is because it take the 10% on the table-cell width. Where the table-cell width is table width devided by its cells(table width / table cell).
So to fix that i did 5 times the amount of cells (5 * 2 in this case), which would result in the right percentage.
However this is not dynamic when you want to add more cells.
jsFiddle
Use border
Use border which its position is "reserved" before the padding is resetted.
Reserved border
span
{
border-bottom: 1px solid transparent;
}
Change property that doesn't need re-calculation of position; color
div.table-cell-bug:hover span
{
border-bottom-color: black;
}
Now note that there will still be no padding in the layout. As soon as a property is assigned which has not been calculated before the padding did reset(the same time the text position is determed) the positions will be re-calculated.
jsFiddle
I hope one of these quick fixes work for you.
I see you sended a bug report to MS. Keep us up-to-date when you get a reply, i would appreciate it :)
Strange, no one mentioned to set table-layout:fixed; It's really important, otherwise the padding/width won't be calculated correctly on IE (and some other weird side-effects, depending on the use case), especially when you are using images inside it.
<style>
.table { display:table; table-layout:fixed; }
.table-cell { display:table-cell; }
</style>
<div class="table">
<div class="table-cell"></div>
<div class="table-cell"></div>
<div class="table-cell"></div>
</div>
Adding invisible top and bottom borders seems to fix the problem.
a {
border: solid rgba(0,0,0,0);
border-width: thin 0;
}
This prevents the anchors from moving on hover or focus.
I use rgba(0,0,0,0) instead of transparent for better compatibility with old IE which displays transparent in colour while rgba is rendered invalid and not displayed at all.
We had a similar scenario where none of the solutions above worked.
Instead we animate the width of our affected div after the page has loaded:
if (!!navigator.userAgent.match(/Trident\/7\./)){
$("#karina-rosner2").animate({'width': '20.1%'},1);
$("#karina-rosner2").animate({'width': '20%'},1);
}
This forces IE11 to recalculate the div's relative padding value and solved our problem well.
This can be "helpfully" solved by setting the paddding css-rules like this ->
element:hover,
element:active,
element:focus {
// padding example
padding-left: 1.5%;
}
Rememeber to set this only for IE since it can make all normal browser behave like a disco.
EDIT: Flexbox works for IE 10 and above so this "solution" is only needed for ie 9 and below.
These are all really good answers, and the media query option works well to identify only IE which has this problem with display:table-cell
What I did that I found worked well was employ vertical-align as a great way to direct the text contained within the display:table-cell element to where I wanted it to reside. Usually vertical-align doesn't do much to formatting, UNLESS it is in a table.
Here is my simplified HTML:
<li id="table-cell-element">
<a href="#">
<img src="event.png"/>
<small>Register for Event</small>
</a>
</li>
And here is the CSS:
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
li {vertical-align:middle; display:table-cell; width:15%; font-size:1.2em; line-height:1.2em; padding:2%; margin:0;}
li a {display:inline-block;}
li img {display:inline-block; vertical-align:middle; padding-right:5px; float:left; max-with:30px;}
small {display:block; font-size:60%; font-weight:bold; color:#333;}
}
You may also have to adjust the li a:hover {line-height} depending on what is in your CSS for those elements
Also, if you want this to work for IE 9 and below I suggest using conditional comments that add an "ie" class to the <html> tag and then create an IE9 style sheet. Thankfully the styling required for IE9 is relatively the same. But I only tested through IE9 and I am uncertain of your results for IE8 and IE7.

3 inline-block divs with exactly 33% width not fitting in parent

This is a common problem but I can't figure out why it happens.
I have a parent div and inside that div I have 3 divs with width set to 33% (exactly, not 33.3%!) and display: inline-block.
In Chrome it works well, but in Mozilla and Opera it does not (I didn't test it in IE yet). I thought the problem might be in the algorithm browsers use to calculate pixel sizing from percentages. But when I checked the DOM metrics, I found that the parent's width is 864px and the child's is 285px (that's correct: 864 * .33 = 285.12). But why doesn't it fit in the parent? 285 * 3 = 855, that's 9px less than parent's width!
Oh, yes, padding, margin and border for all divs set to 0 and DOM metrics confirm that.
Whitespace in the HTML source code
In the HTML source code, When you have lines of text or images, or elements that are inline-block, if there is any whitespace between them (blank spaces, tabs, or new lines), a single blank space character will be added between them when the page is rendered. For example, in the following HTML, a blank space will appear between each of the four pieces of content:
one
two
<img src="three.png"/>
<span style="display: inline-block;">four<span>
This is very helpful for lines of text, and for small images or HTML elements that appear inside a line of text. But it becomes a problem when inline-block is used for layout purposes, rather than as way to add content inside a paragraph of text.
Removing the extra space
The safest, cross-browser way to avoid the extra 4px or so of space that's added between inline-block elements, is to remove any whitespace in the HTML source code between the HTML tags.
For instance, if you have a ul with 3 floated li tags:
<-- No space, tabs, or line breaks between </li> and <li> -->
<ul>
<li>...</li><li>...</li><li>...</li>
</ul>
Unfortunately, this hurts the maintainability of the website. Besides making the code unreadable, it severely compromises the separation of data and formatting.
If another programmer comes along later and decides to put each li tag on a separate line in the source code (unaware of why the tags were on the same line, or possibly running it through HTML Tidy and not even having a chance to notice any related HTML comments), suddenly the website has a formatting bug that may be difficult to identify.
Consider floating elements instead
The whitespace behavior strongly suggests that it may be inappropriate to use inline-block for general-layout purposes, to use it for anything other than adding content inside the flow of a paragraph of text.
Plus, in some cases inline-block content is very difficult to fully style and align, especially on older browsers.
Quick summary of other solutions
Put the close tag on the same line as the next open tag, with no white space between them.
Use HTML comments to fill all of the whitespace between the close tag and the next open tag (as #Arbel suggested).
Add a negative left margin to each element (usually -3px or -4px, based on the font-size). I don't recommend this particular approach.
Set the font-size for the container element to 0 or 0.01em. This doesn't work in Safari 5 (not sure about later versions), and it may interfere with Responsive Design websites, or any website that uses a font-size unit other than px.
Remove whitespace-only text nodes from the container using JavaScript or jQuery. This doesn't work in IE8 and earlier, as text nodes are not created in those browsers when there's only whitespace between elements, though space is still added between the elements.
Set letter-spacing and word-spacing for the container (as #PhillipWills suggested). Further info. This requires standardizing em sizes on the website, which may not be a reasonable option for all websites.
Add text-space-collapse: discard; to the container (previously called white-space-collapse). Unfortunately, this CSS3 style is not yet supported by any browsers, and the standard hasn't been fully defined.
If you don't want to mess up the HTML formatting e.g. having all the elements with inline-block written in one line for future readability and also get rid of the extra white space that is added between them, you can "comment" the white space.
For example in your code this will solve the problem, it will even work with 33.3% instead of 33%:
.parent {
width: 100%;
}
.child{
display: inline-block;
width: 33.3%;
}
/\
<div class="parent">
<div class="child">bla-bla1</div><!--
--><div class="child">bla-bla2</div><!--
--><div class="child">bla-bla3</div>
</div>
A space is added between the inner divs. There is some CSS voodoo to correct this problem:
div {
letter-spacing: -.31em;
word-spacing: -.43em;
}
div div {
letter-spacing: normal;
word-spacing: normal;
}
Of course, you'll probably prefer to use classes or something to differentiate between parent and children.
Add float:left;
.parent{
width: 100%
}
.child{
float:left;
display: inline-block;
width: 33%
}
http://jsfiddle.net/H6Whc/1/
Has anyone tried display: table? If that's not a good idea, why not? This works in all modern browsers and I tested it down to IE9.
.parent{
display: table;
width: 100%;
}
.containers {
box-sizing: border-box;
border: 1px solid #000;
height: 50px;
width: 33.3%;
display: table-cell;
}
This is a mentioned by a number of comments and by #Avin, but removing display: inline-block and replacing it with float: left works.
.parent{
width: 100%
}
.child{
float:left;
width: 33%
}
This is a common problem, but it can be sorted out very easily by assigning the display: table CSS property to the parent div.

Floating divs not displayed in IE7

OK I don't see what's wrong here:
https://www.e-capture.net
When browsing this site in IE7, the divs with IDs #blog and #social are not being displayed. The reason seems to be the #content div, which has a different height in IE7 vs IE8/FF/Chrome. But I don't see what I'm doing wrong.
Fun fact: the site displays better in IE6 than it does in IE7 :-)
Any ideas?
Thanks!
I've tested this in IE7 and Firefox.
You just need to move around a bunch of your <div> tags, and add a single new one (highlighted below).
Here's what Firebug looked like after I'd finished:
(I did the same thing in IE7 first, and it fixed your problem. Then, I did the same in Firefox to make sure the fix won't kill it in modern browsers.)
Here's my attempt at a textual description of what I did:
I moved #blog, #social and #footer respectively to outside and after #content.
I wrapped a new <div> around #blog and #social, with these styles:
margin: 0 auto; width: 960px.
I swapped around a few things concerning #buttons, to make them consistent between FF and IE7:
On ul#buttons li, remove margin: 10px 0, and add float: left.
On ul#buttons li a, remove float: left and add display: block.

how to fix site for IE7

I am having tough time finding out what CSS property to change to get my page working in IE7.
Page is here
It works fine in Firefox, Chrome, IE8 but not in IE7 (maybe IE6) as well.
Notice that navigation menu goes up and #header that contains logo shrinks to a small size...
/hate IE/
Your .content has a height of 4.2 pixels. Try using a border-top:4px solid #whateverhex instead of using a 41px high repeating gif.
Then remove height:4.2px.
Alternative would be #nav { clear:both; }
my guess is that IE isnt using the Psuedo after class, which is where you clear your float. you can just add a height to the #header, or clear your float in a line break tag after the content.

Problem with absolute positioning in Firefox and Chrome

I don't understand why FF and Chrome render my page differently. Here's a screenie of it in
firefox: firefox example http://grab.by/65Bn
and here's one in chrome
chrome: chrome example http://grab.by/65BB
fieldset has a relative position and the image has an absolute position.
here's the basic structure:
<fieldset class="passenger-info">
<legend>Passenger 1</legend>
<div class="remove-me">
<img src="/images/delete-icon-sm.png" />
</div>
</fieldset>
basically the image is declared right after the legend.
here's the css for fieldset:
.passenger-info {
background:none repeat scroll 0 0 #F2F2F2;
border:1px solid #9D240F;
display:inline;
float:left;
margin-bottom:10px;
margin-right:10px;
padding:3px 10px;
position:relative;
width:350px;
}
and for the remove-me image:
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
it's totally weird. I tried putting the fieldset padding out, and the image moves up a little, but still not at the corner.
This post shows that FF does indeed have problems with rendering fieldsets.
http://www.codingforums.com/showthread.php?t=132624
Is there a better way of doing a fix without using a browser specific hack?
I can't believe this is 4 years old and still not answered. I searched every where for this answer. Here is what I did to use position absolute on an image within a fieldset. From here, change your right and top positioning to make it work for you in Firefox. (leave your original class in place for IE, Chrome, Safari, Opera)
#-moz-document url-prefix() {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
This is a Firefox Hack that I'm told works for every version of Firefox. I'm using Firefox Version 33.0.2, so I can't confirm this works on older versions. I had the same problem on my site. It looked the same in IE, Opera, Safari, and Chrome. It was only in Firefox I noticed the positioning different. This works!
It appears that Firefox has an invisible padding or margin that places the element at the top right of the text space. Chrome is placing the element at the top right of the fieldset element outside of the flow of text.
One thing you could do is add a div wrapper and then absolutely position the element in the top right of the wrapper so that it lays over the corner of the fieldset.
It appears that the .remove-me element might have margin. Make sure to to remove that prior to adding absolute-positioning to items.
For precise results, you should always do a 'reset' in your CSS. This means removing margin/padding from every element.
A simple reset:
* { margin: 0; padding: 0px; }
Put that at the top of your CSS.
I have used #media screen and (-webkit-min-device-pixel-ratio:0) {} and fixed my absolutes that way. Its not very dry but it works.
I think it is because you didn't indicate the height of the div (passenger-info) that contains the button; Chrome starts acting up when you don't specify this.
The real solution is firefox and ie don't set defaults for top, left, right, and bottom.
I was able to fix my problem by setting these properly.
Instead of using margin use left, top, right, bottom. Example:
position: absolute;
top: 10px;
left: 20px;
Using a feature query against one of mozilla's platform-native properties is probably the correct approach for this in 2020. -moz-appearance is one such property, but others would work as well.
#supports (-moz-appearance: none) {
.remove-me {
border:1px solid red;
position:absolute;
right:0;
top:0;
}
}
I had a similar problem with a web site and the images in Chrome where wrong. I had the position in an image and an input box in the same way as your example at the beginning of this post, and I solved it by putting the absolute position in the input box and in the image position in relative coordinates.
When I do that, it changes both positions but puts margins in both. I got it where I want it, to solve this problem with Firefox an Chrome you have to follow some of these tricks in order to put the images in the right place. Play with the position to make it work.