Currently, my site works perfectly in Firefox, IE, and Safari, but one portion does not work in Chrome.
Take a look at: http://tinyurl . com/chxg2tb
The table at the bottom expands beyond the content border in Chrome, instead of expanding the border like in Firefox, IE and Safari.
This has me stumped because usually errors like these happen with Firefox and IE working fine, and then the webkit browsers don't work, but in this case it is just Chrome.
For some reason the table doesn't expand the parent div, and I don't know why.
The only thing I could think of is something with overflow, but I haven't been able to get it to cooperate.
thats NOT the best solution but you can just create a div that wraps the table and set the div css like this:
height: 120px;
Related
Heloo.
I have problem with multiple DIV elements in google chrome. if those have display:inline-block, sometimes chrome still keeps breaking line. Everything works fine in Firefox, Opera and IE, but not in chrome.
try visiting this page:
http://tridex.pl/kategoria/%2A00/Nowosci.html?typ_listy=4
This is shop. There are 2 similar item layout styles, one with 3 items in row, one with "as many as will fit on your screen" in row. Everything works as it should in Firefox, IE, Opera... but Chrome displays 2 items in first line and 3 in each another.
Layout is modified on the fly, so maybe this is the problem? But since it works in all other browsers, why it does not in Chrome? Should i call something to tell Chrome to recalculate DIV width and rearrage those?
Does anyone have any idea how does it work in Chrome? Is there something else i should
Setting the width style of the parent element a bit wider helped me, looks like the elements need more room in Chrome.
It doesn't work for me in Firefox either... however this seems to be the issue.
<div id="prawy_div" style="width: 564px; left: 273px; position: relative;">
If I change its width to what it starts out as... 680px, Everything looks fine. A script is changing it for some reason, and boy does it want to change it... seems to be attached to your scroll event.
So i've worked hard on this website and got to the point where its actually done, however its not working properly on firefox then it does on Chrome/ safari etc. On the contact page the text fields overlap the right column.
The home page doesnt stretch down far enough then in chrome and safari.
What do I do to fix this problem
The website: http://www.growinhealth.org.uk/contact.php
I am still learning HTML/CSS so please go easy.
Thanks
Different browsers handle widths of input fields differently, so I would add a class to the input tags and textarea tag that you want to fix the width of like so:
<input class='yourClass'></input>
<textarea class='yourClass'></textarea>
Then fix the width in the CSS
.yourClass{width:300px}
As for your homepage, it seems that in Firefox the div you call "content1" is too short, so I would put in the CSS
#content1{height:1400px}
I'm having a problem with floating a container to the right in IE7. Everything looks fine in IE8+, Firefox, Chrome, and Safari but the elements within the container wrap for some reason in IE7.
I've set up a fiddle at http://jsfiddle.net/aagC9/. The problem I'm seeing is visible in the IE7 Browser Mode/Document Mode found in IE9 (it's also in IE7 on XP but I figured this would be easier for people to check out).
While it seems like many people have run into similar problems, their solutions haven't worked for me. I've tried adding overflow: hidden and overflow: visible to both the container and elements in various combinations. I also tried setting a fixed width on the .message container, but that didn't seem to have any effect either. While I could just use a fixed left margin on .message, it doesn't work 100% since the IE7 doesn't support the box-sizing model.
Does anybody know the secret to getting this to work in IE7 with the float?
Thanks!
It has to do with your reliance on display:inline-block; which IE7 supports, just not always correctly. Actually, fix for it is pretty gross. But, as in this updated fiddle, it works.
I've been searching about this issue for a couple of days. But as the problems are spesific, so the solutions usually are. My problem is kinda common but the solutions I found so far didn't work for me.
I use a #header div which is around 30 px height. Under that div, I have 3 divs like left, center and right. I have an accordion menu with js in the left div, content place in center, and last tweets script in the right div. Since I added box-shadow to #header div, other div's under it are placed after where shadow ends. I used z-index to make header div's shadow place on other div's, and it works perfectly in Firefox, Safari, Chrome, even IE9! But when I try in older versions of IE, it just happens the way I tell. Here is a screenshot: http://www.twitpic.com/4kh9w3
Like I just said, I have "last 2 tweets" script in the right div. It fills < ul> < li> items with tweets and shows them. So that I can design this list in my css file. And same, it only doesn't work for IE7&8. I don't even mention 6, it's not so important. The problem is that IE automatically scrolls list items to left. So half of them disappear! Here is the screenshot: http://www.twitpic.com/4khajz
So, what can I do to save my view in Firefox, Chrome etc. and also can fix it in Internet Explorer 7&8?
I'm not sure if i understand your problem... but if you cant get shadows to work try looking here http://css3please.com
There's supposed to be an image in the center under the text "GIANT MANGO". It shows in Firefox, Chrome, and IE, but it does not show in the Safari browser.
http://giantmango.com/vote-for-artist-charity-contest-44-2581
How to solve this problem?
It doesn't show up initially with Chrome 9 on Linux either. If you drill down through the developer tools, the computed style for that image shows its height and width to be 1px in both directions. If I remove the max-height: 100% from the div.post-body p img, div.post-body p object rule, the image appears.
While I can't explain this (I haven't the time to look at it in-depth) I hope this puts you on the right track towards debugging this.
On the single-wrapper div, is there a padding-top of 1000px coming in somehow, that's pushing the contained div down? (the image appears in my safari, it's just far down the page).