Chrome and Firefox/IE behaving differently when using negative margins - html

I'm having an issue when using a negative top margin. Firefox and IE are rendering it differently from Chrome.
I have a layout similar to the following.
Here is the basic structure of my html
<div class="blue">
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
<div class="column">Column</div>
</div>
<div class="red">
<div class="column">Column</div>
<div class="column">Column</div>
</div>
And here is an example image of what I'm trying to do.
The blue div is a row of columns with a 1px right border. The red div has the slanted image for the background image (transparent png). I'm using a negative margin on the red div to pull it up and cover the very bottom edge of the blue div so that the borders in the blue div touch the slanted area in the red div. (purple area)
My issue is that in Firefox and IE the position of the content in the red div is being pushed down by the amount of negative top margin that I apply to it. In Chrome this issue doesn't exist. For example. If I apply margin-top: -70px to the red div it will push the content down 70px in IE/FF as well.
I'm not sure what is going on here. Any help would be appreciated.

I'm not sure what it could be because you didn't post your CSS but maybe you could some Reset CSS to reset the default CSS settings. Sometimes you need this because all browsers have different default CSS settings.

Different browsers do support different code. Try writing code that is only called if it is in that browser. Example:
/* Configure the animation for Firefox */
-moz-animation-duration:6s;
-moz-animation-name:spin;
-moz-animation-timing-function:linear;
/* Configure it for Chrome and Safari */
-webkit-animation-duration:6s;
-webkit-animation-name:spin;
-webkit-animation-timing-function:linear;
This is detecting different browsers and saying different things for each. I used this example because it shows that different code can be used for different browsers and sometimes it is needed. This is on one of my own web apps.

Related

A div taking over another div space

The situation: So my website is divided into sections first div inside the body is just a main container then inside of that main container there's 3 div elements first is the header second is the body or content and third is the footer.
The problem: On some browsers or more specifically on any browser on Iphone mobiles or ios. my footer is showing on top of the middle of the body div (content section) but on any other android phone it's looking just fine or on the normal browser..
screenshots:
(normal) on any android device:-
screenshot on any android phone
(problem) on any IOS device:-
screenshot on any ios phone
shared.css file that contains all the css for these pages:-
https://github.com/11abuyaman/majed/blob/master/CODE/CSS/shared.css
link for the page that has the problem:-
https://11abuyaman.github.io/majed/CODE/HTML/About%20us.html
UPDATE:
I'm only using the flex on #clouds_body so I can be able to fit the body right in-between the header and footer and I want the footer to stuck on the bottom even if the body wasn't taking enough space.
please help, thanks in advance.
This is a Safari issue, and you can solve it by removing display: flex on #clouds_body. If you're not using flex-direction: row, it's kind of useless to use flex on it anyways.
I also removed the flex while watching the page on Mac Firefox, and nothing changed.
EDIT
Based on the comment I got.
Change height: 100% to min-height: 100vh in #clouds_body.
This will, however, open up for other issues Safari have with your page, but that's beyond your original question.
html code:
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
css code:
#container{
margin-left:auto;
margin-right:auto;
height:auto;
width:auto;
}
This will work! This will arrange div's one below the other!

Auto resizing image banner to fit a div conatiner

I have a banner which I want to add to my simple website , here is what I have so far
HTML
<div class="col-lg-12 main-banner">
<a href="https://www.google.com">
<img src="images/Test_09-17.png"></a>
</div>
CSS
img{
width: 100%;
object-fit:contain;
}
I want the image to fit with the div, unfortunately right now i have little space left and right side.
Check the image:
Question
What is wrong with my code?
It looks like there is padding on your image. (Based on the green to the right and left of your image.). Did you check the computed padding on the image element in your browser?
Without being able to see the HTML and CSS for the page I cannot be certain though.
Solution:
There was default padding either from the browser or other code. Setting the padding to 0 resolved the issue.

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>

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

CSS position:fixed and IE7

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.