I am working with a legacy html code which uses tables extensively for layout. For the page I'm making I unfortunately have to call one of these legacy systems which returns the output in table with multiple tr's.
I got it to align on the same line in both Firefox/Chrome by using
display: inline;
float: left;
But it still doesn't work in IE9 (I haven't tested with other versions of IE). Is there anything to force IE to display both <tr> elements on the same line?
I would try
display:inline-block;
Untested
You might also consider using javascript to manipulate the elements once the DOM is rendered.
EDIT
The other thing you might do is set a specific width on the trs. IE9 might be giving them a default 100%, so less than 50% each if there are two of them, etc.
Related
Problem
I have a <select> where one of its <option>’s text values is very long. I want the <select> to resize so it is never wider than its parent, even if it has to cut off its displayed text. max-width: 100% should do that.
Before resize:
What I want after resize:
But if you load this jsFiddle example and resize the Result panel’s width to be smaller than that of the <select>, you can see that the select inside the <fieldset> fails to scale its width down.
What I’m actually seeing after resize:
However, the equivalent page with a <div> instead of a <fieldset> does scale properly. You can see that and test your changes more easily if you have a <fieldset> and a <div> next to each other on one page. And if you delete the surrounding <fieldset> tags, the resizing works. The <fieldset> tag is somehow causing horizontal resizing to break.
The <fieldset> acts is as if there is a CSS rule fieldset { min-width: min-content; }. (min-content means, roughly, the smallest width that doesn’t cause a child to overflow.) If I replace the <fieldset> with a <div> with min-width: min-content, it looks exactly the same. Yet there is no rule with min-content in my styles, in the browser default stylesheet, or visible in Firebug’s CSS Inspector. I tried to override every style visible on the <fieldset> in Firebug’s CSS Inspector and in Firefox’s default stylesheet forms.css, but that didn’t help. Specifically overriding min-width and width didn’t do anything either.
Code
HTML of the fieldset:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
My CSS that should be working but isn’t:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
Resetting the width properties to the defaults does nothing:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Further CSS in which I try and fail to fix the problem:
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
More details
The problem also occurs in this more comprehensive, more complicated jsFiddle example, which is more similar to the web page I’m actually trying to fix. You can see from that that the <select> is not the problem – an inline-block div also fails to resize. Though this example is more complicated, I assume that the fix for the simple case above will also fix this more complicated case.
[Edit: see browser support details below.]
One curious thing about this problem is that if you set div.wrapper { width: 50%; }, the <fieldset> stops resizing itself at the point then the full-size <select> would have hit the edge of the viewport. The resizing happens as if the <select> has width: 100%, even though the <select> looks like it has width: 50%.
If you give the <select> itself width: 50%, that behavior does not occur; the width is simply correctly set.
I don’t understand the reason for that difference. But it may not be relevant.
I also found the very similar question HTML fieldset allows children to expand indefinitely. The asker couldn’t find a solution and guesses that there is no solution apart from removing the <fieldset>. But I’m wondering, if it really is impossible to make the <fieldset> display right, why is that? What in <fieldset>’s spec or default CSS (as of this question) causes this behavior? This special behavior is probably be documented somewhere, since multiple browsers work like this.
Background goal and requirements
The reason I’m trying to do this is as part of writing mobile styles for an existing page with a big form. The form has multiple sections, and one part of it is wrapped in a <fieldset>. On a smartphone (or if you make your browser window small), the part of the page with the <fieldset> is much wider than the rest of the form. Most of the form constrains its width just fine, but the section with the <fieldset> does not, forcing the user to zoom out or scroll right to see all of that section.
I’m wary of simply removing the <fieldset>, as it is generated on many pages in a big app, and I’m not sure what selectors in CSS or JavaScript might depend on it.
I can use JavaScript if I need to, and a JavaScript solution is better than nothing. But if JavaScript is the only way to do this, I’d be curious to hear an explanation for why this is not possible using only CSS and HTML.
Edit: browser support
On the site, I need to support Internet Explorer 8 and later (we just dropped support for IE7), the latest Firefox, and the latest Chrome. This particular page should also work on iOS and Android smartphones. Slightly degraded but still usable behavior is acceptable for Internet Explorer 8.
I retested my broken fieldset example on different browsers. It actually already works in these browsers:
Internet Explorer 8, 9, and 10
Chrome
Chrome for Android
It breaks in these browsers:
Firefox
Firefox for Android
Internet Explorer 7
Thus, the only browser I care about that the current code breaks in is Firefox (on both desktop and mobile). If the code were fixed so it worked in Firefox without breaking it in any other browsers, that would solve my problem.
The site HTML template uses Internet Explorer conditional comments to add classes such .ie8 and .oldie to the <html> element. You can use those classes in your CSS if you need to work around styling differences in IE. The classes added are the same as in this old version of HTML5 Boilerplate.
Update (25 Sept 2017)
The Firefox bug described below is fixed as of Firefox 53 and the link to this answer has finally been removed from Bootstrap's documentation.
Also, my sincere apologies to the Mozilla contributors who had to block removing support for -moz-document partly due to this answer.
The fix
In WebKit and Firefox 53+, you just set min-width: 0; on the fieldset to override the default value of min-content.¹
Still, Firefox is a bit… odd when it comes to fieldsets. To make this work in earlier versions, you must change the display property of the fieldset to one of the following values:
table-cell (recommended)
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
Of these, I recommend table-cell. Both table-row and table-row-group prevent you from changing width, while table-column and table-column-group prevent you from changing height.
This will (somewhat reasonably) break rendering in IE. Since only Gecko needs this, you can justifiably use #-moz-document—one of Mozilla's proprietary CSS extensions—to hide it from other browsers:
#-moz-document url-prefix() {
fieldset {
display: table-cell;
}
}
(Here's a jsFiddle demo.)
That fixes things, but if you're anything like me your reaction was something like…
What.
There is a reason, but it's not pretty.
The default presentation of the fieldset element is absurd and essentially impossible to specify in CSS. Think about it: the fieldset's border disappears where it's overlapped by a legend element, but the background remains visible! There's no way to reproduce this with any other combination of elements.
To top it off, implementations are full of concessions to legacy behaviour. One such is that the minimum width of a fieldset is never less than the intrinsic width of its content. WebKit gives you a way to override this behaviour by specifying it in the default stylesheet, but Gecko² goes a step further and enforces it in the rendering engine.
However, internal table elements constitute a special frame type in Gecko. Dimensional constraints for elements with these display values set are calculated in a separate code path, entirely circumventing the enforced minimum width imposed on fieldsets.
Again—the bug for this has been fixed as of Firefox 53, so you do not need this hack if you are only targeting newer versions.
Is using #-moz-document safe?
For this one issue, yes. #-moz-document works as intended in all versions of Firefox up until 53, where this bug is fixed.
This is no accident. Due in part to this answer, the bug to limit #-moz-document to user/UA stylesheets was made dependent on the underlying fieldset bug being fixed first.
Beyond this, do not use #-moz-document to target Firefox in your CSS, other resources notwithstanding.³
¹ Value may be prefixed. According to one reader, this has no effect in Android 4.1.2 Stock Browser and possibly other old versions; I have not had time to verify this.
² All links to the Gecko source in this answer refer to the 5065fdc12408 changeset, committed 29ᵗʰ July 2013; you may wish to compare notes with the most recent revision from Mozilla Central.
³ See e.g. SO #953491: Targeting only Firefox with CSS and CSS Tricks: CSS hacks targeting Firefox for widely referenced articles on high-profile sites.
Safari on iOS issue with selected answer
I found the answer from Jordan Gray to be particularly helpful.
However it didn't seem to solve this issue on Safari iOS for me.
The issue for me is simply that the fieldset cannot have an auto width if the element within has a max-width as a % width.
Fix for issue
Simply setting the fieldset to have a 100% width of it's container seems to get around this issue.
Example
fieldset {
min-width: 0;
width: 100%;
}
Please refer to the below for working examples - if you remove the % width off the fieldset or replace it with auto, it will not continue to function.
JSFiddle | Codepen
I’ve struggled for many hours with this, and basically, the browser is applying computed styling that you need to override in your CSS. I forget the exact property that is being set on fieldset elements versus divs (perhaps min-width?).
My best advice would be to change your element to a div, copy the computed styles from your inspector, then change your element back to fieldset and compare the computed styles to find the culprit.
Hope that helps.
Update: Adding display: table-cell helps in non-Chrome browsers.
.fake-select { white-space:nowrap; } caused the fieldset to interpret the .fake-select element by its original width, rather than its forced width (even when the overflow is hidden).
Remove that rule, and change .fake-select's max-width:100% to just width:100% and everything fits. The caveat is that you see all of the content of the fake-select, but I don't think this is all that bad, and it fits horizontally now.
Update: with the current rules in the following fiddle (which contains only real selects), the fieldset's children are constrained to correct widths. Other than removing rules for .fake-select and fixing comments (from // comment to /* comment */, I've noted changes in the fiddle's CSS.
I understand your problem better now, and the fiddle reflects some progress. I set default rules for all <select>s, and reserve .xxlarge for those which you know will be wider than 480px (and this only works because you know the width of #viewport, and can manually add the class to those too wide. Just requires a little bit of testing)
Proof
I need to print a page in IE8, IE9, and Chrome. It prints perfectly in Chrome, no so well in IE8 (have not tested IE9 yet).
The 3 major problems I'm facing with IE right now are:
Checkbox and radio button width is messed up and it has a border
Extra padding throughout the form, especially between label and field
Internal table borders do not show up, and the first column should be hidden
See the screenshots below. Why is this happening? I can't seem to fix it, I've tried changing the css several times. I know it is reading the CSS though.
Checkbox:
Extra padding everywhere:
No internal table borders:
UPDATE:
The form shows up correctly (table borders shown, padding correct, etc.) in both Chrome and IE. It prints correctly in Chrome. It does not print correctly in IE.
Please do not tell me to print the form another way. I've made a design decision to print it from the browser: it's what's best for my project.
1: You probably have something like
input {border: ...; width: ...}
which affects your checkboxes and radios. At least in Internet Explorer. You can fix this either by using
input[type=radio], input[type=checkbox] {alternating styles}
or by assigning specific classes:
input.radio, input.checkbox {alternating styles}
2: The padding you might get rid of by giving both the input-forms and the label right next to it
text-align: vertical
3: To solve the borders you should provide the CSS for that ;)
I added a simple table with borders to the page to test if IE not displaying table borders, or if my css was some how overridden. When that worked, I realized my table was being selected somewhere else by it's ID (and having it's borders removed). When I tried to add in the borders for printing, I was selecting the table by it's class name not ID.
I also realized the jquery.jqprint plugin was not including the doctype in the iframe it was printing. Now, it prints perfectly in IE8.
This question is geared towards CSS3, I've been looking at a few boilerplate templates and guides and most of them declare a whole lot of attributes before even going into what you want to edit.
Why is this so? Does declaring all of the usable attributes make the
browser load faster or something?
What are the benefits? Why not just use CSS3 "as is" (like just declaring what's being used in the HTML section)?
And if the underlying attribute changes in further editions, wouldn't
it mean you would have to constantly keep a check on deprecated
attributes and keep declaring and changing attributes every once in a while?
HTML5Boilerplate contains a version of normalize.css. Rather than just reset everything to 0 (i.e. margins, padding etc) it has the minimum set of changes to ensure things have the same settings in all browsers. In their own words:
“Normalize.css is a customisable CSS file that makes browsers render
all elements more consistently and in line with modern standards. We
researched the differences between default browser styles in order to
precisely target only the styles that need normalizing.”
An example of a style used here is:
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
*/
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
This fixes some weirdness in older IE, as well as on iOS. This is the sort of thing that you'll likely have a problem with, read loads, find a solution and add in eventually yourself. By using this set of defaults you can avoid a lot of weirdness.
As well as bugs, it includes things you'd likely want anyway:
nav ul,
nav ol {
list-style: none;
list-style-image: none;
margin: 0;
padding: 0;
}
Using a ul in a nav is a common pattern, and you usually don't want bullet points there. This sorts that for you.
In all, I'd recommend using your own custom version of their code – it will save you a lot of annoyance!
Also if you want to add CSS3 functionality you can add it to ie5 with javascript(not to say this doesn't come with its cons) with html5shiv or html5shim .
Also lets examine the definition of the acronym CSS. Cascading Style Sheets. You may declare styles in order of fall back. i. e.
body {
style-1: new browsers (this renders yay!)
style-2: semi-new browsers (don't understand style-1 I will ignore ahh style2)
style-3: ie5(me want to crash soon or BOD you. but me not get either 1 or 2 they smart but i think i can work on style 3)
I have a WordPress site that I recently moved from one domain to another (using my host's dotnetpanel). When it went live on the new domain, it does not show up correctly in Internet Explorer. Previously, it worked well in all browsers. Specifically, it seems like parts of the stylesheet are just being ignored. It works fine on all browsers tested except IE.
Try putting the code here in and testing to see if it fixes your problem. What parts look like they're being ignored?
Maybe you have to reinstall some of your plug-ins?
I guess there are some wrong paths in the database or config-files.
Try to search database by db-admin-tool and all the files with an advanced text-editor with the option to search automatically in all files at the same time.
As far as I can see the style sheets are applied.
You have width: 100% and height: 100% on the links in the menu, which messes with their size in IE. Remove those styles.
The reason that the gradients doesn't show up is because they are filters, and the elements has to have layout for the filters to apply.
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
Ref: http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
If you give the elements layout, the gradients will show up, for example:
.block h2 { width: 100%; }
I have a website page that uses tables for layout and I am trying to convert it to CSS (never used before)
The navigation is 6 forms with different images placed besides. I know I can give each of these an id and position using css but there must be a less clunky way?
I was wondering If I can create a class which specifies the links position relative to the previous links position, and maybe set the first one manually?
Thanks :)
Purists would say that tables should only be used for tabular data. Your site is not tabular data, it's a layout, so using a table here is a hack. It's a perfectly fine hack if it works, but it may not ultimately be the cleanest solution.
The pragmatic part of me (which is much bigger than the standards Nazi in me) says there might be a cleaner approach using CSS. This could eliminate the need to clutter your source with unnecessary table cruft. You really have two divisions, each with paragraphs containing images, links, and text. It would be ideal if your HTML didn't have to contain anything but that.
If you use CSS well, you can get exactly that result:
http://www.aharrisbooks.net/demo/sample.html
Use 'view source' to see the HTML and CSS code.
A few notes:
I used the 'fieldset' element (which is supposed to be used in forms, but it works well here)
I guessed on colors
Modify the CSS to get exactly the effect you're looking for
I (obviously) used only one icon, but the same effect will work for the whole page
Only one div is needed (even that isn't necessary, but it looks nice to center content on the page
What I like about this design is how clean it keeps the HTML.
Best of luck, and feel free to drop a line if you have questions.
PS for more fun, add the following CSS3 syntax to the fieldset
box-shadow: 5px 5px 5px #333;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #333;
-moz-border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px #333;
-webkit-border-radius: 10px;
These attributes add rounded corners and drop shadows for a very nice effect. It won't work in IE, but the other recent browsers (Safari, Chrome, Firefox, and most mobile browsers) will see really nice effects. Yay for CSS3!
Try div.classname { float: left; width: 200px } and give the container object the same or different width - experiment with this until you're satisfied
While jimplode will not disagree with me, tables are still a valid element in HTML. You can even emulate them with DIVs using the CSS styles display: table (see quirksmode for browser compatibility). So unless the design is a maintenance nightmare or there is some other really pressing reason to change the layout, keep it.
Getting CSS right for most browsers can be a nightmare, especially if you need something "special". Say several elements on the same line with the same (automatic) height.
If you're new to CSS, look for an example that works and start to modify that.
If you're doing this for a public website, get Firefox 3, Chrome, Opera, IE6, IE7 and IE8 and test it with each of them.
Here is an image of the current layout using tables. It's simple but all the information I can find on css talks about multiple columns. I think I only need one? And maybe two divs?
img208.imageshack.us/img208/7038/layoutsz.png