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.
Related
I’ve got a flexbox problem that occurs in Safari and Opera (probably Chrome also, haven’t checked). In Firefox everything looks as it’s supposed to. Here is the link: http://corvinweber.de/download/v5/
When you scroll down to the bottom of the page you’ll find the reply form. I want the fieldsets “.message” and “.senderforms” to be displayed next to each other, just like Firefox does it. However in Safari and Opera “.message” expands in width and “.senderform” gets pushed to the next line. Strangely, if I set the width of “.message” to 50 px “.senderforms” still gets pushed to the next line. The developer tool indicates that there’s a margin added to the right, although “margin-right” is set to 0.
I have also tried to use the -webkit-prefixed version of flexbox, but it didn’t help.
It’s probably just a small adjustment in the css, to make it work, but I can’t figure it out. Can someone help, please?
Obviously the fieldset nested in another fieldset was the problem. I turned the outer one into a form and it worked.
I'm working on a new website design and everything seems to be working on chrome, yet on internet explorer (only the newest version, it seems), there is a ton of white space added on top of the website.
Basically on IE, it almost looks like I had 500px of padding-top. But it displays perfectly on chrome.
The current URL is cspclaw.com
Thanks.
I posted the entire main page HTML here: http://pastebin.com/eDmfuRWK
And the entire main page CSS here: http://pastebin.com/GK3TRtx4
Seems to be an IE bug to me.
It calculates the height of the <tr> through the height of the contents of the highest <td>, disregarding the rowspan="2".
If you remove the rowspan attribute, you can kind of see why it's doing what it's doing.
The problem for IE is that every single <td> in your second row (the row containing the <div class="fadein">-cells) has rowspan="2". Remove that, and the page will no longer show that odd margin/padding in IE.
It still doesn't look the same, my guess is more rogue rowspans... :)
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;
Look at this fiddle in any browser other than Safari. You should see 3 red blocks next to each other with a margin of 5 pixels to the right of each block.
If you look at the same fiddle in Safari and you see much more spacing between the blocks. It seems the width of the text nodes are included (try removing overflow: hidden).
Strangely I couldn't find anything about this anywhere.
Does anyone know how to fix this so the blocks look the same in Safari as any other browser?
Try font-size: 0px to get it looking the same in Safari.
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