CSS position:fixed and IE7 - html

I have a few div boxes that are using position:fixed and I use a margin-top and margin-left in order to put them where I want them to be.
Everything works very well with FF/Chrome, but IE7 seems to fail at displaying these boxes at all.
I've googled it and I understand that only IE7 bet2+ knows how to display position:fixed items properly.
I'm looking for a solution that will allow these boxes to be displayed correctly on all IE7 browsers. Can anyone assist?
CODE: (The two divs in question are the ones with the inline styling)
<div id="rn_PageContent" class="rn_Home">
<rn:widget path="search/ProductCategoryList" data_type="categories" label_title="#rn:msg:FEATURED_SUPPORT_CATEGORIES_LBL#"/>
<div style="float:right;width:310px;background-color:#000;border-style:solid;border-width:1px;border-color:#999999;padding:5px;position:fixed;">
<h2 style="border-bottom:1px solid #BBBBBB;margin-bottom:10px;padding-bottom:2px;">Most popular questions</h2>
<rn:widget path="reports/Multiline2home" report_id="#rn:php:$report_id#" per_page="5" />
<rn:widget path="reports/Paginator" report_id="#rn:php:$report_id#"/>
</div>
<div style="float:right;width:310px;background-color:#000;border-color:#666;border-style:solid;border-width:1px;padding:5px;margin-top:10px;position:fixed;">
<rn:widget path="standard/knowledgebase/PreviousAnswers2" number="3" />
</div>
</div>
Thanks,

position: fixed elements are positioned with the properties left and top (or right and bottom) not with margin.

Related

Img overflowing a fixed-width div in IE and FF

I have a relatively small problem here, it doesnt appear in Chrome though.
I have 2 divs at 50% width of their container, one is floated to the left, the other floated to the right. One contains some text, and the other contains nothing but an image which has a max-width: 100% applied to it by default. But still, the image is overflowing to the left outside of the divs boundaries. How to fix?
http://jsfiddle.net/Pv5Cb/ - I am not sure if this will give you an idea about what is happening but still.
P.S. I am using some snippets from animate.css, but I doubt that this is the problem.
HTML:
<div class="content-project-left">
<h1>heading one</h1>
<p>paragraph</p>
</div>
<div class="content-project-right">
<div>
<a>
<img src="img/img.jpg" alt=""/>
</a>
</div>
</div>
Fixed it myself.
So it turned out that besides the two 50% sides that are floated to the left and right respectfully, I gave the image within the floated right div a float: right...
float: *; removes an element from its natural document flow.
Removed it and everything is back to normal now.

Aligning responsive divs

I'm writing a responsive design for a website and I have 4 separate divs, which should be arranged 2 TOP x 2 BOTTOM. At some resolutions it seems to work fine, but at others there is a hole between the upper left div and the bottom left one.
This is how it should look like:
http://postimg.org/image/76q5y5w5v/
This is how it looks when improperly rendered:
http://postimg.org/image/6a4f8x4j7/
If you want to see all of the CSS applied, just visit http://bbogdanov.us/ (bottom of the page) and try to play with the browser's size to monitor the behavior of the div's at the different sizes.
The reason this is happening is because the div elements are being floated. When you lower the screen size, the block is becoming longer (taller) and the float is breaking. You can clear every other line by adding this snippet:
.uslugihome2:nth-child(odd) {
clear: left;
}
Caution, though, you need to use a polyfill for this to work on older browsers because some pseudo-classes like nth-child are not supported. I recommend Selectivizr.
Currently you have the following markup for each box:
<div class="uslugihome2">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
With reason why you see the gap is due to the width and margin that are set on uslugihome2.
So what I would so is, create another div which wraps the child divs like so:
<div class="uslugihome2">
<div class="uslugi_wrapper">
<div class="usluginame">
<div class="uslugiimage">
<div class="uslugidesc">
</div>
</div>
Then go to line 316 of style.css and remove margin: 2.5%;, then change the width to 50%.
Once done, add the following to your css file:
.uslugi_wrapper {
padding: 0 15px;
}
Not sure which browser you want to support but this will also ensure support for the likes of IE8
Hope this helps
That's because the height of those divs change as the width of the window changes. Try wrapping a div around every two separate divs. Let's call that a row.
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>
<div style="display: block;">
<div class="uslugihome2">...</div>
<div class="uslugihome2">...</div>
</div>

