I'd like to show a div that has a background-color with the height and width set to 100% but no content. Is it possible to do that without putting a inside?
Edit: Thanks to Mark Biek for pointing out that empty div with width and height styles shows how I'd expect. My div is in a table cell, where it does not show.
<table style="width:100%">
<tr>
<th>Header</th>
<td><div id="foo"></div></td>
</tr>
</table>
This seems to work in Firefox, Safari, IE6, & IE7.
<html>
<head>
<style>
#foo{
background: #ff0000;
width: 100%;
height: 100%;
border: 2px dashed black;
}
</style>
</head>
<body onload="">
<div id="foo"></div>
</body>
</html>
Hmmm... I'm not sure what exactly the specs say, but I know that while empty inline-elements (e.g. span) are valid, empty block-elements (e.g. p or div) get "cleaned up" by html-tidy.
Thus I'd say it's safer to stick to the as it does no harm in your case. I'd also add a comment like "<!-- background container -->" or something like that. So everyone who's going to change your html knows that the div has a special meaning even though it's empty.
IMHO you should include the nbsp for otherwise empty DIVs if you want them to actually render into something.
On a "theoretical" note .. the browser is not supposed to show anything if there is no content. The entire point of nbsp is to indicate empty space. This is both common sense and (I believe) the standard.
On a practical side .. are you have three choices. One is to leave nbsp off, knowing that you will get unpredictable results. This is likely the easiest to code. Another is to always include nbsp, either by always putting nbsp at the end of the div or testing for empty and adding nbsp if it is empty. The third it to test for the browser and insert nbsp when needed.
I think it depends on the browser (IE/Gecko engine/Webkit engine) and on the mode (Standards mode, Quirks mode). I had some divs appearing in FFox/Standards mode and not appearing in IE6/7.
You probably can do it in a cross browser way with only css, but you'll probably resort to some css hacks.
From experience, IE won't render borders of empty elements (at least empty <td> elements)
perhaps
#foo {empty-cells: show;}
although that may be only for <td>
You should include at all times.
Related
This may be an odd question, but I'm trying to make a div that will act as a sort of preview pane for an HTML mail message in which I want to make sure all styles are done inline. So I'd like for the div and its contents to receive no styling from the outside page.
Is there a way to do this (in CSS or Javascript) or do I have to override every individual style that has previously been set?
I'll show some code, but that's kind of breaking what I wanted this question to be. For example, let's say I have a div:
<div id="somediv">
<h2>Message Header</h2>
<p>This is some content</p>
</div>
Since this div is a part of a larger page, it and its contents are subject to styling (such as margins, paddings, fonts, font sizes, colors, etc) from the surrounding page and any CSS files included. Is there a way to negate ALL of that styling rather than individually overriding them?
In the future, you reset all properties with all: unset declaration, but it's only available on Firefox 27+.
For now, you can put your "inner" content in a separate document and embed it via iframe:
<iframe src="content.html"></iframe>
content.html (minimum valid HTML5 document):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Content</title>
</head>
<body>
<h2>Message Header</h2>
<p>This is some content</p>
</body>
</html>
I guess the closest you can get is to do some sort of CSS reset on everything within a given container, and then possibly try to re add some default-like margins and such till it looks "unstyled" again. And then take it from there with your inline CSS.
Another, completely different approach could be to display the mail in an iframe, in which there is no applied styling at all. Can probably be done, but might be a more complex thing to implement.
If you want to rewrite inherited CSS and not use the browser-default-CSS, you can add an !important behind every property. For example:
#noInherit {
background-color: #fff !important;
}
I'm not sure if you can stop inheritance. Maybe someone else can give you a better answer.
I don't believe you can remove all styles as there is no such thing as null in css. You can put everything to auto it one big dump
.noStyle{
width: auto;
height: auto;
etc...
}
but I don't think that would get the effect you are after as it will just make the div inherit everything from it's parent(s). More detail about exactly what you are trying to accomplish might make it easier to help you find a workable solution but I don't think the question as currently posed is "solvable".
You can use the negate selector. Just add :not before any CSS rule you don't want to apply on that div.
http://www.w3.org/TR/css3-selectors/#negation
Hard work if you do it manually, but you can automate it if you feel like. Note it will only work on modern browsers.
The other way is to use iframe. Not recommended.
This is not working on my IE:
<table style="padding:5px">...</table>
however it works on Opera.
Is there a workaround?
The earlier CSS specs (which IE6 follows -- and I use the word "follows" loosely) are not clear about what padding defined on a table should even mean. IE6, naturally, decided to interpret this differently than every other browser, by ignoring the padding. Other browsers decided to render it by adding spacing between the table border and the outermost cells, without affecting the spacing inside cells, or between internal cells. By the time IE7 came out, the specs had cleared up to work like the other browsers, but IE6 still has the problem, where it simply ignores the padding.
The best solution is to avoid putting padding on your table, but instead surrounding it with a div, and putting the padding there.
<div style="padding: 5px;">
<table...>
</table>
</div>
Of course, if what you want is cell spacing or cell padding (as opposed to just padding on the table), then you should use the cellspacing or cellpadding attributes (even if you don't want these, you at least need cellspacing="0" to avoid another separate issue with IE6 table rendering).
Also, the inline styles here are for demo purposes; using css classes is generally considered better practice.
Did you try using <table cellpadding="5">? IE has problems with some css styling.
Also your syntax is wrong you forgot a semi-colon.
I'd venture to guess something else is wrong in your code.
Padding works fine in IE:
http://jsbin.com/ewuho4/
If you want to pad the cells then use cellpading attribure (cellpadding="X") if you want to padd a table, then that is awkward considering it's structure, I recommend that you put a margin if you want some space between it and the rest of stuff. Padding does not work on IE an even though I am not a fan of IE I do not blame it for that
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.
Okay, this is a weird one to me. Here's the HTML element I'm working with:
LOLZ http://www.ubuntu-pics.de/bild/14571/screenshot_030_0O2o3D.png
A photo with a caption. Ideally, I'd like it to look like this, through pure CSS:
alt text http://www.ubuntu-pics.de/bild/14572/screenshot_031_mp84u7.png
The width of the image's parent element needs to be dependent on the image's size.
I can change the markup all I need to. (The text isn't currently in its own div, but it can be if necessary.) Is there any way in CSS to accomplish this? I get the impression that I need to "force" the text to wrap as much as possible (which doesn't seem achievable), or make the whole element's width dependent on just one element and ignore the other (which I've never heard of before).
Is there a real way? Or do I need to use magical Javascript instead? (The JS solution is fairly simple, but fairly lame...)
Check out this great article on the best ways of handling the image-with-a-caption scenario.
Personally this is one of those cases where you gotta suck it up and go with that works.
Make the container a table with table-layout:fixed and put the image in the top row. You can also do this with pure CSS using the display:table-* properties (and the IE7-js library for IE6 compatibility).
What table-layout:fixed does is make the table drawing algorithm lock the width of each table column once the width of the first cell in that column is known. The caption will have nowhere to expand to so it will wrap to the width of the image (the first cell).
Alright, it looks like there's no simple solution that I can pull off. Thanks for helping me work that out :)
I think that, given how I'll be storing those images, accessing width won't involve constant recalculation. I may just use that server-side magic instead.
Thanks!
Here's a solution that probably does not work for you even though it does produce the layout you requested:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
div.a {float: left;
position:relative;}
div.b {
position: absolute;
top: 100%;
left: 0;
right: 0;
text-align: center;
background-color:gray;}
</style>
</head>
<body>
<div class="a">
<img src="http://stackoverflow.com/content/img/so/logo.png" alt="">
<div class="b">Caption text Caption text Caption text Caption text Caption text </div>
</div>
</body>
</html>
You see the reason why it is unsatisfactory if you place some content below the div a. It will overlap with the caption, because the absolutely positioned caption did not extend the parent div vertically. It still may work for you if you have enough white space below anyway or you are willing to reserve it.
I came up with a working and fairly clean solution.
The solution uses a table (or div with display:table if you prefer) and adds a second column to "push" the first cell into the minimum space it really needs. The table can be set to 1px width to stop it growing across the page. I've put together a demo to show this in action:
http://test.dev.arc.net.au/caption-layout.html
Tested and working in IE8, Firefox and Safari/Win
The table answer would work. Easily. I can't encourage its use but ease-of-use does have merit. I was going to suggest using the clip: CSS property, but I can't get it to work on my local machine (for some reason, though it renders the example at cssplay.co.uk perfectly).
The downside of this is that it probably only works if you define fixed-widths for the containers. I'm sure there must be a way, though. I'll keep looking.
I have the following textarea in a table:
<table width="300"><tr><td>
<textarea style="width:100%">
longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring
</textarea>
</td></tr></table>
With a long string in the textarea, the textarea stretches out to accommodate it in one line in IE7, but retains its 300px width in other browsers.
Any ideas as to how to fix this in IE?
Apply the width to the td, not the table.
EDIT: #Emmett - the width could just as easily be applied via CSS.
td {
width: 300px;
}
produces the desired result. Or, if you're using jQuery, you could add the width through script:
$('textarea[width=100%]').parent('td').css('width', '300px');
Point being, there's more than one way to apply a width to a table cell, if development constraints prevent you from applying it directly.
#Peter Meyer, Jim Robert
I tried different overflow values, to no avail.
Experimenting with different values for the wrap attribute and the word-wrap style also wasn't fruitful.
EDIT:
#dansays, seanb
Due to some awkward application-specific constraints, the width can only be applied to the table.
#travis
Setting style="word-break:break-all;" sort of worked! It still wraps differently in IE7 and FF. I'll accept this answer if nothing better comes up.
Another hacky option, but the only option that works for me - none of the other suggestions on this page do - is to wrap the textarea in a single cell table with a fixed table layout.
<table style="width:100%;table-layout:fixed"><tr><td>
<textarea style="width:100%">longstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstringlongstring</textarea>
</td></tr></table>
Another very hacky option, if you are stuck with a lot of constraints, but know what the surrounding dom will look like:
style="width:100%;width:expression(this.parentNode.parentNode.parentNode.parentNode.width +'px')"
not pretty, but does work in IE7.
Using jquery or similar would be a much neater solution, but it depends on the other constraints you have.
did you try...
overflow: hidden;
??
I'm not sure if it should be in the table of the textarea... experiment a bit
IE also supports the word-break CSS 3 property.
The overflow property is the way to go. In particular, if you want the extra text to be ignored, you can use "overflow:hidden" as a css property on the text.
In general, when a browser has an unbreakable object, such as a long string without spaces, it can have a conflict between various size constraints - those of the string (long) vs its container (short). If you see different behavior in different browsers, they are just resolving this conflict differently.
By the way, there is a nice trick available for long strings - the <wbr> tag. If your browser sees longstringlongstring, then it will try to fit it in the container as a single, unbroken string -- but if it can't fit, it will break that string in half at the wbr. It's basically a break point with a implicit request to not break there, if possible (sort of like a hyphen in printed texts). By the way, it's a little buggy in some versions of Safari and Opera - check out this quirksmode page for more.
I've run into this problem before. It's related to how HTML parses table and cell widths.
You're fine setting 300 as a width as long as the contents of the element can never exceed that (setting a div with a definite width inside and an overflow rule is my favorite way).
But absent a solution like the above, the minute ANY element pushes you past that width, all bets are off. The element becomes as wide as it has to to accommodate the contents.
Additional tip - encase your width values in whatever set of quotes will nest the value properly (<table width='300'). If someone comes along and changes it to a %, it will ignore the %, otherwise.
Unfortunately, you're always going to have trouble breaking strings that do not have 'natural' breaks in IE, unless you can do something to break them up via code.
For solve this issue you use space in your text,and you too use this code
overflow:hidden
Give the width in pixels.this should work properly
or, how about:
overflow: scroll;
Edit:
I actually tested this. I think the behavior is such because the width is on the table, which I believe (I have nothing to back this up) I read long ago that the table width is a suggested width, but can be expanded to accommodate its content. Not sure. I know if you use a <DIV> rather than a table, it works. Additionally, if you apply the 300 pixel width to the containing <TD> element as opposed to the <TABLE> element, it works as well. Also, the overflow: scroll does nothing! :P
Nice, funky IE behavior, for sure!
Best thing I could find to make it work, a little hacky:
wrap textarea with <div style="width:300px; overflow:auto;">
might want to play around with the overflow value