I am trying to have all three spans within an anchor, inline. Not sure what is missing from the code:
a.facebook-button {
float: none;
display: inline-block;
margin-bottom: 5px;
left: auto;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
}
.fb-button-left {
width: 40px;
}
.fb-button-right,
.fb-button-center,
.fb-button-left {
float: left;
height: 40px;
background: url(../img/fb-button.png) left top no-repeat;
}
.fb-button-right {
width: 6px;
background-position: 100% -80px;
}
.fb-button-center {
padding: 0 5px 0 8px;
line-height: 40px;
font-size: 16px;
color: #FFFFFF;
background-color: #6385ba;
background-position: left -40px;
background-repeat: repeat-x;
}
div.socialInvites {
padding: 20px 20px 0px 20px;
text-align: center;
left: auto;
}
<div class="socialInvites">
<a href="main/facebook_request" class="facebook-button" id="facebookbutton">
<span class="fb-button-left"></span>
<span class="fb-button-center"><strong>Connect</strong> with <strong>Facebook</strong></span>
<span class="fb-button-right"></span>
</a>
</div>
Please try adding the following:
display:inline;
Example:
.fb-button-right {
width: 6px;
background-position: 100% -80px;
display:inline;
}
Also, same for the fb-button-center.
Related
I am trying to put the horizontal bar beneath the text title where is inside of the container <div> but the horizontal bar just effect in the width, but not moving up to the position...
I am hesitating that should I create one more div. I have been trying to move up the hr by top with vh or even margin, but that is not workable.
What I want is to move the hr below the title.
How I want the hr to move up
Original
.topcon {
background-color: #f6f5f5;
position: relative;
width: 250px;
height: 250px;
border: 15px;
padding: 50px;
margin: 180px auto 150px auto;
border-radius: 20px;
}
.pattern-card {
position: relative;
right: 50px;
border-radius: 20px 20px 0px 0px;
bottom: 50px;
}
.victor {
position: relative;
background-color: #ffffff;
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
margin-left: 50px;
margin-right: auto;
bottom: 110px;
width: 50%;
}
.user-name {
position: absolute;
width: 30%;
left: 20vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #2d3248;
font-size: 18px;
}
.user-age {
position: absolute;
width: 20%;
right: 15.5vh;
top: 40vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
font-size: 18px;
}
.user-location {
position: absolute;
width: 25%;
left: 22.5vh;
top: 45.5vh;
text-align: center;
display: inline;
margin: 0 auto 0 auto;
font-family: "Kumbh Sans", sans-serif;
font-weight: 700;
color: #969696;
}
hr {
border-top: 1px solid #969696;
width: 100%;
bottom: 50vh;
}
<div class="topcon">
<img class="pattern-card" src="images/bg-pattern-card.svg" alt="pattern card at the frame." />
<img class="victor" src="images/image-victor.jpg" alt="image for Victor" />
<p class="user-name">Victor Crest</p>
<p class="user-age">26</p>
<p class="user-location">London</p>
<hr /> 80K Followers 803K Likes 1.4K Photos
</div>
Try with this
hr{
border-top: 1px solid #969696;
margin-left: -50px;
width: 350px;
margin-top: -15px;
}
change the margin top and width and margin left according to your div width and height
You can also dismiss the horizontal ruler (line) entirely, and use CSS border-top. I tried and got this:
body {
font-family: "Open Sans", sans-serif;
}
body * {
box-sizing: border-box;
}
.card {
width: 300px;
height: 320px;
margin: 20px auto;
overflow: hidden;
text-align: center;
display: flex;
flex-direction: column;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.card-header {
height: 105px;
background: #44d3d9;
}
.card-image {
margin-top: -50px;
}
.card-image img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width: 100px;
height: auto;
border: 4px solid #fff;
}
.card-content h2 {
font-size: 14px;
margin-bottom: 5px;
}
.card-content h2 span {
color: #6d6d6d;
padding-left: 6px;
}
.card-content .location {
margin: 0;
font-size: 13px;
color: #6d6d6d;
}
.card-footer {
display: flex;
margin-top: auto;
height: 90px;
border-top: 1px solid #efefef;
}
.card-footer > div {
flex-grow: 1;
display: flex;
flex-direction: column;
border-right: 1px solid #efefef;
}
.card-footer > div:last-child {
border-right: none;
}
.card-footer ul {
margin: auto 0;
padding: 0;
list-style-type: none;
}
.card-footer ul li {
color: #6d6d6d;
font-size: 11px;
}
.card-footer ul li.count {
color: #111111;
font-size: 16px;
font-weight: 600;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="card">
<div class="card-header"></div>
<div class="card-image">
<img src="https://randomuser.me/api/portraits/men/91.jpg" alt="">
</div>
<div class="card-content">
<h2>Victor Crest <span>26</span></h2>
<p class="location">London</p>
</div>
<div class="card-footer">
<div>
<ul>
<li class="count">80K</li>
<li>Folowers</li>
</ul>
</div>
<div>
<ul>
<li class="count">803K</li>
<li>Likes</li>
</ul>
</div>
<div>
<ul>
<li class="count">1.4K</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>
I have the following flex item (#globalSearchContLi) inside a flex-container. The container is an unordered list.
My problem is that I'm creating a fun looking search bar with a half-sphere submit button. The button is pretty much attached to the search bar with inline-block and margin properties.
This bundle (the search bar and button) won't center in the div any way I try to.
I tried setting #globalSearchCont with a specific width and auto side margins, but the whole flexbox presentation won't display correctly on mobile.
Any suggestions/advice? Thanks in advance.
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#globalSearchContLi {
flex-grow: 7;
margin: 0px 15px;
flex-basis: 100px;
}
#munchGlobalSearchbar {
width: 240px;
height: 50px;
/* box-shadow: 0 0 0 1px#000,0 0 0 3px #FFF, 0 0 0 5px #333; */
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
display: inline-block;
margin-top: 20px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
height: 51px;
margin: 0px 0px -17px -12px !important;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
display: inline-block;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
Use justify-content: center on the parent to horizontally center the button elements.
#globalSearchContLi {
list-style-type: none;
margin-left: 0;
}
#globalSearchCont {
display: flex;
justify-content: center;
height: 50px;
}
#munchGlobalSearchbar {
width: 240px;
font-weight: 300;
font-size: 1.6rem;
border-radius: 10px;
text-align: center;
background-color: #edad0c;
border-bottom: 2px solid #333;
border-top: 2px solid #333;
border-left: 2px solid #333;
}
#munchGlobalSearchbar::placeholder {
color: #000;
}
#globalSearchBtn {
background-image: url(../imgs/addOn/panEmoji.png);
width: 50px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
border: 2px solid #333;
background-color: #38b32b;
transition: .2s all ease;
margin-left: -10px;
}
.backImageCon {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
ul {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
<ul>
<li id="globalSearchContLi">
<div id="globalSearchCont">
<input placeholder="Search..." type="textbox" name="globalSearch" id="munchGlobalSearchbar">
<div id="globalSearchBtn" class="backImageCon"></div>
</div>
</li>
</ul>
I have a website with bootstrap CSS.
I tested it on chrome and edge browsers, the CSS seems perfectly fine.
On firefox, everything looks zoomed in. When i go to the settings of the browser and zoom out, I can see the full HTML.
On chrome :
https://imgur.com/a/bRdLT4C
Firefox normal size:
https://imgur.com/a/CDNwKCG
Firefox zoomed out :
https://imgur.com/a/w5X8nOb
I am completely new to CSS, any help would be appreciated.
Sample of my code: https://jsfiddle.net/hewp0q2j/
HTML
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container app">
<div class="row app-one">
<div class="col-sm-4 side">
<div class="side-one">
<div class="row sideBar" id="users">
<div class="row sideBar-body">
<div class="col-sm-3 col-xs-3 sideBar-avatar">
<div class="avatar-icon">
<img src="img/user_away.png">
</div>
</div>
<div class="col-sm-9 col-xs-9 sideBar-main">
<div class="row">
<div class="col-sm-8 col-xs-8 sideBar-name">
<span class="name-meta">David Leff</span><br><span class="time-meta">Last Active 1h 51m ago.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-8 conversation">
<div id="chatdiv">
<div class="row message" id="conversation">
<div class="row message-body">
<div class="col-sm-12 message-main-receiver">
<div class="receiver">
<div class="message-text">
Hi, what are you doing?!
</div>
<span class="message-time pull-right">
Sun
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row reply">
<div class="col-sm-9 col-xs-9 reply-main">
<textarea class="form-control" rows="1" id="comment" onkeypress="processKeyPress(event, this)"></textarea>
</div>
<div class="col-sm-1 col-xs-1 reply-send">
<span onclick="SendMessage()">
<i class="fa fa-send fa-2x" aria-hidden="true"></i>
</span>
<span class="error" id ="error"></span>
</div>
</div>
</div>
</div>
</div>
CSS
html,
body,
div,
span {
/** height: 100%;*/
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.fa-2x {
font-size: 1.5em;
}
.app {
position: relative;
overflow: hidden;
top: 19px;
height: calc(100% - 38px);
margin: auto;
padding: 0;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.app-one {
background-color: #f7f7f7;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.side {
padding: 0;
margin: 0;
height: 100%;
}
.side-one {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
z-index: 1;
position: relative;
display: block;
top: 0;
}
.side-two {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
z-index: 2;
position: relative;
top: -100%;
left: -100%;
-webkit-transition: left 0.3s ease;
transition: left 0.3s ease;
}
.heading {
padding: 10px 16px 10px 15px;
margin: 0;
height: 60px;
width: 100%;
background-color: #eee;
z-index: 1000;
}
.heading-avatar {
padding: 0;
cursor: pointer;
}
.heading-avatar-icon img {
border-radius: 50%;
height: 40px;
width: 40px;
}
.heading-name {
padding: 0 !important;
cursor: pointer;
}
.heading-name-meta {
font-weight: 700;
font-size: 100%;
padding: 5px;
padding-bottom: 0;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
display: block;
}
.heading-online {
display: none;
padding: 0 5px;
font-size: 12px;
color: #93918f;
}
.heading-compose {
padding: 0;
}
.heading-compose i {
text-align: center;
padding: 5px;
color: #93918f;
cursor: pointer;
}
.heading-dot {
padding: 0;
margin-left: 10px;
}
.heading-dot i {
text-align: right;
padding: 5px;
color: #93918f;
cursor: pointer;
}
.searchBox {
padding: 0 !important;
margin: 0 !important;
height: 60px;
width: 100%;
}
.searchBox-inner {
height: 100%;
width: 100%;
padding: 10px !important;
background-color: #fbfbfb;
}
/*#searchBox-inner input {
box-shadow: none;
}*/
.searchBox-inner input:focus {
outline: none;
border: none;
box-shadow: none;
}
.sideBar {
padding: 0 !important;
margin: 0 !important;
background-color: #fff;
overflow-y: auto;
border: 1px solid #f7f7f7;
height: calc(100% - 20px);
}
.sideBar-body {
position: relative;
padding: 10px !important;
/**border-bottom: 1px solid #f7f7f7;*/
height: 72px;
margin: 0 !important;
/*cursor: pointer;*/
}
/*.sideBar-body:hover {
background-color: #f2f2f2;
}*/
.sideBar-avatar {
text-align: center;
padding: 0 !important;
}
.avatar-icon img {
border-radius: 50%;
height: 49px;
width: 49px;
}
.sideBar-main {
padding: 0 !important;
}
.sideBar-main .row {
padding: 0 !important;
margin: 0 !important;
}
.sideBar-name {
padding: 10px !important;
}
.name-meta {
font-size: 100%;
padding: 1% !important;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
color: #000;
}
.sideBar-time {
padding: 10px !important;
}
.time-meta {
text-align: right;
font-size: 12px;
padding: 1% !important;
color: rgba(0, 0, 0, .4);
vertical-align: baseline;
}
/*New Message*/
.newMessage {
padding: 0 !important;
margin: 0 !important;
height: 100%;
position: relative;
left: -100%;
}
.newMessage-heading {
padding: 10px 16px 10px 15px !important;
margin: 0 !important;
height: 100px;
width: 100%;
background-color: #00bfa5;
z-index: 1001;
}
.newMessage-main {
padding: 10px 16px 0 15px !important;
margin: 0 !important;
height: 60px;
margin-top: 30px !important;
width: 100%;
z-index: 1001;
color: #fff;
}
.newMessage-title {
font-size: 18px;
font-weight: 700;
padding: 10px 5px !important;
}
.newMessage-back {
text-align: center;
vertical-align: baseline;
padding: 12px 5px !important;
display: block;
cursor: pointer;
}
.newMessage-back i {
margin: auto !important;
}
.composeBox {
padding: 0 !important;
margin: 0 !important;
height: 60px;
width: 100%;
}
.composeBox-inner {
height: 100%;
width: 100%;
padding: 10px !important;
background-color: #fbfbfb;
}
.composeBox-inner input:focus {
outline: none;
border: none;
box-shadow: none;
}
.compose-sideBar {
padding: 0 !important;
margin: 0 !important;
background-color: #fff;
overflow-y: auto;
border: 1px solid #f7f7f7;
height: calc(100% - 160px);
}
/*Conversation*/
.conversation {
padding: 0 !important;
margin: 0 !important;
height: 100%;
/*width: 100%;*/
border-left: 1px solid rgba(0, 0, 0, .08);
/*overflow-y: auto;*/
}
.message {
padding: 0 !important;
margin: 0 !important;
background: url("w.jpg") no-repeat fixed center;
background-size: cover;
overflow-y: auto;
border: 1px solid #f7f7f7;
height: calc(100% - 120px);
}
.message-previous {
margin : 0 !important;
padding: 0 !important;
height: auto;
width: 100%;
}
.previous {
font-size: 15px;
text-align: center;
padding: 10px !important;
cursor: pointer;
}
.previous a {
text-decoration: none;
font-weight: 700;
}
.message-body {
margin: 0px 0px 3px 0px !important;
padding: 0 !important;
width: auto;
height: auto;
}
.message-main-receiver {
/*padding: 10px 20px !important;*/
max-width: 60%;
}
.message-main-sender {
/* padding: 3px 20px !important;*/
margin-left: 40% !important;
max-width: 60%;
}
.message-text {
margin: 0 !important;
padding: 5px !important;
word-wrap:break-word;
font-weight: 200;
font-size: 14px;
padding-bottom: 0 !important;
}
.message-time {
margin: 0 !important;
margin-left: 50px !important;
font-size: 12px;
text-align: right;
color: #9a9a9a;
}
.receiver {
width: auto !important;
padding: 4px 10px 7px !important;
border-radius: 10px 10px 10px 0;
background: #dae4f1;
font-size: 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
word-wrap: break-word;
display: inline-block;
}
.sender {
float: right;
width: auto !important;
background: #2b4871; /**#ffdb99;**/
color:white;
border-radius: 10px 10px 0 10px;
padding: 4px 10px 7px !important;
font-size: 12px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
display: inline-block;
word-wrap: break-word;
}
/*Reply*/
.reply {
height: 117px;
width: 100%;
background-color: #f5f1ee;
padding: 10px 5px 10px 5px !important;
margin: 0 !important;
z-index: 1000;
}
.reply-emojis {
padding: 5px !important;
}
.reply-emojis i {
text-align: center;
padding: 5px 5px 5px 5px !important;
color: #93918f;
cursor: pointer;
}
.reply-recording {
padding: 5px !important;
}
.reply-recording i {
text-align: center;
padding: 5px !important;
color: #93918f;
cursor: pointer;
}
.reply-send {
padding: 5px !important;
}
.reply-send i {
text-align: center;
padding: 5px !important;
color: #93918f;
cursor: pointer;
}
.reply-main {
padding: 2px 5px !important;
}
.reply-main textarea {
width: 100%;
resize: none;
overflow: hidden;
padding: 5px !important;
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
height: 100%;
font-size: 16px;
}
.reply-main textarea:focus {
outline: none;
border: none;
text-indent: 5px;
box-shadow: none;
}
#media screen and (max-width: 700px) {
.app {
top: 0;
height: 100%;
}
.heading {
height: 70px;
background-color: #009688;
}
.fa-2x {
font-size: 2.3em !important;
}
.heading-avatar {
padding: 0 !important;
}
.heading-avatar-icon img {
height: 50px;
width: 50px;
}
.heading-compose {
padding: 5px !important;
}
.heading-compose i {
color: #fff;
cursor: pointer;
}
.heading-dot {
padding: 5px !important;
margin-left: 10px !important;
}
.heading-dot i {
color: #fff;
cursor: pointer;
}
.sideBar {
height: calc(100% - 130px);
}
.sideBar-body {
height: 80px;
}
.sideBar-avatar {
text-align: left;
padding: 0 8px !important;
}
.avatar-icon img {
height: 55px;
width: 55px;
}
.sideBar-main {
padding: 0 !important;
}
.sideBar-main .row {
padding: 0 !important;
margin: 0 !important;
}
.sideBar-name {
padding: 10px 5px !important;
}
.name-meta {
font-size: 16px;
padding: 5% !important;
}
.sideBar-time {
padding: 10px !important;
}
.time-meta {
text-align: right;
font-size: 14px;
padding: 4% !important;
color: rgba(0, 0, 0, .4);
vertical-align: baseline;
}
/*Conversation*/
.conversation {
padding: 0 !important;
margin: 0 !important;
height: 100%;
/*width: 100%;*/
border-left: 1px solid rgba(0, 0, 0, .08);
/*overflow-y: auto;*/
}
.message {
height: calc(100% - 140px);
}
.reply {
height: 70px;
}
.reply-emojis {
padding: 5px 0 !important;
}
.reply-emojis i {
padding: 5px 2px !important;
font-size: 1.8em !important;
}
.reply-main {
padding: 2px 8px !important;
}
.reply-main textarea {
padding: 8px !important;
font-size: 18px;
}
.reply-recording {
padding: 5px 0 !important;
}
.reply-recording i {
padding: 5px 0 !important;
font-size: 1.8em !important;
}
.reply-send {
padding: 5px 0 !important;
}
.reply-send i {
padding: 5px 2px 5px 0 !important;
font-size: 1.8em !important;
}
}
#HelpASisterOut you should really rethink your HTML and CSS formats. The website doesn't need to be as complicated. General styling recomendations are:
avoid setting styles in CSS to html/body/div/span tags
avoid repeated CSS code, use classes instead (padding, margin, etc.)
avoid using calc() and mixes of percentages and pixels (breaks responsiveness of the page)
think another solution (inheritance, classes, ids) instead of using !important everywhere
avoid using overflow and setting positions manually as each browser may render different things/sizes
other things like repeating same-width bootstrap classes are unnecessary:
col-sm-9 col-xs-9
bootstrap takes the smaller one and applies to all bigger sizes.
This is not a direct answer and I apologize for not pointing the exact mistake, but I promise you that with this things in mind your app will be rightly rendered on all mayor browsers and even on mobile. You just need to look at things differently, maybe explore some webpages done by others. Hope this helps.
Good learning!
I am making one fan-site and have very stupid bug on news bar. When I zoom the page, 1px line appears.
This is the code:
<div class="velikibar">
<div id="velikibar_h">
<div id="naslovbar"><?=$naslov?></div>
</div>
<div id="velikibar_b">
<div class="paddingvelikibar">
<?=$sadrzaj?>
</div>
</div>
<div id="velikibar_f">
<div id="fblikedugme"><?=$vreme?><br /><div class="fb-like" data-href="http://********.**/article.php?id=<?=$id?>" data-send="false" data-layout="button_count" data-width="100" data-show-faces="false"></div></div>
<div id="komentarbarbox">Komentari (<?=$brkomentara?>)</div>
</div>
And this is the CSS (http://tny.cz/d9fb11db):
.velikibar
{
background-color:transparent;
width: 652px;
}
#velikibar_h
{
background-image:url('slike/velikibar_h.png');
background-repeat: no-repeat;
width: 652px;
height: 109px;
padding: 0;
margin: 0;
}
#velikibar_b
{
background-image:url('slike/velikibar_b.png');
background-repeat: repeat-y;
width: 652px;
min-height: 30px;
padding: 0;
margin: 0;
}
#velikibar_f
{
background-image:url('slike/velikibar_f.png');
background-repeat: no-repeat;
width: 652px;
height: 112px;
padding: 0;
margin: 0;
}
#velikibar_f2
{
background-image:url('slike/velikibar_f2.png');
background-repeat: no-repeat;
width: 652px;
height: 112px;
padding: 0;
margin: 0;
}
.paddingvelikibar
{
padding: 5px 35px 5px 30px;
text-align:justify;
color: #fff5f9;
}
#fblikedugme
{
position: absolute;
margin-left: 35px;
margin-top: 40px;
color:#fff5f9;
line-height: 20px;
}
#komentarbarbox
{
position: absolute;
margin-left: 425px;
margin-top: 65px;
}
#komentarbarbox a, #komentarbarbox a:link, #komentarbarbox a:visited
{
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 0 #6f1c3f;
color: #fdd2e4;
text-decoration:none;
}
#komentarbarbox a:hover, #komentarbarbox a:focus
{
color: #d61566;
text-decoration:none;
}
#naslovbar
{
font: 23px/1.4em arial, helvetica;
color: #e1aec4;
padding-top: 50px;
padding-left: 35px;
text-shadow: #FCFCFC 0px 1px 0px;
}
.paddingvelikibar img
{
background-color: #fff2f7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
behavior: url("skripte/ie-css3.htc");
padding: 4px;
}
Please help me how to fix this. Thanks in advance
This appears to be a browser bug.
For example, an element which is 5px wide, viewed on 1.5 zoom would be 7.5px wide, but the browser has to round it to full pxls so something like this can happen.
To make sure it doesnt happen you can make the elements overlap, or in your case, best would be not to split the pink background image in 2 elements, but have a single element carry the whole image.
Chrome doesnt use font-resize as zoom option, so it is very unlikely that this is caused by a particullar line of css.
SOLVED:
I have a demo which works on jsFiddle, but the same one doesn't work on other site. You will see the .right_side_header class overflow onto the next line, which is under the main_container-->header--->class. Why is this so? It is 763px, I've double checked the pixels for every box, but it overflows. Can someone please tell me why? If you inspect the element, and uncheck the width of 763px, it doesn't overflow.
Here's the code for some of the header css:
.header {
display: block;
padding-top: 33px;
padding-left: 30px;
padding-right: 30px;
margin-left:auto;
margin-right:auto;
width: 900px;
}
.right_side_header {
display: inline-block;
vertical-align: top;
padding-top: 35px;
width: 763px;
}
img.globe {
display: inline;
}
#globe-logo {
display: inline;
position: relative;
z-index: 9000;
}
span.letter_logo {
font-family: HelveticaBlack;
font-size: 41px;
height: 41px;
line-height: 1;
margin-left: auto;
margin-right: auto;
text-align: center;
text-shadow: 1px 1px 0px rgba(245, 245, 245, 0.35), -1px -1px 0px rgba(245, 245, 245, 0.35);
}
div.letter_logo_container {
text-align: center;
display: block;
line-height: 1;
width: 621px;
}
and here is the code for the nav_bar css:
div.nav_phone {
height: 18px;
padding-top: 3px;
width: 621px;
display: inline-block;
}
span.sales_ph_num {
font-family: HelveticaItalic;
font-size: 11.5px;
color: #c10d24;
text-shadow: 1px 1px 0px rgba(245, 235, 236, 0.4), -1px -1px 0px rgba(245, 235, 236, 0.4);
}
div.sales_ph_num {
text-align: center;
display: inline-block;
vertical-align: top;
width: 110px;
}
.nav_bar {
background-image: url("132/nav_bar.png");
background-repeat: no-repeat;
height: 18px;
width: 621px;
position: relative;
}
div#links {
line-height: 1;
position: absolute;
top: 50%;
left: 119px;
margin: -6px auto 0 auto;
font: 12px HelveticaMedium;
text-align: center;
text-shadow: 1px 1px 0px rgba(237, 237, 237, 0.5), -1px -1px 0px rgba(237, 237, 237, 0.5);
}
#Products {
margin-left: 36px;
}
#Terms, #Terms_Nav {
margin-left: 36px;
}
a.Terms, a.Terms:visited, #Home a, #Home a:visited, a#About, a#About:visited,
#About a, #About a:visited {
text-decoration: none;
color: #000000;
cursor:pointer;
}
li#line_break {
margin-top: 12px;
}
#About {
text-decoration: none;
color: #000000;
margin-left: 36px;
margin-right: 35px;
}
and this is the main_body css:
html, body {
width: 100%;
height: 100%;
background-color: #fafafa;
-webkit-overflow-scrolling: touch;
position: relative;
overflow-x: hidden;
}
.main_container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
background-color: #ffffff;
-webkit-border-radius: 8px 8px 8px 8px;
-moz-border-radius: 8px 8px 8px 8px;
-o-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
position: absolute;
left: -9999em;
}
and theres a css that does a reset:
* {
margin: 0;
padding: 0;
}
Thank you for any help.
Remove the top: -61px; from div.ad_banner.
Also if you are having a loading screen I would recommend having some kind of simple animation just so it doesn't look like the page has died.
You have limited your right_side_header class to 763px, also your sales_ph_num class is limited to 110px.
But on jsfiddle you have set 900px and 137px respectevly.
Just set same values like you did on jsfiddle. =))
SOLUTION:
ok this issue was bugging me for awhile, and i don't understand why this is. i noticed some extra 1 or 2 pixels of whitespace between the sales_ph_num div and the nav_bar div, there shouldn't have been any. then i saw that i was using inline-block, searched on SO for inline-block and unaccounted whitespace, and there you go. i had used inline block with 2 or 3 divs, and it was adding extra whitespace, which was making the content overflow since every box had a width.
if you have two divs side by side, with one div as inline, and the other inline-block, and you place the div tags in html on separate lines, white space is added:
<div class="container_1000px">
<div class="container">
My content.
</div>
<div class="next_container">
Next content.
</div>
</div>
.container_1000px
{
width: 1000px;
}
.container
{
display: inline;
width:960px;
}
.next_container
{
display: inline-block
width: 40px;
}
this will overflow because extra whitespace is added between the inline and inline-blocked div.
the solution is to place each divs on one line.
<div class="container_1000px"><div class="container">My content.</div><div class="next_container">Next content.</div></div>
and no extra whitespace will be added. thanks again.
Can anyone explain to me why this happens and why it should/shouldn't?