CODEWITHSUNDEEP
csscross-browser
pedz
pedz

Reputation: 2349

Browser Alignment Compatibility Issue

My jsfiddle is here http://jsfiddle.net/pedz/YG3bv/

The full page is http://jsfiddle.net/pedz/YG3bv/14/embedded/result/

This is my first attempt at posting jsfiddle pages so let me know if I botched it.

If you view this with Chrome or Safari, the leftmost pixel of the left tip of the little triangle is directly under the rightmost pixel of the underline. This is what I want.

If viewed with Firefox (I'm using 13), the little triangle is moved right by what looks like two pixels.

I've been told that when viewed with IE9, it is moved left one pixel.

I've fiddled with this for days comparing Chrome with FF mostly. If you add in borders to the various elements, then you can determine some of my conclusions.

FF and Chrome agree about the left and bottom but they do not agree about the top nor the right of the parent container. FF has an extra column or two of pixels on the right when compared to Chrome. That is why the arrow is one or two pixels further right.

It also appears, when you put a border around the foo span, that FF moves the text up a pixel when compared to Chrome. The descenders in FF do not touch the border while they do (or very nearly do) in Chrome. Likewise, there is a bit more white space above the text (within the border) in Chrome than in FF. This particular issue I'm not concerned with... its just something I've observed.

What I figure is I need to "reset" some CSS attribute but I've not yet figured out which one I need. That is really my ultimate goal here... to understand what CSS attribute is different between the browsers.

My secondary goal is to come up with a way to get the little triangle in the same place in the different browsers... or a technique to do it. I could add in browser specific Javascript to nudge things one way or the other but, from the net, that sounds like a really bad idea.

Previews:

Preview in Chrome19 Preview in Chrome 19

Preview in IE9 Preview in Internet Explorer 9

Preview in Firefox13 Preview in Firefox 13

Upvotes: 0

Views: 1317

Answers (3)

vulcan raven
vulcan raven

Reputation: 33582

This is certainly a very interesting scenario.

Looks like Firefox is rendering a non-breaking space after the <span> with triangle, which is certainly not your intention. This is because span with triangle is nested inside another span.

The tbody in your code looks like:

<td class='upd_apar_def-defect upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>123456</a><span class='upd_apar_def_span'></span>
  </span>
</td>
<td class='upd_apar_def-apar upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>987654</a><span class='upd_apar_def_span'></span>
  </span>
</td>

Try replacing it with to resolve the issue:

<td class='upd_apar_def-defect upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>123456</a><span class='upd_apar_def_span'></span></span>
</td>
<td class='upd_apar_def-apar upd_apar_def_dual_button'>
  <span class='foo'>
<a href='some/path' class='upd_apar_def_link'>987654</a><span class='upd_apar_def_span'></span></span>
</td>

No issues with CSS and rest of your DOM, but apparently Firefox seems to do the right thing (imo).. though its debatable! :-)

Upvotes: 1

vulcan raven
vulcan raven

Reputation: 33582

Fixed the Firefox issue.

Fixed on Firefox

Fixed on Firefox

I have updated your Fiddler post with additional CSS reset code for cross-browser compatibility from here. Make a local copy of this file or embed in your existing CSS file.

I added the following CSS reset code above /* your CSS starts here */ line:

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    margin:0;
    padding:0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display:block;
}

Hope this help.

Upvotes: 0

Matt Coughlin
Matt Coughlin

Reputation: 18906

At a glance, what I'm seeing is that there are no font-size or font-family values set. The content appears to have a different default font-size and/or font-family in different browsers, which may be part of what's causing the layout to vary by browser.

Edit:

After adding font-size and font-family, I still see a difference between FF and Chrome. Adding a traditional reset.css did not appear to have any effect. I suspect that the differences are mainly from trying to apply CSS-layout styling (position:absolute, etc) to HTML table elements (td, etc). That combination may have unpredictable results no matter what you do.

Upvotes: 0

Related Questions