So I've got a nice floated form layout that works beautifully in FF and Chrome, but not IE (shock, horror!):
So, off to testing I go and the first shot across the bow is to add in a 1px pink border to the FIELDSET on IE to see where it's borders lay, and this is what I get:
...neat IE, neat. So I remember something about "display" triggering something or other in IE's layout engine to make stuff behave like they should, so I'm off to see the Google. But it seems the hasLayout stuff is an IE7-ism.
Specifics are thus-ly: The element not positioning correctly is a FIELDSET. It only has a single CSS attribute against it; "white-space: nowrap;" (tags underneath it are styled with floats). Adding the "new" clearfix doesn't work.
So.. anyone have any ideas on what the heck is going on in IE? Also, as an aside, the conditional statements don't seem to be working for me (...) which is also just weird.
Agh... the warmth and glow of remembering why I hate IE so very, very much...
Isn't it always the way? You take the time to do a write-up for StackOverflow, and as you post it something comes into focus that you didn't see before?
So... it seems that the cause of this is related to IE9 not setting a width during the render. When the border was put on the FIELDSET it forced a width of at least 2px which was enough to force the wrap. Setting a width of 0px still caused the issue, but with a width of 1px (or more) it wrapped as expected. In the end I simply added in a "clear: left" to the CSS class (which is arguably proper anyway as that is what I expect) and all was again right in the world.
So... in some cases, it seems that IE9 will not set a width on a rendering (rendered?) element (a FIELDSET in this case). This probably has something to do with the hasLayout stuff, but I'm not 100% certain. This may have been caused by the fact that all elements within the FIELDSET are being FLOAT'd left.
Related
I have padding: 0 40px 0 40px on the main element of each page.
In chrome, the layout looks correct with the correct padding. Here the image shows the correct padding using the developer tools.
http://imgur.com/BButZht,TuOHanN
However in IE and safari, the padding is not present and the text/image are shifted to the outer body element.
http://imgur.com/BButZht,TuOHanN#1
I cant figure out why this is happening. The IE developer tools don't help me much either
Same padding issues for the home page and category pages.
www.luminoto.com
Thanks
IE does not have display:block in its browser stylesheet for the main element, so you have to add it explicitly in your stylesheet – otherwise it’ll just be treated as an inline element (and all the content will just “flow out” of it).
You can add it directly to your formatting for .photo_main – although the better place to do this would be inside a “reset” stylesheet meant to equalize such browser differences.
Not sure if that’s the same issue Safari is facing, but give it a try and see if it fixes that as well.
I am using a custom scrollbar for webkit browsers. The thing is that when the browser supports webkit. I want it to remove the border I have around the entire body.
I got it to work by using -webkit-box-sizing on the right div and a negative margin value as you can see in the fiddle: http://jsfiddle.net/Yfw49/1/
And it works really great except for browsers that supports box-sizing but not webkit scrollbars. For example mobile browsers that don't have scrollbars at all.
Is there a way to make it work? I tried a jQuery method that asked if the browser supported webkit, and if so, remove the div. But that made the div appear for a short while and then removed it. It looked bad.
Please have a look at the jsfiddle http://jsfiddle.net/Yfw49/1/
(I know I could make the markup cleaner without all the elements. But let's focus on the other problem)
I am trying to get this registration form to look consistent across all of the major browsers, or at least Firefox and Chrome.
http://www.lukaspleva.com/MoneyThink/new_mentor_application.html
It looks GREAT in Chrome, especially as far as the spacing between all of the input fields is concerned (it's equal). In Firefox, though, the spacing/padding is kind of all over the place.
Any idea how to fix this issue?
You already have each input/label in td-s, so either give td-s widths (if the input is 100px wide, make its td 120px wide), either increase the table's cellspacing property. However, using tables for layout is not recommended. Use CSS floats and padding/margins instead.
In my first attempt at a responsive web design I have run into a curious problem. When I resize my browser down to 615px width or less, a horizontal scroll bar appears. I'm not sure what element is causing this. I tried putting a border around each element using
* {
border:1px solid #FFF;
}
to help me visualize where the edges of the elements were but I don't see any borders extending beyond the window boundaries.
Can someone take a look at my site and give me some insight? http://www.ritualbliss.ca
Thanks!
Edit: So I only get the scroll bar in Firefox. Chrome works fine and the desktop version of Safari but on my iPhone it scrolls horizontally.
Edit: the site is for a legitimate massage business but some may consider the picture NSFW
Devin,
Try using a tool like Firebug for Firefox, IE Developer Tools, or the Chrome Developer tools. I'm sure Safari and Opera have similar tools, as well. These things will give you the ability to highlight and view the various properties of every visible HTML element on the page, including Javascript and CSS information.
One other thing to think about is not using the * selector in your CSS. I am not sure why you would want to put a border around every single element on your page because to me, that would not look visually appealing. The border style attribute adds the thickness of the border to whichever dimensions it is applied to. So, in your case, every element in your page has 2px added to both its height and width, even the "html" element. This could be why you have the scroll bar but can't tell where the extra pixels are.
Also, do you have any CSS styles that set a width or min-width to 617 pixels? Or a combination of elements that share the same area and add up to 617 pixels? Maybe a table with columns that are not shrinkable?
There is a lot to look at and your URL looks like it's probably porno or something so I cannot go there at work and check it out...
Good Luck,
Matt
Edit
I fooled around with firebug for a few minutes and agree with Ruben that handling the overflow would be a good idea. Although I think the setting should be on the body instead of #content.
Try this:
body { overflow-x: hidden; }
Like Ruben's answer it is hiding overflow, but you can still get the vertical scrollbar if people REALLY narrow down their browser.
can you please warn us when it's nsfw :s
use this css:
#content { overflow: hidden }
not the best solution but you have to use firebug to find out what's sticking out
padding and borders increase the width of your element too
css3 box-sizing:border-box solved this one.
I have a problem with our website at www.eat.vn. The site is fine in Firefox, Chrome, IE8 & IE9 and Safari, but in IE6 and IE7 we have a problem with a main design element.
Please see the attached image and you will understand that the stacking effect on the tabs is not what I wanted. I have tried to work around this bug, but can't manage to find a solution which does not mess up anything in the other browsers. Any help would be much appreciated!
I don't have IE6 or IE7 to hand to test this, so I'm shooting in the dark somewhat.
My guess is that the issue is related to the container element for the tabs (<div id="steps">). This has a style of float:left;, which I don't believe is necessary; it doesn't need to be floated since it doesn't have any other elements next to it.
However this float may be causing the IE6/7 bug; it looks as if this element has decided that it should only be as wide as one of the tabs inside it, which is then causing the tabs to wrap beneath each other.
I would therefore suggest taking the float:left away from this container element, and see if that helps.
(The tab elements inside it should still be floated, of course)