Sorry, I don't have the exact code with me, but hopefully this works with the example I provide.
Why is it that in IE, some nested divs pop out and sit in the wrong place (example, 200px down from where it should be).
<div style="width:1024px;height:103px;background-color:green;">
<div style="float:left;width:300px;height:103px;"><img src="LOGO URL"/>
</div>
<div style="float:right;width:180px;height:103px;">
</div>
</div>
Does anyone understand what I mean? I'm pretty sure it has nothing to do with double margins. Should I still bother making website compatible with IE7 and 6?
I'm trying to learn html the proper way. I want to be able to ensure my code is always compatible with all browsers and accessible to the disabled. Is there somewhere you would recommend that I can learn the "correct" practices? I understand most HTML, but compatibility can have issues.
Does it work the same in a modern browser? Parent elements are never to expand to contain floated elements. To do what you want, you either need to float the parent or give it an 'overflow:auto' CSS property. But fixing the height of the parent div to 103px will still restrict things.
Your IE problem is most likely because float:right element is appeared after it's siblings. (see number 3 below).
Speaking about how to learn HTML and CSS best practices, I would recommend playing around with CSS Zen garden to see how different amazing designs are built using a "static" html.
Looking at the HTML I see following issues:
Specifying static width and height is not a good idea
float right element should appear before any other sibling (otherwise IE can not render it properly) - (this is most likely the issue).
Having float:left for the other element is not necessary
adding a clear:both in the end of all siblings will ensure that parent will expand in height (without the need to specify height)
so I would change your HTML to this:
<div>
<div style="float:right;"></div>
<div><img src="LOGO URL"/></div>
<div style="clear:both"></div>
</div>
Related
This question relates to Why are the images no wider than 500px in Chrome?
See http://abmphotography.beta.cjbm.net/aileen-kevin
This has now been fixed, but now when the page initially loads in Chrome, the wider images overflow their div.thumbnail containers. See:
Weirdly, if you have the inspector open, focussed on <html> or anything within, the issue immediately corrects itself. Also if you have the console open and evaluate "$('body')" it immediately corrects (this doesn't work when in the javascript file).
Additionally, if you resize the browser above or below width:980px, then it also corrects itself (this is the point that the media queries switch, and the padding between the li's changes.
Update:
I have worked around this issue with the following jQuery:
$('ul.thumbnails img').each(function() {
$(this).closest('li').width($(this).width());
});
However I'd welcome a pure CSS solution.
Any particular reason why you're not using the row and span classes? I think I've had my divs spill outside of the window too, but immediately noticed that I wasn't using those. My structure for one row of content will generally look like this:
<div class="row">
<div class="span12">
<h1>Some Heading</h1>
<p>Some content</p>
</div>
</div>
span12 can be any size you'd like. Since it's a 12 column grid, 12 would use the whole width of the grid. This may not necessarily solve your issue, then again maybe it will! Either way it's just good practice in general.
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
<div style="background-color:red;">
Text
<div style="background-color:yellow; float:right;">Right</div>
</div>
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
<div style="background-color:red;">
<div style="background-color:yellow; float:right;">Right</div>
Text
</div>
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:
<div style="background-color:red; position:relative;">
Text
<div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>
I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.
Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.
I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem
<div style="background-color:red;">
<div style="float: left;">Text</div>
<div style="background-color:yellow; float:right;">Right</div>
</div>
I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.
<div style="background-color:red;width: 300px;">
<div style="float:left;border:1px solid yellow;">AAA AAA AAA</div>
<div style="float:left;border:1px solid green;">BBB BBB BBB</div>
<div style="clear:both;"></div>
</div>
Pasting the above HTML here: http://htmledit.squarefree.com/
And then zoom out in Chrome, you will see that <div> B will eventually be forced down to the next row. If you do the same thing in Firefox and IE, both <div> A and B will stay on the same row.
Adding a height attribute on the parent <div> may help, but if the height of the content is not known beforehand, this will not be feasible.
I would like to know how this problem can be fixed in Chrome.
Many thanks to you all.
EDIT: uploaded a screenshot here: http://img52.imageshack.us/i/screenshot1xd.jpg/
On your first div, add this:
<div style="background-color:red;width: 300px; white-space:nowrap;">
See if that helps.
I can't reproduce this either, but it seems that you are only zooming the text and I can't find this as an option in Chrome right now.
However you should keep in mind, that this is something that always can happen in any browser, if the user somehow overrides the font-site you specified. There is not much you can do other than keep your layout flexible enough to handle it. For example, in this case don't set the width of the surrounding element in pixels, but in ems so that it is relative to the font-size.
There may be other solutions, such as using other methods of placing elements beside each other, but that would require that you give a more concrete example of what you are trying to achieve, especially explaining you don't want the elements to wrap.
Works just fine on my Chrome 5.
What I could suggest to you is to specify the width on the parent div in "em" instead.. Though it seems that your particular version of chrome had a bug, which has already been fixed :)
Another solution is to set nowrap, as proposed by #Kyle and instead of setting static width - set the min-width. This way the div will expand, instead of having the children wrap to the second line ^_^
try using the max-width attribute!
I'm having a rare CSS issue in Internet Explorer 7 (I'm actually testing it on IE8 in compatibility view, but the client sent me screenshots in native IE7 too), it's easy to reproduce:
Go to this site (spanish).
On the left column, click the border (or somewhere around) the box labeled "Fiestas anteriores"
The element should now be moved downward, but if you click the empty space left, it'll come back like a good dog.
I've been looking around for IE7 bugs and playing with the width, border and other CSS properties with no luck. Any input is welcome!
I found if you apply the following styles it seems to stop it breaking when you click anywhere near it:
#prevparties_middlerow
{
float:left;
width:150px;
}
one little suggestion though, if I may, instead of having divs either side of the content in your panels to create the borders like so:
<div id="prevparties_left"/>
<div id="prevparties_contentBox">
content
</div>
<div id="prevparties_right" class="boxmiddle"/>
you'll probably find it alot easier to wrap the content box in a div that has the borders set as a background, like so:
<div id="prevparties_contentWrap">
<div id="prevparties_contentBox">
content
</div>
</div>
the main advantage here is that the wrapping div will go down as far as the containing div goes, so you dont have to apply specific heights to all these border divs. And when things are wrapped like this I find there is much less possibility of it breaking :D
anyways, hope this helps.
When I specify a height in the style for any element inside of this, IE makes the entire thing 100% width, rather than keeping it "autosized" for width.
Other browsers display it fine, but not IE. How do I fix this?
<div style="position:absolute;top:50px;left:50px;background:green;">
<div>
<div>test</div>
<div style="height: 20px;">this makes it 100% width in IE. why?</div>
</div>
</div>
Thanks!
Here's something that may work for you. It's a little hacky, but if you're trying to find a good width for some text, this is the only way besides javascript that I know of. We're basically forcing the width by not allowing the line to break. You can put in <br/>s if you need line breaks.
<div style="position:absolute;top:50px;left:50px;background:green;width:0px">
<div>
<div>test</div>
<div style="height:50px; white-space:nowrap">This is normally sized in IE6</div>
</div>
</div>
On second thought, don't check out the link. It's old and doesn't work as advertised.
Old answer:
http://snippets.dzone.com/posts/show/216
I believe that non-absolutely positioned DIVs automatically expand to fill their container horizontally. Since you haven't specified any container size for this div, it expands to fill the whole page.
I find it odd that Firefox doesn't expand the div... I'm not sure which of them actually has it "right".
At a guess, I would say it's something to do with the hasLayout bug in IE6. My suggestions:
1. Give the containing div (the one with the absolute positioning) a set width.
2. Post an example of what you are trying to achieve. We might be able to suggest a more all-browser friendly way of doing what you want.