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
Related
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>
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.
The page in question is here: http://www.allweatherwood.com/test-page/
If you look at it in Internet Explorer or Firefox, you should find that it looks perfectly fine. But in Chrome, for some reason, it is a completely different animal. What in the world is going on? It looks like the navigation area is getting bumped down slightly, and that is causing the strange issue with the main content area being moved to the right side of the page? And why is only a small sliver of that area being shown? I am positively stumped. Have tried looking at the code and I just can't figure out where the issue is.
CSS can be found here: http://www.allweatherwood.com/wp-content/themes/allweatherwood/style.css
Any help on this is MUCH appreciated!
If you set width: 960px; or even width: inherit to your content-wrapper div it looks alright. For whatever reason, webkit isn't calculating the width of that div they way it's expected when it's overflow is set to hidden.
Perhaps someone knows exactly why?
The elements in the main menu are all float:left, and so the content floated on to these elements. Insert
<div style="clear: both"></div>
after the header to stop further elements from floating.
By the way, if you declare your HTML as XHTML 1.0, please serve valid XHTML 1.0.
I have this small testcase: http://jsfiddle.net/sV8js/
You can see that in Chrome (tested on win7 11.0.696.68) the first 2 links right border is "cut off" and is not shown. FF and IE 7/8/9 seem to show it OK.
Browsershots: http://browsershots.org/http://top3skills.com/1.html
Also "buggy" on Safari (so it's webkit related?)
Anyone knows what's the problem with this approach or how to solve this?
(or if I should report a bug to chrome) Any workaround that doesn't affect other browsers?
Also, my testcase is different from Right border not displaying on google chrome but maybe it's the same bug?
Updated: I don't want to use inline-block as IE7 doesn't support it and I'm finding this bug because I'm removing the inline-block I previously had there :) Also this is dynamic so it's not easy to add after each link because some links can break to a new line, others don't... so I'm trying first to get the "right way" and then resort to more "tricky" ways.
You have set the containing DIV at a fixed width of 250px. This is cutting off the edges. Also, you should add display:inline-block; to your CSS link class. This will make your link a block element while keeping it inline. It will also apply the padding you have asigned properly.
See updated link here http://jsfiddle.net/sV8js/12/
Dan
Try giving those links a display: inline-block or display: block property, as links are inline elements.
you need to add display: block to .referencesSkills
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.