An element in my action bar just won't stay put in Safari and on ipad. It even moves up and down irregular (as you can see in the two different images below). Since chrome on ipad is build on the safari webkit engine it should be something with doing with that.
I can't seem to find the solution.
In the images below you can see it starts with div.profile.
nav .profile {
height: 100%;
margin: 0;
padding: 0;
position: relative;
top: 0;
}
There is more code, but that I put in a JSfiddle.
Bootstrap 3 is used and I'm using flexbox, might be worth mentioning.
Anybody knows more
http://jsfiddle.net/ynwvvzt0/
Add this to your css.
nav a.icon, nav .profile, nav .profile div {
display: inline-block;
vertical-align: top;
}
Related
I have created a portfolio page for myself.
https://alonoparag.github.io/index.html#home
My problem is that when I check the page using Google Developers tools or with my android (samsung galaxy s4) device, the navbar's items are always behind the content of #home.
I tried tweaking the z index of the navbar items versus the home content, with no avail. When Checking the elements in the developer's tools I saw that both the navbar elements and the div z-index have changed, but it didn't affected the way that the elements are stacked.
I would appreciate help with this.
Cheers
here's my code
.topnav.responsive a {
float: none;
display: block;
text-align: left;
z-index: 10000;
}
div.content {
align-content: center;
width: 85%;
margin: auto;
padding: 16px;
z-index: 1;
}
You have to give a position for z-index to work. So if you add position:relative; z-index:10; to your header, it should work fine.
You have to specify a (static) position, for example.
position: relative;
or
position: fixed;
"z-index only effects elements that have a position value other than static (the default)." - https://css-tricks.com/almanac/properties/z/z-index/
The one issue I found is that the parent #home container itself seems to be the one giving you grief. Here are some tweaks I made in the developer console on my end. I tested it on a full desktop view as well as shrunk it down in the mobile preview and it worked properly.
CSS:
#home {
z-index: 1;
}
#myTopnav {
z-index: 999;
}
In addition, make sure to establish a position value for your elements.
That should do the trick for you!
I've lately come across a weird issue, where a div like the following is not behaving like expected in most browsers (Chrome, Edge) as it does in Firefox:
footer > div {
display: flex;
position: absolute;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
justify-content: flex-end;
align-items: center;
}
footer {
position: relative;
display: table-row;
height: 40px;
background-color: gray;
}
I expect the div inside the footer to fill it's parent div so an element inside that div tag can be aligned vertically.
To make it work in chrome, I included the following rule
#media screen and (-webkit-min-device-pixel-ratio:0) {
footer > div { position:relative; }
}
The idea is to vertically align some elements in the footer without having to enter a specific value for its height (yes I'm more of a programmer, so I'm trying my best to avoid having to put the same value on multiple places in case it needs to be changed). How is this done correctly across multiple browsers?
The final solution just has to be supported in current versions of Chrome and Firefox so ignore all that IE not supporting CSS3 and HTML5 bull that most of other people have to consider. I'd also rather not do the styling using JS including JQuery since I feel like the layout is such a basic thing it should be possible to do without any of it.
If needed, you can also check out this jsFiddle which shows the problem in the context of the layout.
I suppose this isn't really necessary but if you want to, you can also check out the source code (it's a Spring webapp using Thymeleaf) on GitHub.
Lastly, if you feel like it, feel free to comment on other flaws in the design. This is a project I'm doing for an University course so I'm always open to improvements.
Thank you very much!
You could solve this by replacing the following for footer > div:
top: 0;
right: 0;
left: 0;
bottom: 0;
..with:
width: 100%;
height: inherit;
You'll find an updated Fiddle here. The solution seems to be working in all the latest browsers.
I'm working on a website and I'm having an issue in declaring CSS padding-top.
My problem is that the padding is rendered in a different way in Firefox respect to Chrome or Safari. I saw this as soon as I switched my navbardiv to position: fixed.
Here it is a JSFiddle with basic code which shows the problem: http://jsfiddle.net/8puCW/3/
Is there a way to maintain fixed the header/topbar and the navbar without having differences in rendering?
thanks.
since you use the position:fixed (http://www.w3schools.com/cssref/pr_class_position.asp) for the .navbar, get rid of the padding-top to position the element and use the top property, as shown in this Fiddle: http://jsfiddle.net/8puCW/9/. I've tested it in FF Mac and it is consistent.
.navbar {
position: fixed;
background: #D0D1D0;
float: left;
text-align: center;
top: 54px; /*UPDATE HERE*/
width: 200px;
height: 100%;
padding-top:20px; /*UPDATE HERE*/ }
sorry if the question title is weak, i can't quite sum my problem up into one snappy tagline...
I'm working on a website (using Joomla) and i've had to insert a DIV serving as a sidebar on the right side of the page. in order for it to be displayed "above" (or "over", i mean on the z-axis) the regular page content, i'm using a negative margin on the left side of it, covering the whole width of it, so it will simply float to the right and sit there, which works fine in ff and IE.
Since i've rarely ever run into issues with Chrome that were fine in IE, i didn't bother to check until quite late:
Now i see that in Chrome, the div is just sitting below (at the bottom of) the regular content; despite the "inline" display-types and the negative margin.
Now I've tried ridiculous things to make it work, but for some reason it just won't.
Can someone tell me how i can get it to work in Chrome?
HTML:
<div class="cframe">
<div class="content">
...
</div>
<div class="sideright">
...
</div>
</div>
CSS:
div.cframe {
display: table;
vertical-align: top;
}
div.content {
display: inline-table;
width: 751px;
padding: 60px;
}
DIV.sideright {
width: 200px;
float: right;
display: block;
position: relative;
top: 320px;
margin: 0px 0px 0px -200px;
}
...this is what i'm stuck with right now, it's all quite ugly.
[link to live-page removed as the solution has already been applied]
(The sidebar is the div classed sideright, and contains a module titled Archiv)
Thank you in advance
Change the div.content css to:
div.content {
display: inline;
float: left;
}
You're using float, but then setting the position to relative. You should remove the relative part of your css for the siderright and it should fix the issue
Edit: even better you should change the position to absolute.
Set your container div to position:relative and then position:absolute your sidebar in relation to that.
.cframe {
display: table;
vertical-align: top;
position: relative;
}
.sideright {
width: 200px;
position: absolute;
top: 320px;
right: 0;
}
I didn't test the answers above but I take their word that they worked. However, your question caught my eye, because I thought you were looking for a browser hack.
There are ways that you can tell an element to behave differently on a specific browser. This happens sometimes across browsers and the best way is to hack each individual browser and give them specific instructions. For chrome, of course you'll have to use a webkit.
This would be an easy example of the syntax to follow:
<p>TEST</p>
p {color:green;}
#media screen and (-webkit-min-device-pixel-ratio:0) {
p {color:red;}
}
Try the DEMO in several browsers and notice how only chrome will display it in red
I am trying to make a website responsive; I am almost done with it, except that when I make the window smaller, the nav links overlap the logo on the left. Look at it here
How do i make the nav bar move to under the logo when i re-size the window?
Thanks for any help
I had a play with your code and the first thing I spotted was the two #nav id's.
You should only have one unique id per page.
However, your main issue is the position fixed of the navigation items.
This is causing the nav to always just march on over the logo.
Position fixed ignores the document flow and places it wherever you put it.
You need to get the navigation back into the document flow
Change your nav items to relative and meddle with the top positioning.
You should place these in a new media query relating to your break points
You will also need to remove all those positioning styles.
That should get you half way there.
I would help more but I've just been given a rum and coke so best to stop now.
Steve
Either move the logo down, or create some space above it and put the links in said space.
You have to change many of the position attributes along with the float properties - I played around with the CSS on the site, and this is what I changed:
#topBar {
height: 300px;
}
.BODYcontainer {
margin-top: 300px;
}
.container .columns {
float: none;
}
.container .columns.logoBox {
left: 0;
position: relative;
display: block;
float: none;
margin-bottom: 50px;
}
#nav {
position: relative;
float: none;
top: 0;
left: 0;
right: 0;
text-align: center;
display: block;
}
#companyNav {
float: none;
position: relative;
top: 0;
}