Margin top different in safari than chrome - html

A bug has creeped in and I can't figure out where it came from. Any help would be appreciated.
If you look at [removed] in Chrome, you'll see that the logo on the left of the nav menu is nicely positioned in the vertical center of the menu. But if you open it up in Safari, it is displaying differently. It's aligning to the top of the menu.
Adding a negative margin top to compensate in Safari messes it up in Chrome.
Any ideas how to fix this?

To give you some idea on how to quickly clean this up, you could do something like this and build upon it:
<header>
<div class="container">
<div class="three columns">
<img id="header-logo" src="/assets/logo-300px.png" style="width:114px;height:100px;">
</div>
<div class="nine columns">
Navigation
</div>
</div>
</header>
Some CSS to do the margin on the top:
header {
margin-top: 30px;
}

Related

Skeleton: A simple, floating, responsive navigation bar

I am trying to create a simple, floating and responsive navigation bar while using Skeleton boilerplate.
It should be nothing more than a logo align to the left of container and a few menu anchor links aligned to the right. Position of it should be fixed while scrolling the site's content, while staying in Skeleton's responsive grid. Exactly like here.
Natural way of doing this would be something like this for me.
<header>
<div class="container">
<div class="row" style="position: absolute; margin-top: 5rem">
<div class="two columns">
<!--LOGO-->
</div>
<div class="ten columns" style="text-align: right;">
<!--MENU-->
</div>
</div>
</div>
</header>
The problem is that by setting position: absolute, div loses its ability to divide into columns. Also, the links aren't clickable. Can anyone suggest a working solution? Having a hamburger menu icon on mobile would be an ideal extension, so if anyone knows the simplest way to do this, I would love to hear it out.
Thanks in advance!

stacking divs with css for Firefox

I am trying to do a website with a loading animation. This loading animation shows well above all other divs in Chrome, but not in Firefox.
I have a menu bar, a main div, and a footer.
In the main div, I have a "main box" (will rotate in 3D) and a loading div.
The loading div hosts the animation for loading.
Html is kind of the following:
<div id="site">
<div id="menuDiv" class="mainSection"> Menu bar</div>
<div id="mainDiv" class="mainSection">
<div id="mainBox">
<div class="mainBoxSide front">
</div>
<div class="mainBoxSide right">
</div>
<div class="mainBoxSide back">
</div>
<div class="mainBoxSide left">
</div>
</div>
<div id="loadingDiv">
<div id="loadingBox">
<div class="loadingBoxSide loading-front"></div>
<div class="loadingBoxSide loading-right"></div>
<div class="loadingBoxSide loading-back"></div>
<div class="loadingBoxSide loading-left"></div>
</div>
</div>
</div>
</div>
<div id="footer" class="mainSection">Footer</div>
I want mainDiv to be on top of the footer, and loadingDiv on top of mainBox.
So in term of z-index : footer < mainBox < loadingDiv.
I created a codepen which isolates the problem: https://codepen.io/3MO/pen/vmOMEG
When opened in Chrome, everything works fine.
When opened in Firefox, the animation is flickering: it goes on top and on background of the mainBox element all the time, and I don't know why.
There is worse: if I provide a background color to the loading div, everything works fine: I created another codepen, the exact fork and defined a background color for loadingDiv: https://codepen.io/3MO/pen/XRbQjQ
Can someone know why it behaves like this? I need to work with a transparent div, so without any background color.
Thanks!
Try adding transform: translate3d(0,0,1px); to the div #loadingDiv.

make header image to partially overlap fixed nav bar with working buttons

