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 Chrome 19
Preview in Internet Explorer 9
Preview in Firefox 13
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! :-)
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.
Fixed the Firefox issue.
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;
}
Editable: http://jsfiddle.net/YG3bv/31/
Full screen result: http://jsfiddle.net/YG3bv/31/embedded/result/
Hope this help.
Related
Go to: http://appointview.com/pricing in Internet Explorer (I am using version 9, but in the dev tools setting it to IE7 mode).
The two divs are not lining up on the top, as they do in higher versions of IE, as well as work fine in FF and Chrome. I have inspected the elements pretty thoroughly and can't figure out what the issue is.
I am not the greatest at cross browser compatibility testing, so maybe there is a fix that is quick and easy?
IE7 is a mess. Try to remove any white-space between the divs, between closing </div> and opening <div>.
For example, from:
<div>
First one
</div>
<div>
Second one
</div>
To:
<div>
First one
</div><div>
Second one
</div>
This is a very common bug. White spaces between inline-blocks is problematic. Try to use mouse to select both div, and you will notice that there is a blank character that occupies the undesired space above the second div.
I'm working on a table that has cells requiring a background with lowered opacity, and text on top not effected by the background. The content in the cells is dynamic.
http://jsfiddle.net/6zszm/3/
In IE9 (have not tested in other IE versions) the background is clipped at the span content. In firefox, the background runs wild and overflows to bottom right. In chrome this works like a charm.
Some similar questions that didn't quite cover it:
How to make <div> fill <td> height
Someone suggests a 1px height to the td - this did not work for me, nothing changed. I would also rather not use JS to fix this problem.
Another somewhat related issue: CSS absolute positioning bug with IE9
The strange thing is in IE9, this worked in compatibility mode, but not without.
This is indeed seemingly impossible - unless you specifically define each cell's width and height, which kind of defeats the object of using a table.
Possbile solutions...
RGBA
Assuming you are going to use background colours you can always use background-color: rgba(200,200,200,0.5) with a fallback to solid colours if it fails. Support for RGBA is in all of the top browsers, it doesn't work for IE8 and below however...
Transparent PNGs
The obvious easy one is to fallback to using transparent PNGs, but then this relies on the colours you are using being predefined and rather rigid.
Use -moz-element
Another mad solution to get FireFox to work (if you are using background images rather than colours) would be to use the background: moz-element() ability. Here you create hidden elements on your page of each different opacity that you might require and reference them as a background via id. For example:
<div id="image1" style="background: url(image1.jpg); opacity: 0.5;"></div>
Then reference that on the element you want the background to appear on:
<td style="background: -moz-element(#image1);"></td>
I'm not vouching for this method however, it's rather inelegant and browser specific. Tbh I'm quite suprised to find that this problem is indeed not fixable (esp. in FF) using plain old absolute and relative tricks.
Don't us Tables
The more browser supported solution by far would be to drop using tables and recreate a table structure using good old divs and floats. The only problem with this solution is again you'd have to define most widths and heights and you wouldn't be able to achieve vertical cell alignments unless you fallback to something even more experimental like FlexBox.
You could try working with a CSS framework, like LESS or Blueprint. Most frameworks have background code that makes your styling look the same in all browsers, even if tweaking would normally be required.
I have a web application originally designed to target IE7. I am readjusting the CSS to make the app presentable in the latest version of Chrome without breaking it for IE7 users. I've fixed mis-aligned sliding door input boxes throughout the site but there is one page where I cannot get the sliding door to align in both IE7 and Chrome. The setup is very simple:
<span>
<input type="text" ... />
</span>
In this case the span holds the left cap of the sliding door and the input holds the right cap and body. I've styled both span and input as inline-block with the same height and no margins or padding. Chrome nails it and it looks great but IE7 is rendering the input 1 pixel lower than the span like so:
need more reputation to post images
If I add -1px of top margin to the input then IE7 renders the thing correctly and Chrome renders it misaligned. I've tried comparing this instance to all of the other sliding door inputs in the app that work in both IE7 and Chrome but I cannot for the life of me see what is different here....
Anyone run into a problem like this before?
There's almost certainly a better way to fix this, but without seeing it..
Add a class to the broken input such as "ie7fix", then:
/* applies to only ie7 */
*+html .ie7fix {
margin-top: -1px;
}
http://en.wikipedia.org/wiki/CSS_filter#Star_plus_hack
A friend of mine ask me for help, but I'am not able to spot the mistake.
It's about:
http://www.nachhilfe-hh.de/nachhilfe-hamburg-west.php
The problem is that the phone image is getting cutted and the text is overlapping with Internet Explorer. Firefox works fine. I analysed the CSS with Firebug and found out that there was a missing "< /div >". That solved a problem, but not the ones with the image.
If I try to change width of the image: Not happens.
If I try to change position of the text: Either the appearance sucks in IE or Firefox.
And changing "< div >" to "< span >" is also causing no effect.
Does someone have an idea? Pls?
.telefoncontainer got a width:329px and the picture got one of 370px.
It works on other browser because .telefoncontainer p's width is good. But IE ignore children's width to resize the parent's one.
First off: There is still a </div> missing: http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.nachhilfe-hh.de%2Fnachhilfe-hamburg-west.php
I'd suggest to avoid position: relative. It the reason for the overlapping, and even if you find the error in this case, it can lead to more overlapping in other places.
Simplify the HTML for the telefoncontainer to:
<div class="telefoncontainer">
<div id="stadt">Nachhilfe Hamburg West</div>
<div id="telefon">040 / 839 75 03</div>
</div>
(All the extra, ps, divs and center are unnecessary).
And then just adjust the padding of the container, until the content are positioned correctly.
Example: http://jsfiddle.net/sVhd2/
have you tried using a conditional comment to target IE specifically? this will allow you to have different styles for each browser, so a change in one shouldn't break the other. See: http://www.quirksmode.org/css/condcom.html for a good run-through of the capabilities and usage of these
I am fairly proficient in CSS but now I am running into a very strange rendering issue in Google Chrome 9. I am trying to create some fancy looking link buttons (basically heavily styled anchors). Here is some example markup:
<a href="" class="button">
<figure class="sprite icon icon_back"></figure>
Link button with icon</a>
This markup may look a litte strange to you, there's a few things you should know:
I am using HTML5's figure class to include an icon as part of the button. I have the proper reset CSS applied and Chrome can render this tag for sure.
Instead of actually pointing to an image I am applying CSS classes to the figure element. Within the CSS I am using the spriting technique to show the correct portion of a single large sprite image.
All of this is working fine in Firefox, and actually also in Chrome. The correct rendering can be seen in the following image:
It renders like that in both Firefox and Chrome. Here comes the problem, if I place such a button within paragraph tags > <p></p> this is what happens in Chrome only:
Notice how the button is ripped apart? Only in Chrome and only when placed inside a paragraph. It gets even stranger: this only happens for the first button inside the paragraph, if I would place three buttons inside a paragraph, only the 1st one is screwed up.
Your first question would probably be about the CSS. It is rather verbose so hereby a temporary link to the page in question:
Edit: link to live page removed, was only temporary for problem inspection.
I believe that Chrome is automatically closing your <p> tag, because of the way chrome interprets the <figure> tag. If you look at the definition of the figure tag, you'll see it's supposed to be outside the flow of the content, and thus should not be contained within a paragraph. Try using a different item than figure, and I bet it will work.
You can read more about flow content here
As of Chrome 10, your site may be even more messed up.
In Chrome 9 (and Firefox 3.6 and Opera 11), <figure> has no margin.
In Chrome 10, it has margin:1em 40px;
In Firefox 4 RC1, the margin looks similar, but I'm not sure if it's the same - Firebug Lite doesn't list the margin.