To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.
Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.
Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:
Firefox: http://i.imgur.com/mn3GIbT.png
Chrome: http://i.imgur.com/44jLC6J.png
If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.
Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.
The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!
Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)
Example code
<!--whitespace in HTML = renders as a space between the divs-->
<div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>
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.
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
You can see my issue here:
http://pmind.com/staging/123.html
I've tested this in Chrome, Safari, Firefox and Opera so I know it's not just an Internet Explorer wonky bug.
In the top right of the content, there are two text links, that are being hidden under the graphic. The <div> that contains the text links comes further down in the page, and my understanding was that that alone would make the z-index of the links such that they would be on top. But because that didn't do it, I set the z-index of the <div> containing the text links manually, which still didn't fix the problem.
One partial solution I found was to set the z-index of everything on the page but the <div> to -1. This however broke the roll-over functionality of the navigation items. I hate to ask something like this, and then it be some extremely simple issue I've just overlooked, but I'm at my wit's end.
Adding "position: relative;" to #top_links brings them to the front in Firefox. I haven't tested this in other browsers.
I have a simple problem but have not figured out what might be solution just yet. I used a css reset to fix the issue with internet explorer, but no dice. I also do not want to use relative - absolute positioning. If you go to http://securitycamerasflorida.net via firefox, chrome, or safari it looks the way I wanted which content and sidebar is next to each other. They are both positioned with float but if you click on one of the cities you can see in IE that sidebar is pushed at the bottom of the page.
Maybe this can help you: About Conditional Comments
Try putting a right margin on your <div id="content"> and remove the left margin from your <div id="sidebar">
You can a wacky double margin in IE6 when you put a margin in the same direction you're floating.