Firefox overflow with the right edge?

There seems to be a bug in firefox where if I put anything on the right edge of a container (using text-align or float) it makes the container larger than it should be.
So for example -
<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:50px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
Creates a scroll bar in firefox, seems to work fine in chrome. Any ideas?
What you're seeing is that the text actually overflows its container, because the painted dimensions of text can be bigger than its layout dimensions. This is particularly visible with italic text, but can happen with any text, especially with subpixel layout and antialiasing.
Chrome doesn't do subpixel layout of any sort, so it's just ignoring the overflowing text.
Your simplest bet is to just style your right float as overflow:hidden.
When i am doing aligenment with objects i do
<div style='width:100px; overflow:auto'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:49px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
this prob will not help you but i have to do it alot when useing %'s
Sorry reread you question you can remove the scroll bar like this:
<div style='width:100px; overflow:hidden'>
<div style='width:50px; float:left;'>Something</div>
<div style='width:50px; float:right;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
you will lose 1px of content thou
It's behaving as it should. You don't state which versions of Firefox and Chrome you're using, but for me with FF 9.0 and Chrome 16, they behave the same, i.e., the scrollbar appears. It's because your content extends beyond the defined width, and the default value for overflow is "visible", so the h1 in your right-floated div is extending beyond the div's boundaries. If you change your h1 to, say, a p tag, you note that the scrollbar disappears.
Applying a border will illustrate what's happening with the box model (copy/paste to see how the content extends beyond the border):
<div style='width:104px; overflow:auto;'>
<div style='width:50px; float:left; border:1px solid red;'>Something</div>
<div style='width:50px; float:right; border:1px solid red;'>
<h1 style='text-align:right;'>Title</h1>
</div>
</div>
So, again, it's behaving as it should. If your content extends beyond its container's width and no overflow value is assigned, overflow defaults to visible and the content shows and "pushes" the boundaries of the container. In this case, since your outer container has overflow:auto, you see a scrollbar.

Strange IE7 bug with hr width in a floated div

I ran into this very strange "bug" with IE7, I have many div.column floated left, no width specified. The strange thing is that in IE7 the hr element width seems to take up 100% width of the container of these columns. And also the css rules for hr do not seem to be applied nicely, the background img looks very weird, border doesnt seem to be removed:
hr.style3{background:url(../images/backgrounds/hr1.gif) repeat-x;border: 0 none;height:3px;margin:15px 0;}
<div class="column last">
<div class="title">Useful info</div>
<hr class="style3" />
<ul class="links line_height3">
<li>
sample link
</li>
</ul>
</div>
tw16 suggested http://borgar.net/s/2007/01/style-hr-elements/ which is a very cool technique, however for some reason I could not make it work for my particular case, perhaps I missed something.
Anyhow, I opted to use a div instead, but to make it behave similar to hr I wrap this div around a display:none hr:
css:
.hr hr {
display:none
}
html:
<div class="hr"><hr /></div>
However, if your div.hr is inside a floated container (which, in my case, is also in another floated container), then you may have to assign a fixed width for it (only for IE7). I use modernizr plugin so I did something like this:
.ie7 .hr {width:100px}
With this method, you can:
Style the "hr" with background image etc easily, which should work cross browsers
Still keep the hr element where you want it so text readers and such can see it

Why does the padding of one element affect the margin of another?

I have this page: http://jsfiddle.net/minitech/yU3aj/show/
If you look in the source, the CSS defines that the <header> should have side padding of 135px on each side, and the content should have 135px margin on each side. Why does the content end up having double that in spacing?
It doesn't. You're floating elements in the <header> and not clearing them.
Add clear: both; to your styles for the content div and it will move below the header and to the left.
It looks fine on my screen (Firefox 5.0)
Though I've read that some old IE versions have a problem called double margin
Also make sure to put a clearfix div after those two child elements in <header>:
<header>
<div id="notifications" class="left">notifications</div>
<div class="right">
<span class="dropdown">▾</span> username
</div>
<div style="clear: both;"></div>
</header>
EDIT: after checking out your screenshot it's obvious that you're missing that clearing div and the content below "floats after" your notifications box. Usually it is considered to be good practice to put a clearing element at the end of the floated elements, this way forcing the container to expand and "cover" all the contained elements.