Please see this fiddle:
http://jsfiddle.net/VaBCd/
...view in Chrome (I've got v14) and then any other browser.
Notice how in Chrome the text is failing to break at the right place with respect to the 2nd div, which has {float:right;clear:both}.
What's the best (preferably non-hack) way to deal with this so as to provide a consistent layout across browsers with the greatest flexibility?
Related
I have a very specific layout to achieve with HTML/CSS. Basically I have a text container with a couple of left-floated boxes within. I then have a footer which needs to overlap this text container by a few pixels at the bottom. I'm achieving this by using a negative top margin on the footer, and setting position:relative and z-index on the text container and footer to make the footer layer stack above the text container.
It can be best demonstrated in a fiddle: http://jsfiddle.net/sW9cu/2/.
The issue is that in IE9 and Firefox 18 the content of the footer clears the content of the text boxes, whereas in Chrome the content of the footer overlays the content of the text boxes without any clearing.
I basically need this to be consistent in IE7+, Firefox and Chrome, one way or the other. Not bothered which way - it can either clear or overlap, but it needs to behave the same regardless of browser.
Can anyone see why it's doing this and how to rectify it? It may be to do with the micro clear fix I'm using on the text container, but I'm really not sure.
Thanks for any pointers folks - this one has me stumped!
Sorted. I couldn't overcome the issue with the current mark-up but by removing the negative top position and adding an absolutely positioned div inside the footer with a negative top value (top: -20px;) that has achieved what I'm looking for. See: http://jsfiddle.net/sW9cu/4/.
As I know, the answer would be WebKit in CSS
Internet Explorer, Firefox and WebKit are three different things.
Webkit is used by Safari and Chrome.
moz is for Mozilla
o is for Opera
"normal" is for Internet Explorer.
You can read more about here
I have a ul with lis inside that I'm using as a tab list. The lis have an image and some text inside of them. For some reason, in chrome, the text doesn't appear on the same line as the image, but wraps to the next line.
I can't understand why this would happen, shouldn't the li expand to give enough space to fit both the image and the text? This problem doesn't happen on Firefox or IE. Testing with Chrome 22, Firefox 16 and IE 9 on Windows 7.
See this fiddle to see the markup (extracted from a longer page - also not the real icons).
It sounds similar to this problem, but the nowrap trick didn't work for me.
Update: I just realized I had a different zoom level set, 144%. At some zoom levels the issue happens, and others it does not. I guess it might have something to do with the ems for some sizes, and px for others? I still don't get why this would happen though, shouldn't it still get the proper amount of room?
Set a minimum width on the header. You also have the issue if you reduce the browser size. Figure out how small it can go before it starts to stack and set the min-width on the header to that size, that fixes it if the browser is zoomed too.
I'm using css gradients and padding to simulate buttons around an anchor tag. The problem I am running into is that firefox seems to make the button 3 pixels larger. 1 pixel on top and 2 on bottom. This seems to happen with not only the example i posted but everywhere on the page where i use the padding. I put up and example at http://wemw.net/example.php. In firefox the button top and bottom line up perfectly with the search box, but in chrome as i said its off by 1 pixel on top and 2 on bottom. I am using the w3 transitional(tried strict as well) doctype and a css reset. In the reset all anchor tags are set to padding: 0, so I'm confused as to why this extra padding is being added. Is there a workaround to this or is it just something you have to deal with when working with gecko and webkit browsers?
EDIT: So I logged over to windows and it is appearing the same in both browsers now. I'm assuming it is OS specific problems? Since no where near as many people use linux I'm going to change the padding to make it work, but in the interest of consistency can anyone offer a solution for cross-os cross-browser solutions? I do not own a mac and cannot easily test it there, but if windows/linux can have problems with the same versions of the same browsers is it safe to assume mac could also have issues i am unaware of?
It's not the padding on the anchor tag, it's the size of the text box that is inconsistent. <input> elements always caused such problems for me too, and I always found it extremely tedious to align them together nicely (you haven't yet seen it in IE8, have you?). I think that the easiest cross-browser solution here would be to remove the border from the text box and use a background image instead (or better yet, a background image on the element containing the text box) properly aligned with the button.
I'm work on the CSS for a page and I can't fathom out what is going on with my floated left divs and the effect it is having on the image floated right.
http://www3.nottinghamshire.gov.uk/enjoying/countryside/countryparks/sherwood/schoolvisitsherwoodforest/
If you look at the code you'll see that the image on the page (the tour guide talking to the kids) appears directly after the first paragraph on the page. Yet it always appears level with the 3rd (and final) div that has been floated left.
This behaviour only seems to occur in the modern browsers IE8, IE9, FF, Chrome etc. IE6 and IE7 seem to deal with it in the way you'd expect.
I've been working with CSS for a number of years and was pretty confident that I could solve most CSS issues but I've been looking at this for 2 days and I can't figure out what is going on. Here's hoping that some SO experts can spot my errors and point me in the right direction.
The HTML is mainly from the CMS we are using, I don't normally nest my elements to such a great extent.
From the Visual formatting model specification,
Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
This means that when you float a div, it doesn't appear any more "top" then it would have despite the float. Without diving into the specifics of your situation, have you tried re-arranging the order of your divs such that the tour-guide image would naturally occur at the vertical position you would like and expect?
I know there's several questions on this already, but I cannot find a solution anywhere.
Basically, I have CSS styling the body to fullscreen with no scrolling. Within this are 2 divs, for sidebar (left) and content (will be a map control if I can get past this problem).
Within the left sidebar I have 2 divs (at the moment), one has a simple entry form for an address to search for (which can be set to a static height, 9ems or 100px), the second is intended to hold the results in a vertically scrolling list in the remaining space
I almost got there - IE 8, Firefox, Chrome, Safari, and Opera appeared all to be working fine - then, as our Corporate web team insist on IE6 compatibility (or at least the page should be usable), I tested it in IE6 - no scrollbars, and the list is extending beyond its parent div. Playing about a bit more with CSS, I get the scrollbar, but the div seems to be inheriting 100% height from the document.
So far I've been struggling for about 4 days with this, so any help or insight is appreciated.
Thank you
For situations where I absolutely really HAVE to support IE6, I use conditional comments to add extra HTML and CSS, and possibly hide other stuff. Making layouts for IE6, IMO, basically comes down to "whatever it takes" - ditch proper document structures, endulge in table-based layout, use spacer images, etc. etc. Especially sizes expressed as percentages are horribly broken in IE6 - whoever implemented them apparently didn't have the faintest idea what they were supposed to mean.