My brain is overflow about this issue, so let me share my frustration in order to look for someone having the same experience and, luckily, finding a solution.
The thing is the following:
http://jsfiddle.net/w4d2E/
In chrome, percentages work fine, but when trying the same in Firefox (latest version) the content div is not expanding horizontally and vertically anymore.
I've analyzed every similar question over here, but I can't find any valid answer.
Thanks in advance
P.S.: I've tried to use block display instead of the 'box' one in the 'content' layer, but still having the same behavior.
You're using XUL box layout. I suggest not doing that. -moz-box is NOT CSS flexbox layout, as you seem to think.
The problem here is display: -moz-box for body. If you remove it everything works fine. It appears to be a bug, so I suggest filing a report in the bug tracker.
Related
Hi i am having some trouble getting my sortable lists to scroll horizontally. Here is a link to an example of how i want my list to function.
The example above uses a very large negative margin to the right like so...
margin-right:-30000px;
And here is the link to the Js-Fiddle version of my sortable list.
i have tried everything i know! Overflow properties, margins, divs within divs but i have had no luck. Searched around on Google to but everything i found just told me what i already know.
Hopefully someone on here has done this before or knows how to and would like to share their secrets with me...
I have decided to divert from horizontal side scrolling for now as it just doesn't seem to have enough support at the moment. For anyone looking for a solution i found this neat plugin that is highly customizable. http://manos.malihu.gr/tuts/custom-scrollbar-plugin/complete_examples.html
Works fine in firefox but displaying bottom left in ie9
I assume it's either something to do with css in ie9 or the DOCTYPE?
Any help appreciated. The site this is happening on is below.
http://bydezign.co.nz/Products/Chairs/ManoliChair.aspx
Where to begin
Okay lets start with validation
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbydezign.co.nz%2FProducts%2FChairs%2FManoliChair.aspx
Now a lot of those errors are I think as a result of not adhering to your transistional doctype. I always go xhtml1 BUT you may have your reasons for the transistional (though I can't believe anyone worth their salt nowadays would not use xhtml as it is pretty much the standard.
Sorting your doctype MAY (and probably will) solve your rendering issues but if it doesn't I would look at your use of tables for layout. This is a very big 'no-no'. You should be using divs and css for layout. It will give you much better design capabilities. Tables are not semantically correct to use for layout - they are for displaying tabular data.
Fix these first and see if that solves your issue (99% confident just the doctype and getting it through validation will resolve the issue
I'm building a new site for myself as freelancer. I'm planning to use the cycle plugin in the header but I'm experiencing a small problem.
I wrote HTML and CSS for de items that need to be cycled. Each div.feature inside div#featured should be cycled. A div.feature exist of an image and a div.info. They are both floated left, so they would appear next to eachother.
After writing the HTML and CSS I wrote the Jquery and when I test the page I see the first div.feature perfectly displayed, but after the first cycle all the floats seem to go wrong.
You can check it here: http://webstudions.be/projects/layout6/
Also chrome and safari seem the make another mistake as firefox, ie9 and opera.
Does anybody has an idea of how I should fix this or how I could get this to work??
In your CSS Try adding the following line to your elements style:
clear: both;
This generally fixes my float problems.
All I can say is my layout went crazy in IE8 and I cannot see why. Of course, it looks correct in other current browsers. I have spent many hours trying to figure it out but when I make any changes, they do not fix this issue and send everything haywire in the other browsers. Can someone please take a look? This one is beyond me!
The page:
http://www.careersinmusic.com/sell-my-music.aspx
MANY thanks!!!!
Rich
well first of all 'jQuery' is undefined on line 132?
The main issue I can see in debugging your IE8 Compatability Mode On code is your lack of clears on the floats.
You should look into how CSS does floating, you must clear the float afterwards otherwise things can get really janky.
To clear a float you put in:
<div style="clear: both;"></div>
That will clear both left and right float (eg starting a new section). To just clear one of the floats you can do clear: left; or clear: right;
Here's a tutorial on floats with CSS:
http://css.maxdesign.com.au/floatutorial/
Also....honestly....the html and css are a mess. I can barely tell what is going on in some of it....allthough that might just be the asp.net adding in magic to try and 'help' you.
This is probably an easy fix, but I'm stumped. Here's the URL: http://urgent.mchenry.edu
First off, underneath the urgent.mchenry.edu text box in the header is an h2 w/ class="caps" and text that says "Official McHenry County College Update". However, it absolutely disappears in IE7. Gone.
I tweaked the ie.css with !important declarations, but still, no go. What gives?
Secondly, in FF, the same h2 has some weird a:hover states, despite the fact that there's NOT an anchor tag in the source code, but FF inserts its own. Use Firebug and see what I'm talking about.
Any help on the above two points would be greatly appreciated. BTW, I'm running XP/FF 3.5 and IE8.
The problem with the hover state is easy to fix - your closing tag on the urgent.mchenry.edu link is <a/> instead of </a>. I suspect this may fix your other issues too.