I'm struggling with a difference between WebKit and Firefox:
If one div (B) is nested in another (A) (both having CSS position absolute) but B is geometrically outside A. Desired look is what both WebKit and IExplorer do:
|---------------| Desired !! (Webkit,IExplorer)
|A |
| |
| |--|------|
| |B | |
| | | |
| |--|------|
| |
|---------------|
i.e. Chrome: shows B outside A, both have the expected border size
but Firefox: enlarges the border of A to go around.
|-----------------------| Firefox, why ... ???
|A |
| |
| |---------||
| |B ||
| | ||
| |---------||
| |
|-----------------------|
How can I force Firefox to behave like Chrome/Safari(and IExplorer) ?
Take a look at https://jsfiddle.net/r29knz8z/4/
Is this a Firefox bug ?
The problem in your case seems to be the CSS property outline. If you remove it and mark your boxes some other way (border, background-color or something like that), your example is displayed correctly in Firefox as well.
According to this article, though it's a few years old, Firefox has its problems with outline. So it might be a good idea to look into replacing it in your code.
Related
I have an HTML table with a column of cells containing two parts e.g.
| Cat (meow) |
+---------------------------+
| Long-dinosaur-name (roar) |
There are also other columns not shown. My users' browsers have unknown widths. On a wide one, I wish to show the cell as one line, as above. If it gets too narrow, I'm fine with wrapping
| Cat |
| (meow) |
+----------+
| Long- |
| dinosaur-|
| name |
| (roar) |
but if one line wraps, all lines must also wrap:
| Cat |
| (meow) |
+---------------------+
| Long-dinosaur-name |
| (roar) |
Without using Javascript, is it possible to do this?
I know I can use <td nowrap> to prevent wrapping, or <br> to force a wrap, but how can I make one cell depend on another?
Try using media query(CSS) with breakpoints. I know you said, the user browsers width's are unknown, but you can anticipate for different width's etc
I have a box which contains an image, which has float:left set, and textual contents.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | Content |
|--------- |
| |
| |
| |
--------------------------------------
Fig. 1
I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
--------------------------------------
Fig. 2
I'd rather have it the following way (at least for considerably short lists, let's assume the list is short for now)
-------------------------------------
|--------- |
|| | List |
|| Image | |
|| | 1. Item |
|--------- 2. Item |
| 3. Item |
| 4. Item |
| |
| Additional content (not in list) |
--------------------------------------
Fig. 3
I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)
However, in case of any long list items (longer than the small width of the content field),
the float is cleared.
-------------------------------------
|--------- |
|| | |
|| Image | |
|| | |
|--------- |
| 1. Item |
| 2. A very long item, which makes |
| the list box just as wide as the|
| outer box. |
| 3. More items |
-------------------------------------|
Fig. 4
Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won't fit. Lastly, the float is cleared.
Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?
Put the list inside a DIV that is also floated left with a defined width.
Try a plain overflow:hidden on your list - this should do the trick.
See the example.
I have one entire column of a table who's header consists of a question and in the following rows contains only a checkbox...
------------------------------------------------------
| Would you like this text to wrap ? | <rest of row> | <-- <th>
-------------------------------------+----------------
| [] + <rest of row> | <-- <tr>
-------------------------------------+----------------
| [] + <rest of row> | <-- <tr>
It looks unsightly to me. Can I use any markup to "encourage" browsers to render it like this...
---------------------------
| There, | |
| isn't | |
| that | <rest of row> | <-- <th>
| nicer? | |
----------+----------------
| [] | | <-- <tr>
----------+----------------
| [] | | <-- <tr>
----------+----------------
Please note that I do NOT want to force the browser into a particular rendering, just to suggest something - or to be told that it is not possible.
Any solution must work in MS IE 7.
I guess the best you can do is giving a width to the chosen th
here some example code: http://jsfiddle.net/karameloso/aMTNH/
Set width for that column like:
table#my-table th:first-child {width: 4em}
Here is an example
UPDATE.
Changed px to em's as Brock Adams suggests
I'm usually a Web technologies enthusiast, and I'm all for the no-tables-design thing, but right now, it's somewhat pissing me off. :/
I'm trying to achieve something that would have been extremely easy with tables, but that seems overly complex/impossible using floating elements. Look at the following:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
+-----------------+
Where #info has a fixed width, and must be floating right to #contents. #contents should take whatever's left of the width.
In the simple design where both #contents and #info are present, this isn't too complex. They are both fixed-width, have the float:left property, and fit very well.
However, on certain pages, #info won't be present. When it's the case, obviously, #contents doesn't scale to fit all the page.
The most obvious solution was to give #contents no fixed width so it'd scale, and change #info to be float:right. Past the minor other changes it required, it didn't have exactly the desired behavior, since it breaks the column-like layout when #contents is taller than #info:
+-----------------+ +-------+
| | | |
| #contents | | #info |
| | | |
| | +-------+
| +---------+
| |
+---------------------------+
Even worse, inside #contents, there are other <div>s with the border-bottom property set, and the border passes right through #info too in the following fashion:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------|-|-------|
| | +-------+
| +---------+
| |
+---------------------------+
So, considering all this, how can I give #info a fixed width, have it float to the right of #contents, but keep the column-like design and have #contents occupy the whole screen when #info isn't there, all of this making sure there are no visual artifacts, and without resorting to more than one stylesheet?
This would be the desired result on a page where both #contents and #info are present:
+-----------------+ +-------+
| | | |
| #contents | | #info |
|-----------------| | |
| | +-------+
|-----------------|
| |
+-----------------+
And this is the desired result on a page where only #contents is present:
+---------------------------+
| #contents |
|---------------------------|
| |
|---------------------------|
| |
+---------------------------+
I hope this wasn't too confusing. I'm out of brain power.
Float your #content div too, it stops it from leaking like you're having, and it will fill the entire page when #info is gone. If when you dont have #info you can change #content somehow, #content could have a position relative and some right padding, with a position absolute in #info to fill its place.
I emailed my web teacher about it, and the answer is quite simple. It doesn't work with Internet Explorer (at least version 6), but it degrades nicely for my case.
With #info set to float:right, it suffices to have #contents set with the property overflow:hidden. And voilà.
Unfortunately I have to support IE7 (and preferably IE6)
In IE8, Safari, Firefox, Chrome, I get a perfectly good layout ujsing an outer div to enlose two boxes.
------------------------------------
| |
| -------------- ----------- |
| | | | | |
| | A | | B | |
| | | | | |
| -------------- ----------- |
| |
------------------------------------
I'm using inline-block to style A and B. A is floated left, B right. Both boxes have internal divs and other elements.
However, when I use IE6 and IE7 I get this monstrosity.
------------------------------------
| |
| -------------- |
| | | |
| | A | |
| | | |
| -------------- |
| ----------- |
| | | |
| | B | |
| | | |
| ----------- |
| |
------------------------------------
Any definitive answers to what is going on and how to solve it?
Firstly, put a DOCTYPE at the top of your document. This forces IE into standards compliant rather than quirks mode (both euphemisms). For example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Secondly, if you want IE6 compatibility use floats (Andrew is quite correct in stating that display: inline-block only works in IE7 on elements with natural display: inline and <div> has natural display: block). This should work:
<div id="outer">
<div id="left"></div>
<div id="right"><>/div>
</div>
with:
#outer { overflow: hidden; }
#left { float: left; }
#right { float: right; }
as long as the widths of left and right are less than the width of outer including padding, borders and margins. If not, right will drop down to the next line.
In IE 6 and 7 inline-block works only on elements that have a natural display: inline. Are your boxes <div>s? If yes, it should work.. Do you have a test case? (See quirksmode.org for more info!)
IE block level element inline-block hack: this may be useful for you