There are two main elements on the page: 'header image' and 'navbar'. The image overlaps the navbar partially using margin.
By default it works fine because of some trick which I don't know.
Image ovelaps the navbar but links in navbar are still working in the area where image is transparent
However once navbar is made fixed (position:fixed after scrolling, by affix plugin) this trick doesn't work anymore - navbar overlaps the image.
My html is the following:
<div class="container brand-img-container">
<img class="brand-img" alt="" src="IMAGEWHICH OVERLAPS PARTIALLY" />
</div>
<div id="nav-wrapper" class="container">
<div class="row">
<div id="nav" class="navbar navbar-static span4">
<div class="navbar-inner">
<ul class="nav pull-left">
<li>Button</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<h2> R <h2>
</div>
CSS is the following
#nav.affix {
position: fixed;
top: 0;
}
.brand-img-container {
position: relative;
margin-bottom: -80px;
}
You can find it here with the picture (base64)
http://jsfiddle.net/5qYK8/9/
When I try to play with z-index, the image fully overlaps the navbar even in default case and links are not working at all.
You can find it here
http://jsfiddle.net/5qYK8/8/
Is it possible to make image (part of red cross) to overlap the navbar in fixed and not fixed cases with working Button?
Can someone at least explain why Button is working in first case when image does overlap it?
Because you have 1 image rolling over the link in the navigation at at one point, its going to cover the link, so you are going to have to create another link in a fixed <div> using your same jquery script. The link will be transparent, but the spot will be clickable with whatever link you place in it
You will need to create another <div> container, then place <a> link around a <div>, like this:
<div id="toplayer">
<a id="nav1" class="link" href="#"><div class="inner"></div></a>
</div>
You will also have to duplicate the selector ID below and rename it to something like this example.
#nav1.affix {
position: fixed;
top: 0;
z-index: 0;
}
Your CSS will need to have a z-index higher than the div containing the image. In my example, I have made the background blue so you can see it move while testing it.
#toplayer{position:relative;width:85px;height:40px;}
.inner{width:85px;height:40px;background:blue;}
.link {width:85px;height:40px;}
Here is a fiddle with a blue background so you can see it working. Here is a fiddle without the blue so you can see what it should look like.

Negative Margin in Firefox Using Bootstrap

I am using Twitter Bootstrap plugin, mainly just the grid system currently.
I am trying to put one row on top of another doing some stuff for responsive design.
In Chrome this works perfectly:
<div class="container">
<div class="row">
<div class="content">
abcd
</div>
</div>
<div class="row" id="moveUpRow">
<div class="content">
efgh
</div>
</div>
</div>
CSS:
.row {
height: 200px;
}
#moveUpRow {
margin-top: -200px;
}
But in Firefox and IE they both ignore the negative margin. I have tried top: -200px, but that just moves up the row and not all of the elements below the row. Leaving big white space.
Any other solutions to this problem? Or any suggestions on how to "pull" up any content below the row?
I was having the same problem. In my case I had two floating elements in my first row, so when I placed a negative margin to the second one it would move the entire row. Weirdly it worked fine in Chrome but not in Firefox.
Try adding overflow:hidden; to the row if that's the case.
The HTML you posted and CSS looks good to me in Firefox and IE, see http://www.bootply.com/72944
Perhaps you could start by double checking the paths to your CSS files and make sure there isn't some other problem with the HTML on your page?
Good luck!

div being pushed down in Firefox

Please check out this website --> http://justicecup.radiantwebtools.com/
The section underneath the nav/logo/social-media area is further apart in Firefox as opposed to Chrome/Safari (the desired separation).
The issue seems to have to do with this part of the HTML:
<div class="header-container">...</div> <!--- Okay... --->
<div class="row content"> <!--- DevTools shows this the right underneath the header area...okay, thats correct --->
<div class="width-container">...</div> <!--- on Chrome/Safari it's good. On Firefox, this is pushed down further....why? --->
</div>
I have tried giving the header area some css to work against this, to no avail
.header-container { overflow:none;}
This screenshot shows the difference too --> http://screencast.com/t/CrF9HEaki
Thanks for your help.
I think the issue might have something to do with collapsing margins.
One fix for the issue, is to change the two rules below:
#template .content .story-primary {
margin-top: 28px;
}
#template .content .story {
margin-top: 62px;
}
to:
#template .content .story-primary {
padding-top: 28px;
}
#template .content .story {
padding-top: 62px;
}
Your page layout is quite complex and I think part of your problem stems from using .width-container in two unsuitable places. I've been fiddling with the css using the browser's inspect element, however when I change the styling in one it cascades to the other. I think a redesign of your page would be helpful. I would suggest enclosing the whole page content (excluding the background) in a div and applying the width-container styling to that.
<div id="body">
<div class="width-container">
<div id="templatewrapper"> ... </div>
<div id="templatefooter"> ... </div>
</div>
</div>
Next you should rename the width-container around the header stuff to something more appropriate.
<div id="page-header">
<div class="logo"> ... </div>
<div class="rwtmodule navigation-module meganav"> ... </div>
<div class="social-media"> ... </div>
</div>
After doing this you should replace the float:left; on the logo, navigation and social media to display:inline-block and get rid of the various margins. Then apply a padding or margin to the #page-header to push them down. The .logo and .social media will be in the wrong place but you can use position:relative and top:/*some value*/ to correct this.
After doing this, the site should look like the current firefox version in both firefox and chrome. You can then move the main body of the page up using relative positioning as you did with the logo and social media.
Remember to test this out in a safe location first!
Hope this helps.