I have a 'register' div in the 'nav' of my website, and in firefox everything renders perfectly, but in other browsers such as Chrome, the positioning is completely off sometimes, but if I refresh the page, it fixes itself.
Also, if I inspect element and check/uncheck 'position:absolute', it usually goes to the correct position.
There is a lot of entangled code here, so I apologize in advance, and would appreciate any help at all!
I will post the relevant code below, but if you need to see the complete code, please go to www.mindmote.com/nav/index.php
HTML:
<header>
<img src="..." onclick="location.href='../nav/index.php'" />
</header>
<nav>
<ul class="fancyNav">
...
</ul>
<div class="register">
<a class="unlink" id='windowbox' style='border-radius: 10px;width:45px;' href="...">Register</a>
<a class="unlink" id='windowbox' style='border-radius:10px;width:40px;' href="...">Log In</a>
</div>
</nav>
CSS:
.register{
position: absolute;
display: inline;
width:auto;
height:auto;
margin: 5px;
font-size: 18px/20px;
}
a.unlink{
color:#0f0000;
text-decoration: none;
clear: both;
}
a:hover.unlink{
color:#ecf7ed;
text-decoration: none;
clear:both;
}
#windowbox{
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
margin-left: auto;
margin-right: auto;
padding: 5px;
width :auto;
height:auto;
background: #c3912b url('../assets/img/nosp.png') repeat;
border: 1px solid #666666; /***/
-webkit-box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
}
.fancyNav{
position: relative;
text-align: start;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
box-shadow: 5px 5px 10px .5px rgba(100, 100, 100, .3);
}
Remove absolute positioning and it should be okay.
Related
See the following fiddle:
https://jsfiddle.net/b6bpzsg7/
It comprises 3 portfolio items which are divs with class porthole which just have left and right padding for offset to neighbour.
<div class="col-md-4 porthole">
<div class="portbox text-center">
<div class="portplace">
<div>Coming soon</div>
</div>
<header>Second</header>
</div>
</div>
The inner div has a class of portbox which I can see in chrome developer does not expand vertically to take up all of the porthole surrounding it. portbox has no padding, border or margin
Within the portbox there is a placeholder div with class portplace that has a margin of 15px all around and padding top and bottom of 30px. In chrome developer I see that the top margin extends outside of the enclosing portbox to the top margin of the outside porthole.
Can someone enlighten me?
EDIT
.portrow {
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
background-color: #888;
}
.porthole {
padding: 0px 15px 0px 15px;
overflow: auto;
}
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.portplace {
margin: 15px 15px 15px 15px;
padding: 30px 0px 30px 0px;
background-color: lightgray;
color: darkslategrey;
}
Add overflow: auto to your parent div:
https://jsfiddle.net/pavy/b6bpzsg7/2/
.portbox {
border-width: 1px;
border-color: #000;
border-radius: 5px;
background-color: #fff;
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
overflow: auto; // you need this
}
Read up on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
Add overflow="hidden" to the portbox to solve this problem.
Trying to get my divs to NOT move around when I change the size of my window.
Here's the CSS in question
#Main {
font-family: Arial;
}
#Intro{
width: 70%;
height: 1000px;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
padding-top: 20px;
position: relative;
}
nav {
width: 15%
position: fixed;
float: left;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
twitter {
width: 15%;
float: right;
background: rgba(255, 250, 250, 0.5);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border: 0px solid #000000;
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}
Basically, I have three Divs inside my Main Div, that are overlapping when the screen size changes or resolution is smaller. I'm sure it's something stupid that I'm doing wrong, but here we are.
If I understand you correctly what you want to have is a column-layout?
<center>
<div id="Main">
<nav id="nav">Navigation goes here</nav>
<div id="twitter">Twitter goes here</div>
</div>
</center>
#main {
width: 100%;
}
#nav,
#twitter {
float: left;
color: #fff;
}
#nav {
width: 30%;
background: blue;
}
#twitter {
width: 70%;
background: green;
}
This example creates a two-column-layout with a navigation on the left and "Twitter" on the right. If you would like to have another column you would have to add it as a children to #main and change the width of the columns. (#nav, #twitter and your third)
If you want to change the size or the order for smaller screens you have to use media queries. What you could do is the following:
#media screen and (max-width: 600px) {
#nav,
#twitter {
float: none;
width: 100%;
}
}
Another thing I see in your HTML is that you tried to use as an element. This would be a Custom HTML element which won't work in every browser, especially not in older ones (without a polyfill/library like Polymer). You can read more about Custom HTML elements in this article on html5rocks: Custom elements. To keep things simple you should stick to the available HTML5 elements.
If I understand your problem correctly, then you don't want your divs to resize when you change your window screen. I suggest that you change your:
width: x%;
to:
width: xpx;
Or, if you want this solved AFTER the page is rendered then you might want to use the min-width attribute, that may be able to solve your problem.
min-width: xpx; or min-width: x%;
Could you show the HTML you are using? It might be that you are missing the meta viewport tag.
Another solution might be to use pixel values instead of percent (as Juan Carlos suggested) if you don't want the width to change:
#Main {
width: 800px;
}
As a side note I would recommend you to take a look at caniuse.com for prefixes. You don't need all of those prefixes for box-shadow and border-radius
Here's the rest of the code
Index:
<?php
echo "<center>";
echo "<div id='Main'>";
include("banner.php");
include("navbar.php");
include("twitter.php");
include("intro.php");
include("footer.php");
echo "</div>";
echo"</center>";
?>
Navbar
<?php
echo "<nav>
<table>
<tr>
<td>
<ul>
<li><a href= 'index.php' class='LinkHome'/></a></li>
<li><a href= 'products.php' class='LinkProduct'/></a></li>
<li><a href= 'fitch.php' class='LinkFitch'/></a></li>
<li><a href= 'argodealers.php' class='LinkArgo'/></a></li>
<li><a href= 'about.php' class='LinkAbout'/></a></li>
<li><a href= 'contact.php' class='LinkContact'/></a></li>
</ul>
</td>
</tr>
</table>
</nav>";
?>
Twitter
<?php
echo "
<twitter>
Twitter Stuff would go here
</twitter>";
?>
Messy, I know
Also, I had taken two of them out of Divs to see what would happen [edited CSS appropriately] - and this method had a better effect
I cannot seem to get this number to align inline to the glyphicon. I want the number 3 to be pushed up more so that it lines up.
CSS
body {
background-image: url("bg1.png");
}
.icons {
margin: 0px 0px 0px 10px;
}
.well {
min-height: 20px;
padding: 20px;
margin-bottom: 20px;
background-color: #ecf0f1;
border: 1px solid transparent;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well blockquote {
border-color: #ddd;
border-color: rgba(0, 0, 0, 0.15);
}
.well-lg {
padding: 10px;
border-radius: 6px;
}
.well-sm {
padding: 9px;
border-radius: 3px;
}
#alertbox {
padding: 2px 2px 2px 2px;
text-align: center;
}
#topicon {
font-size: 50px;
}
#stats {
font-size: 50px;
display: inline-block;
float: right;
}
HTML
<div class="col-md-3">
<div class="well well-lg">
<div id="alertbox" class="alert alert-info">Total APIs</div>
<span id="topicon" class="glyphicon glyphicon-tasks"></span>
<span id="stats">3</span>
</div>
</div>
Screenshot
using the positioning doesnt work when scaling since the number 3 would go into the center when on a mobile phone. I need it to auto-scale i guess for smaller browsers.
If you remove the float from #stats, you could do something like this:
.well {text-align: justify;}
.well:after{content:""; width: 100%; display: inline-block; height: 0;}
span {display: inline-block; vertical-align: middle;}
I have a little problem with Firefox, this is the html
<html>
<button name="five" data-type="select" class="ui_button ui_button_normal">
<span>Pasta</span>
<div class="ui_button ui_button_normal ui_select_list">
<div class="ui_select_list_item" name="Pasta">Pasta</div>
<div class="ui_select_list_item" name="Carne">Carne</div>
<div class="ui_select_list_item" name="Verdura">Verdura</div>
<div class="ui_select_list_item" name="Pesce">Pesce</div>
<div class="ui_select_list_item" name="Dolce">Dolce</div>
<div class="ui_select_list_item" name="Frutta">Frutta</div>
<div class="ui_select_list_item" name="Caffè">Caffè</div>
</div>
</button>
</html>
and this is the CSS
.ui_select_list
{
margin: 0px !important;
height: auto !important;
padding: 10px;
}
.ui_select_list_item
{
border: 1px solid transparent;
}
.ui_select_list_item:hover
{
border: 1px solid transparent;
background-color: rgba(0, 185, 0, 0.3);
box-shadow: 0 0 2px 1px #000000;
border-radius: 10px;
}
.ui_button
{
background-color: rgba(140, 140, 140, 0.5);
border: 0 solid transparent;
border-radius: 10px 10px 10px 10px;
color: #FFFF00;
font-family: verdana, sans-serif;
font-size: 15px;
height: 32px;
line-height: 30px;
margin: 5px;
position: relative;
text-align: center;
width: 160px;
}
.ui_button_normal
{
box-shadow: 0 0 1px 4px rgba(0, 0, 0, 0.5);
}
.ui_button_normal:hover
{
background-color: rgba(180, 180, 180, 0.5);
box-shadow: 0 0 2px 5px rgba(0, 0, 0, 0.8);
}
Can be found on http://jsfiddle.net/Mak73/3YkSe/
The problem is that, on Google Chrome it works like expeted, when the mouse is over the div.ui_select_list_item the content of the div change with div.ui_select_list_item:hover.
On Firefox the :hover don't work, any idea?
It's not working because you're wrapping a <button> around the divs .. close it after the <span> and the :hover state will work ..
Jsfiddle: http://jsfiddle.net/3YkSe/2/
I suggest you try applying the following element options:
display: none;
display: inline;
I think this will do some better work in Firefox, on focus pop the
menu and display it inline, without block. This is just an idea I've
got for you to try out. Reply back if it works or not! Thanks!
I have my nav inside the header. I have an image in the corner and want the navigation links, which I made as buttons, on the right, but higher up within the white box. I had a problem with the header not resizing when i shrunk the page but I fixed that, but now the buttons are off the header. They also do not resize when I shrink the page. Help is greatly appreciated. Thanks. The url is http://tolitakeover.com
Here is html:
<header>
<nav>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>TBD</li>
<li>Affiliates</li>
<li>Events</li>
</ul>
</nav>
</header>
Here is css:
nav{
background:url('http://tolitakeover.com/images/toliheader.fw.png');
background-size: 40% 100%;
margin-left: 5%;
width: 90%;
height: 100%;
background-repeat: no-repeat;
background-color:white;
}
nav ul{
padding-top:20%;
padding-right:3%;
height:60%;
}
nav li{
display:inline;
float:right;
padding-right:1%;
padding-top:-50px;
}
nav ul li a,
nav ul li a:visited{
background-color: white;
color: black;
display:block;
}
nav ul li a:hover{
text-decoration:none;
background-color:white;
color:black;
}
.button {
display: inline-block;
text-decoration: none;
color: black;
font-weight: bold;
background-color: lightgray;
padding: 5px 20px;
margin-left:3%;
margin-right:3%;
font-size: 1.15em;
border: 1px solid red;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
-webkit-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
-moz-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);}
You have a lot going on.
Question, where did you get this stylesheet from? It is bad news for what you're trying to do. I wouldn't even know where to begin to explain this...
I recommend you start from scratch w/ a nice clean responsive template such as this:
http://www.initializr.com/
When you say 're-size' page do you mean when it degrades to mobile or tablet? You have no rules for this in your CSS.
Also, looking at your CSS I recommend you give this a read: http://css-tricks.com/the-difference-between-id-and-class/
If you're going to go that route, you would use "clearfix" instead, clearing the nav class from the header?
He should ideally have three classes up there, something like: #menu #container clearfix #navigation This would allow him to also control his logo too, as right now it's in the #nav.