Working on an academic mock-up for a class. It's a simple reproduction of an existing company's webpage using only HTML and CSS. Everything was working perfectly in all browsers last week. I opened it yesterday to check it before submission and there's a problem.
In Chrome only, the last element of my navbar is being bumped straight down 19px.
The page. link
The css. link
The relevant css.
#navbar {
position:absolute;
display:block;
top: 115px;
left:0px;
width:100%;
height: 45px;
background:url(../images/navbar_section.png) repeat-x;
padding:0px;
margin:0 auto;
text-align:center;
-webkit-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
-moz-box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
box-shadow: 0px 2px 2px rgba(50, 50, 50, 0.27);
}
#navmenu {
float:left;
left:50%;
position:relative;
width:964px;
}
#navmenu ul, li {
display: inline;
}
#navmenu li a {
font-size:1em;
float: left;
color: white;
font-weight:bold;
border-left:2px groove #008dcb;
text-decoration: none;
line-height:45px;
position:relative;
margin-left:auto;
margin-right:auto;
right:50%;
padding-left:10px;
padding-right:10px;
width:138px;
}
#navmenu li a:hover {
color: white;
background:url(../images/navbar_visited.png);
}
#navmenu li:last-child a {
border-right:2px groove #008dcb;
}
The relevant html.
<div id="navbar">
<div id="navmenu">
<ul>
<li>SHOP</li>
<li>WHY ALLTEL</li>
<li>PLANS</li>
<li>APPS & MORE</li>
<li>CAREERS</li>
<li>EMPLOYEES</li>
</ul>
</div><!--end of navmenu-->
</div><!--end of navbar-->
I know it may be a bit confusing, if you look at the css file, to see navmenu and navmenu2, but just focus on navmenu, as the second is a different style that I haven't implemented.
I've tried removing the width elements with no change in the error.
I've tried copying the above code only into a fresh html document. Same error.
I'm at a complete loss. Please help!
Clear padding. This is post just so there's a listed, recognized solution to this question.
Related
I tried looking for a solution to this problem here but it seems that the closest solution I "MAY" have is this. However this is for tables. Since I am still quite new to this, I'm not sure how to apply this solution to my problem. Or if this is even the right solution for this.
My issue is that the border(bottom) of my blog post titles disappear when the nav bar sticks. The particular border-bottom I'm referring to is the dashed line under the blog-post date, share, and like button. I would've liked to add a screenshot but since I'm new here, SO won't let me yet.
This issue only happens on iPad I believe. So I'm not sure if my iPad (1st gen) is the problem or not. My blog is bizinformant.tumblr.com
Many thanks!
Here's the following html css jQuery:
/*blog post box*/
#content #posts {
width:800px;
margin:20px auto 50px;
text-align:center;
background-color:#f7f3ef;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
padding:10px 20px 24px;
}
/*this border-bottom of this element disappears when nav bar sticks*/
#permy {
font-style:normal;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:1.3em;
text-align:left;
margin-bottom:15px;
padding-bottom:8px;
border-bottom:1px dashed #000;
}
#mainnav {
list-style-type: none;
width:100%;
z-index:3;
text-align:center;
margin:0;
}
#mainnav ul {
display:inline-block;
margin-top:0px;
margin-bottom:0px;
list-style-type: none;
padding: 0;
z-index:3;
}
#mainnav li {
display:inline;
text-align:center;
margin:0px;
z-index:3;
}
/*stickydiv*/
#stickyalias {
display: none;
height: 10px;
}
$(function(){
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#mainnav').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#mainnav').css({position: 'fixed', top: '0px', left: '0px'});
$('#stickyalias').css('display', 'block');
} else {
$('#mainnav').css({position: 'static', top: '0px'});
$('#stickyalias').css('display', 'none');
}
});
});
{block:Text}
{block:Title}
<h1 class="title">
{Title}
</h1>
<div id="permy">
<a href="{Permalink}" class="date">
{block:Date}{ShortMonth} {DayOfMonth}, {ShortYear} {/block:Date}
</a>
{block:NoteCount}
<span id="dashy">-</span>
<a href="{Permalink}#notes" class="notes">
<span class="perm">{NoteCountWithLabel}
</a>
{/block:NoteCount}
<div class="my-like" title="Like">{LikeButton color="black"}</div>
{block:HasTags}
<a href="{ReblogURL}" class="reb">
<img src="http://static.tumblr.com/tnbktxc/HWun9rla7/reblog.png" class="reblogbutton">
</a>
{/block:HasTags}
</div>
{/block:Title}
<div class="text">{Body}</div>
{block:More}
<div class='rmlink'>
Read more
</div>
{/block:More}
{/block:Text}<!--textpost-->
Take a lot at the fiddle below and you would observe that when the line is about to end, the li elements break abruptly. Like, in the first line, after 4 li elements, the next li element breaks and the red circle comes in the same line while the text part moves to the next line.
Here is how I have defined the list elements in CSS:
.popular ul li:before { // Its this part of the code which is making the things
content: "\2022 "; // happen like this. If I remove this part, everything
color:red; // works fine.
}
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Here is the JsFiddle Link http://jsfiddle.net/e7rjW/.
Could someone please tell me how to correct this thing?
Change the display:inline to inline-block
.popular ul li{
display: inline-block;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
}
Fiddle: http://jsfiddle.net/e7rjW/5/
Replacing .popular ul li:before with .popular ul li a:before in the CSS fixes your issue.
See the updated JSFiddle.
EDIT: This doesn't work correctly in Chrome, as pointed out by #Nagarjun:
http://img577.imageshack.us/img577/6770/o7g.png
So you'll probably want to use his answer.
try this
http://jsfiddle.net/e7rjW/6/
replace this classess
.popular ul li{
display: inline;
padding: 4px 7px 4px 5px;
background-color:#ededed;
border-radius:5px;
border:2px solid #dcdcdc;
text-wrap:none;
float:left;
}
.popular ul li a{
display: inline-block;
color:#777;
font-family:Arial;
font-size:15px;
font-weight:700;
text-decoration:none;
text-shadow:0 1px 7px #fff;
}
although my questions has been answered lots of times before, but all the proposed solution I have tried and nothing seems to work.
what am trying to do is a big div that contains li tags; the li tags will also contain anchor tag, 2 divs and p tag.
to understand the big picture.. am trying to make a posting wall (activity-board), the wall will have posts looks like a bubble (div post) and the bubble will point (post-arrow) to a thumbnail image (a thumb3), to make the bubble style I made the post div absolute positioned with z-index less than the arrow-post.
and here is my css:
.activity-board {
background:#fff;
width:600px;
min-height:652px;
height:auto;
border:solid 2px #e7d28d;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-webkit-box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
box-shadow: inset 0px 0px 0px 3px rgba(255, 255, 255, 1);
float:left;
margin-left:20px;
}
.post-body{
position:relative;
display:block;
list-style-type:none;
width:600px;
height:auto;
background:#f9f9f9;
border-bottom:1px solid #CBCBCB;
border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
-webkit-border-radius:4px 4px 0 0;
background: #fff;
float:left;
overflow:visible;
clear:both;
z-index:9;
}
.post{
position:absolute;
width:500px;
line-height:20px;
height:auto;
background:#FFF;
display:block;
margin-top:22.5px;
margin-left:77px;
text-align:left;
float:left;
z-index:1;
}
.post-arrow{
position:relative;
margin-top:32px;
margin-left:6px;
width:12px;
height:18px;
background:url(images/post-arrow.png);
float:left;
z-index:5;
}
.post p{ color:#025373; padding:8px; word-wrap:break-word; }
a.thumb-3 {
margin-top:18px;
display:block;
margin-left:18px;
width:46px;
height:46px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index:10;
float:left;
}
a.thumb-3 img{
padding:0;
margin:0 auto;
width:46px;
height:46px;
float:left;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
here is my html:
<ul>
<li class="post-body">
<a class="thumb-3"><img src="images/Alsheikh Center (177).jpg" /></a>
<div class="post-arrow"></div>
<div class="post">
<p>
Hi there!
</p>
</div>
</li>
</ul>
http://jsfiddle.net/r9YpX/
Everything worked fine but the li tag does not expand to the content.. it only expands if I change the position of the post div to relative not absolute, which I cant change because it must be absolutely positioned under the arrow image to give it the bubble look.
any help would be appreciated.
Thanks.
ok Thanks guys i figuered it out.. I made position:relative and changed margin for post div and it worked! I thought I did this but perhaps I did something wrong that make it not work
I have CSS code from a template design that a client wants to use. One of the issue I'm having is that, once a text option is selected (those options with wide length) is writing over the drop-down arrow.
See image
I have tried using z-index and placing overflow:hidden where appropriate. Here is the CSS code:
/* search drop-down values */
select option {}
option.level-0{padding:0 3px;}
option.level-1,option.level-2,option.level-3,
option.level-4,option.level-5,option.level-6,
option.level-7{}
.selectBox-dropdown{ height: 34px; min-width:190px; max-width: 320px; position:relative; border:solid 1px #BBB; line-height:1; text-decoration:none; color:#666; outline:none; vertical-align:middle; background:#FFF; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; display:inline-block; cursor:default; margin-top: 1px\9; height: 33px\9;}
.content_right .selectBox-dropdown {width:303px;}
.content_right a.selectBox-dropdown:hover {text-decoration:none;}
.selectBox-dropdown:focus,
.selectBox-dropdown:focus .selectBox-arrow{border-color:#BBB}
.selectBox-dropdown.selectBox-menuShowing{-moz-border-radius-bottomleft:0; -moz- border-radius-bottomright:0; -webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-radius:0; border-bottom-left-radius:0; border-bottom-right-radius:0}
.selectBox-dropdown .selectBox-label{width:100%; padding:0 .7em; line-height:2.4em; display:inline-block; white-space:nowrap; overflow:hidden; font-size:14px}
.selectBox-dropdown .selectBox-arrow{position:absolute; top:0; right:0; width:23px; height:100%; background:url(images/sb-arrow.png) 50% center no-repeat; border-left:solid 1px #BBB; }
.selectBox-dropdown-menu{position:absolute; z-index:99999; max-height:200px; border:solid 1px #BBB; background:#FFF; -moz-box-shadow:0 2px 6px rgba(0,0,0,.2); -webkit-box-shadow:0 2px 6px rgba(0,0,0,.2); box-shadow:0 2px 6px rgba(0,0,0,.2); overflow:auto}
.selectBox-inline{width:250px; outline:none; border:solid 1px #BBB; background:#FFF; display:inline-block; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; overflow:hidden;}
.selectBox-inline:focus{border-color:#666}
.selectBox-options,
.selectBox-options li,
.selectBox-options li a{list-style:none; display:block; cursor:default; padding:0; margin:0}
.selectBox-options li a{color:#666; padding:1px .7em; white-space:nowrap; overflow:hidden; background:6px center no-repeat; text-decoration:none; font:14px/1.5em Arial,Helvetica,sans-serif;}
.selectBox-options li.selectBox-hover a{background-color:#EEE}
.selectBox-options li.selectBox-disabled a{color:#888; background-color:transparent}
.selectBox-options .selectBox-optgroup{color:#666; background:#EEE; font-weight:bold; line-height:1.5; padding:0 .3em; white-space:nowrap;}
.selectBox.selectBox-disabled{color:#888 !important}
.selectBox-dropdown.selectBox-disabled .selectBox-arrow{opacity:.5; filter:alpha(opacity=50); border-color:#666;}
.selectBox-inline.selectBox-disabled{color:#888 !important}
.selectBox-inline.selectBox-disabled .selectBox-options a{background-color:transparent !important}
code for the drop-down:
<div class="state-dropdown"><?php wp_state_dropdown() ?></div>
<span id="campus_dropdown"><?php if (empty($_GET['cp_state'])){ wp_campus_dropdown();} ?></span>
<?php if (!empty($_GET['cp_state'])){?>
<script type="text/javascript" >loadXMLDoc('<?php echo $_GET['cp_state'];?>','<?php echo $_GET['cp_your_college'];?>')</script>
<?php }?>
Any suggestions or help would be greatly appreciated. I know this is a bit too much of CSS, but again its from a template and I have been pulling my hair out for weeks!
Thank you so much in advance!
First of all without sample HTML, we can only guess at how the css is used. After analyzing the css you provided, I took a stab at how I thought it might be used, jsFiddle here. Based on this assumption there are two options:
Set a right padding for the elements that contain the menu options. This may cause the dropdown to widen, but should be better as it will allow users to see the entire text of the option.
Set the background for the dropdown arrow element ('.selectBox-arrow') to a solid color and match the border radius of the containing element. Note that the background color defaults to transparent.
If for whatever reason neither of these options work in your situation, remember, Firebug (or other browser's developer tools) are your friend. These tools can help make short work of problems like this.
I have an unordered list full or anchors. I have a CSS :Hover event that adds borders to it but all the anchors to the left slightly adjust when i hover because it is adding 1px to the width and auto adjusting. how do i make sure the positioning is absolute?
div a:visited, #homeheader a{
text-decoration:none;
color:black;
margin-right:5px;
}
div a:hover{
background-color:#D0DDF2;
border-radius:5px;
border:1px solid #102447;
}
div li{
padding:0;
margin:0px 10px;
display:inline;
font-size:1em;
}
<div>
<ul>
<li>this</li>
<li>that</li>
<li>this again</li>
<li>that again</li>
</ul>
</div>
I made a JS Fiddle demo here.
You can add a transparent border to the non-hover state to avoid the "jumpiness" when the border appears:
http://jsfiddle.net/TEUhM/3/
#homeheader a:visited, #homeheader a{
border:1px solid transparent;
}
You can also use outline, which won't affect the width i.e. so no "jump" effect. However,support for a rounded outline may be limited.
You could use a box shadow, rather than a border for this sort of functionality.
This works because your shadow doesn't 'take size in the DOM', and so won't affect the positioning, unlike that of a border.
Try using a declaration like
box-shadow:0 0 1px 1px #102447;
instead of your
border:1px solid #102447;
on your hover state.
Below is a quick demo of this in action:
DEMO
#homeheader a:visited,
#homeheader a {
text-decoration: none;
color: black;
margin-right: 5px;
}
#homeheader a:hover {
background-color: #D0DDF2;
border-radius: 5px;
box-shadow: 0 0 1px #102447;
}
#homeheader li {
padding: 0;
margin: 0px 10px;
display: inline;
font-size: 1em;
}
<div id="homecontainer">
<div id="homeheader">
<ul>
<li>this
</li>
<li>that
</li>
<li>this again
</li>
<li>that again
</li>
</ul>
</div>
</div>
Add a margin of 1px and remove that margin on hover, so it is replaced by the border.
http://jsfiddle.net/TEUhM/4/
After taking a long time pressure i found a cool solution.
Hope that it will help others.
on the add the folloing code :
HTML
<div class="border-test">
<h2> title </h2>
<p> Technology founders churn rate niche market </p>
</div>
CSS
.border-test {
outline: 1px solid red;
border: 5px solid transparent;
}
.border-test:hover {
outline: 0px solid transparent;
border: 5px solid red;
}
Check live : Live Demo
Hope it will help.
No one has mentioned it here, but the best and simplest solution to this in my opinion is to use "box shadow" instead of borders. The magic is on the "inset" value which allows it be like a boarder.
box-shadow: inset 0 -3px 0 0 red;
You can offset the X or Y to change top/bottom and use -negative value for opposite sides.
.button {
width: 200px;
height: 50px;
padding: auto;
background-color: grey;
text-align: center;
}
.button:hover {
box-shadow: inset 0 -3px 0 0 red;
background-color: lightgrey;
}
<div class="button"> Button </div>
You can use box-shadow which does not change your box-size, unlike border.
Here is a little tutorial.
Just add the following code into your css file
#homeheader a {
border:1px solid transparent;
}
The CSS "box-sizing" attribute fixed this problem for me. If you give your element
.class-name {
box-sizing: border-box;
}
Then the width of the border is added to the inside of the box when the browser calculates its width. This way when you turn the border style on and off, the size of the element doesn't change (which is what causes the jittering you observed).
This is a new technology, but the support for border-box is pretty consistent. Here is a demo!
The easiest method I found was using 'outline' instead of 'border'.
#home:hover{
outline:1px solid white;
}
instead of
#home:hover{
border:1px solid white;
}
Works the best!
https://www.kirupa.com/html5/display_an_outline_instead_of_a_border_hover.htm
Add a negative margin on hover to compensate:
#homeheader a:hover{
border: 1px solid #102447;
margin: -1px;
}
updated fiddle
In the fiddle the margin: -1px; is a little more complex because there was a margin-right getting overridden, but it's still just a matter of subtracting the newly-occupied space.
I too was facing the same problem. The fix mentioned by Wesley Murch works! i.e. adding a transparent border around the element to be hovered.
I had a ul on which :hover was added to every li. Every time, I hovered on each list item, the elements contained inside li too moved.
Here is the relevant code:
html
<ul>
<li class="connectionsListItem" id="connectionsListItem-0">
<div class="listItemContentDiv" id="listItemContentDiv-0">
<span class="connectionIconSpan"></span>
<div class="connectListAnchorDiv">
Test1
</div>
</div>
</li>
</ul>
css
.listItemContentDiv
{
display: inline-block;
padding: 8px;
right: 0;
text-align: left;
text-decoration: none;
text-indent: 0;
}
.connectionIconSpan
{
background-image: url("../images/connection4.png");
background-position: 100% 50%;
background-repeat: no-repeat;
cursor: pointer;
padding-right: 0;
background-color: transparent;
border: medium none;
clear: both;
float: left;
height: 32px;
width: 32px;
}
.connectListAnchorDiv
{
float: right;
margin-top: 4px;
}
The hover defn on each list item:
.connectionsListItem:hover
{
background-color: #F0F0F0;
background-image: linear-gradient(#E7E7E7, #E7E7E7 38%, #D7D7D7);
box-shadow: none;
text-shadow: none;
border-radius: 10px 10px 10px 10px;
border-color: #AAAAAA;
border-style: solid;
}
The above code used to make the containing elements shift, whenever I hovered over connectionsListItem. The fix was this added to the css as:
.connectionsListItem
{
border:1px solid transparent;
}
Use :before to create the border, that way it won't modify the actual content and gives you more freedom. Check it out here:
http://codepen.io/jorgenrique/pen/JGqOMb
<div class='border'>Border</div>
<div class='before'>Before</div>
div{
width:300px;
height:100px;
text-align:center;
margin:1rem;
position:relative;
display:flex;
justify-content:center;
align-items: center;
background-color:#eee;
}
.border{
border-left:10px solid deepPink;
}
.before{
&:before{
content:"";
position:absolute;
background-color:deepPink;
width:10px;
height:100%;
left:0;
top:0;
}
&:hover{
background-color:#ccc;
&:before{
width:0px;
transition:0.2s;
}
}
}
Be careful if you also use padding.
In my case, I had a 5px padding inside the hover defn. It should be moved inside the actual class of the element you want to hover over.
Code snippet