I have a script that lets you put a link at the bottom of some text so you can reveal more text. It works great in Firefox. When you click the link, the div appears and the other parent divs expand with the growing child div. But the parent divs don't expand in IE. The text actually disappears behind the row (this is in a table created with divs) below. I want it to push the next row down so that the rest of the text appears.
Also, my images seem larger in IE than they are in Firefox. Can I scale the images a little bit with a conditional statement? If so, how?
Have you considered using something like the JQuery Accordion? It's a quick way to accomplish something like you're going for, if I understand correctly.
you have more than one problem, anyway images with fixed sizes should render the same across browsers. For the first problem with the link you should post some code. I suggest you to check if your script throws some errors in IE using the IE developer toolbar (bundled with IE8 or downlodable here from Microsoft)
Related
Im developing a website for my boss and have been noticing weird behavior, after looking closer i corrected my div tags.
Now when I examine my webPage it shows my imageGallery div borders Overlapping my content Div, It still displays most content properly but is confusing me greatly and i want to solve it before moving on.
http://2286bowmanroad.com/
ctrl+shift+i on chrome under elements if you highlight ImageGallery you will see it is also behind content but must be bellow.
Lots of Googling has been tried and trial and error with positioning and fixing div tags this is the only set of divs causing issue and i cant tell why.
I want my image gallery div to be completely bellow the content div but above the footer
I think it is because you gave float: left to the class content. I am sure you gave it for some reason, but moment you remove it, it'll be fine.
DISCLAIMER: I have searched this topic to no avail, this seems to be a Chrome only issue.
Safari for OSX and Firefox OSX work fine.
So I have some styles for an element which do not dynamically apply, i.e. on page load it works fine but as i use the page, it doesn't.
Here's a pen to demonstrate:
http://codepen.io/craig-wayne01/pen/xcIid
and the selector thats giving me the problem is this one
label.pagination:first-of-type,
label.pagination:last-of-type,
input.pagination[type=radio]:checked+label.pagination,
input.pagination[type=radio]:checked+label.pagination+input[type=radio].pagination+label.pagination
So basically this is an example of a pagination footer area
and what im trying to achieve is simply changing the colour of the next number
so if i click on #4, #5 needs to change colour as well
which doesn't work.
Then pen is quite self explanatory. Additionally I can't fathom why this doesn't work. Any help would be greatly appreciated
The only thing i can think of is that css does not work backwards, but i've used similar selectors in the past and i've had no issue.
From my experience attempting something similar for a CSS only mobile menu, checking or focusing elements doesn't force a redraw for sibling elements. I had this trouble on the iPad.
I'm helping out a friend with an issue with their blog, and can't for the life of me figure out the error.
http://theglamshack.blogspot.com/
Somewhere within the code, between the body it is managing to place 50000 or so pixels. I can't manage to locate WHERE it is coming from, aside from the fact that body min-height is 100% (which I cant find anywhere in the code at all.. ) I can't find any error.
If I could get some help tha'td be great!
Under #sidebar-wrapper-left, the div that has classes "widget-content list-label-widget-content" is the one causing the issue.
Every for every list item contained in the unordered list is adding a few hundred pixels to the height. All of them added up is how you get a height of 50K.
The strange part is, the left-sidebar isn't really visible. If you don't need the left sidebar you could just set #sidebar-wrapper-left to display:none to see how it looks until you figure out how to remove it from the layout altogether.
Update:
It's easy to diagnose this using Chrome. Right click on the blank section below the body and hit 'Inspect Element' then mouseover the HTML elements in the code and their width/height values will popup.
Keep moving down the list until you find the lowest element that has a width > 50K and that shows you the section causing the problem (ie the one I outlined above).
Check the DIV sidebar-wrapper-left and the other divs/content inside CSS inside it. Use FireBug a debugging tool to find out more info on what's wrong.
You have "Label Widget" that is causing that problem. Remove it from your layout and you should be fine.
I've read quite some posts about webkit browsers having issues with images. I couldn't find a post and thus an answer for the one I'm about to explain.
I created a home-made slideshow using jQuery that basically places all the images next to each other on a row and I then play with a mask element (overflow: hidden) and the margin-left property to select which one is to be displayed. I didn't reinvent the wheel...
On FF, Opera and even IE, it works like a charm! But I have no luck on Chrome (I didn't test Safari) : the first image shows ok but when the sliding effect kicks in, 20px-ish of the first slide remains at the top of the slideshow and overlay the second slide. If I carry on sliding, the first slide part remains as an overlay on the following slides. The images don't refresh ok on Chrome which makes the whole slideshow look rubbish.
I tried to play with the images css properties after the sliding effect to kind of force the container to refresh its content but again, no luck.
Does anybody have an idea on how to work that out?
Thank you
Found the fix...
As I said, trying to force the container to refresh its content using some different css properties didn't work.
What worked though was to add a span to the container, that's it... At the time of the issue, my container only had images in it and a map. I added a span (out of luck) and it worked straight away!
I can only assume why adding a span makes the whole container behave ok. I guess it is kind of the same than the "hasLayout" property IE6 used to throw at geeks. It couldn't render the element properly until it had an element that had a consistency (height, width ... set with a value).
Anyway, I hope this will help and yes, I did dare to compare Chrome to IE6... ;-)
Good day
I'm experimenting with the latest CSS3 box model to enable my layout to dynamically resize as the page resizes. The problem is that in Firefox 3.6 (works perfectly in Chrome) my drag and drop gets a bug. I'm not sure if it's a firefox, Jquery or my own error? But what it looks like is the position of the cloned object i'm dragging is receiving 30px extra for pos.left.
That means that when I drop my button into the tabbed area it isn't locked properly inside the draggable area which is #page1. Rather, it seems like there is 30px of extra margin which the button is mysteriously residing in. When I drag my button to the bottom of the page, because of this 'margin' it appears to float outside of page1 and the tab content.
Moreover, if I use firebug to outline the containers, they all look properly sized (no funny overflow or anything like that). However, if I take out the box model code inside outer-container, tab-content, page1, footer and manually set the tab-content height to say, 800px then the bug goes away.
It seems to be happening here:
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
my code is here:
http://jsfiddle.net/yLCZb/5/
any ideas?? I'd love to use this box model technique if i could get it to work in FF..
I'm not a jquery guy, but it looks like your mixing & matching of doctypes is confusing FireFox. Try the vanilla HTML5 doctype declaration:
<!DOCTYPE html>
You should also lose the XHTML constructs and the "language" attribute from your <script> tag.
HTH!