I am having a problem occurring only in Firefox for Windows (although I admit I am using Browserlab to test, and crossing my fingers it is accurate!)
The test page is here: http://carolineelisa.com/rkl/index2.html
Currently in FF3-4 the grey background to the footer is not the full width of the page. Sometimes it is the width of the main left hand column above it, but sometimes wider...
I have tried giving it a width of 100%, using clear fixes, removing floats from its child divs and even the columns above it, removing scripts from the page, all with no luck.
Any ideas on how to fix this? Thanks in advance.
You should give the footer element a min-width of 930px (which is your main contents width) so that it does not inherit from the body.
The problem you describe only happens (in my windows and FF) when the page is re-sized and the horizontal scrollbar appears.
Related
There is a strange behaviour in one of my installations with ImpressPages: Not all pages have the same width.
I'm using the default theme "Air".
The installation is at
http://www.impresspages.ch
It is the page "Link" that has not the same width as the other pages.
Any idea what causes this?
Your website looks normal. Maybe you see that center content goes slightly to the left on that page? If that's the case, it means that on your screen that page gets a visible scrollbar. And the browser you use hides/shows the scrollbar only when it's needed. For that reason the area for the page shrinks and automated centering ends up on a different position.
I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure.
http://goo.gl/v1GVWk
if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck.
Please help me. ..
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
Background
I have a standard three column layout where the first column is floated left, and the third column is floated right. The first column needs a full-height background.
This layout is for a template, so any of the three columns could have the longest content.
I can't change markup source order, so display:table solutions are not possible.
I can't add any DOM nodes.
The layout is centered with a minimum and maximum width, so I can't attach a vertically-repeating background image to the page with the built-in background color.
It needs to look OK in IE7, but IE8+ needs support.
Solution
To achieve the full-height left column, I created a pseudo-element on colLeft. That pseudo-element has fixed-positioning set to the viewport bottom, 100% height, and placed behind the left column. This solution is awesome because:
IE8+ supports pseudo-elements.
The pseudo-element is attached to the left column, so if the template doesn't have a left column, the background naturally isn't there.
By not setting a left or right attribute, the fixed-positioned pseudo-element stays with the left column (good for the centered layout).
Here's an example on CodePen.
(Make sure that the Document Mode is following the Browser Mode when viewing CodePens in IE).
Problem
In IE8 the full-height left column background only extends down to the initial viewport bottom (the fold).
I created another test with a new leftColBg node instead of the pseudo-element. This works as expected in IE8, meaning that the fixed positioning should work.
Here is the best explanation that I can find on IE8 and generated content: Why does a filter gradient on a pseudo element not work in IE8?
I think IE8 is incorrectly positioning the generated content, because it's not an "object" that contains content. Can anybody better explain this IE8 bug? Is there a fix?
I have buttons in different sizes and different colours in one sprite, using sliding doors technique, everything is fine in all major browsers but, when I am trying to run this in IE7, IE8 , everything seems fine, except :active state, it only works in the right corner of the button. Any suggestions ? url: http://www.dmitree.com/temp/cb/buttons2/buttons2.html
Inside anchor class"button" you have span. you have applied height as well as line height properties on this span. I guess If you remove height and only keep line height will resolve your issue.
but Please check in other browsers too. as removing height for IE may or may not affect other browsers.
additional resource: http://www.jankoatwarpspeed.com/make-fancy-buttons-using-css-sliding-doors-technique/
hope this helps
i'm suffering some odd changes in margin when viewing my page in IE8 compatibility mode (ie7). Specifically in 2 areas. The Primary navigation and the footer.
As you can see the navigation is experiencing a much larger margin from the left then what is seen in IE8/FF/Chrome/Safari
http://demo.carbonium.no/iebug1.png
Below the advertising there is supposed to be space. This problem persists in all IE browsers but not in FF/Chrome/Safari
Here is a link to the actual site
Alright, i found a work around to the problem i was having with the navigation. Using absolute positioning and Z-index:1; to take the element out of the natural document flow solved the problem. Also it would seam that replacing margins with padding can to some degree give you the same result. Either way i am still confused as to why IE7 causes this particular issue.