I've integrated an image to line up with and other image at the top (lines)and there is 6px difference in Firefox compare to Chrome or Safari. I don't understand where the difference comes from since all my other images (lines) are lining up perfectly in all browsers. my website: beta.zenniel.ca
Here is my css:
.BlogueTop {
float: right;
background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
width: 12px;
height: 268px;
margin: -269px 79px 0px 0px;
padding: 0;
border: 0;
}
By the way, the image at the top is the same place in Firefox and Chrome (140px from the right).
Thanks for your help!
at top of your .css file add
*{
margin: 0;
padding: 0;
}
Each browser does have his own default values. Therefore there are css files that set all default values of the browsers to your own default values. Such css files you can find on the web.
Here's an example: http://meyerweb.com/eric/tools/css/reset/
Why not changing your margin to this
.BlogueTop {
background: url("http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 0 none;
float: right;
height: 268px;
margin: -269px 84px 0 0;
padding: 0;
width: 12px;
}
instead of this
.BlogueTop {
float: right;
background: url(http://beta.zenniel.ca/wp-content/uploads/2014/07/blogueTop.jpg) no-repeat;
width: 12px;
height: 268px;
margin: -269px 79px 0px 0px;
padding: 0;
border: 0;
}
Had the same issue.
Setting line-height: 0px worked for me.
Related
The image of a background: or background-image: not showing up on website, img src not showing up either.
However, all pictures show up fine only on chrome desktop broswer, but they don’t show up on chrome mobile broswer. Some of the browsers I’ve tested and don’t show the images on my website are: chrome mobile, safari mobile, IE desktop, Microsoft edge desktop.
The entire html css code can be found at the website, is it allowed to include the link in my post?
styles.css
.wrapper {
background: #fff;
margin-top: 20px;
margin-bottom: 20px;
padding: 0 0;
box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,0.5);
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: url('./imgSrc/chessbk.png');
background-position: center;
background-size: cover;
/* background-attachment: fixed;*/
/* -o-background-size: cover;*/
/*-moz-background-size: cover;*/
/*-webkit-background-size: cover;*/
}
/* Main page style */
.wrapper .main {
position: relative;
clear: both;
overflow: hidden;
height: auto;
min-height: 100%;
padding: 0 0 0 0;
}
.main {
background-image: linear-gradient(rgba(172, 207, 229, 1), rgba(172, 207, 229, .1));
clear: both;
overflow: hidden;
padding: 0px 0 0 0;
} /*----end main page styles---*/
/* Main page header style */
.header {
position: relative;
z-index: 1;
}
.header .headerIMG {
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .3;
width: 100%;
height: 100%;
}
.siteTitle {
padding-top: 25px;
text-align: center;
margin: 0 auto;
width: 940px;
position: relative;
color: floralwhite;
padding-bottom: 25px;
} /*-----end header styles----*/
/* Navigation styles */
#access {
background: url('./imgSrc/access_bg.png');
/*
opacity: 0.8;
filter:alpha(opacity=80);
*/
display: block;
float: left;
margin: 0 auto;
width: 940px;
font-weight:bold;
border-top:1px solid rgba(0,0,0,0.5);
border-bottom:1px solid rgba(0,0,0,1);
}
Case of using background: HTML
<body>
<div class="wrapper">
<div class="header">
<div class="headerIMG" style="background: url(imgSrc/planet.jpg) no-repeat center bottom;">
</div>
<div class="siteTitle">
<h1> Rocky Mountain Chess Rating System</h1>
<h2> Idaho Chess Association Database</h2>
</div>
Further down in the html file above:
<div class="main">
<div class="icaImg">
<img src="imgSrc/icaLogo.png">
</div>
<div id="contentGameEnter">
<div class="enterGame">
Just tested it, this is an update edit, images appear on safari desktop and Firefox desktop. So the browsers which don’t work are mobile browsers and IE desktop, Microsoft edge desktop
Once you get https, I used letsencrypt to get free sll certificate, it solves the problem. In other words, getting https has now allowed the images to show up on chrome mobile, safari mobile, (chrome desktop, but they already showed here), IE desktop. Overall, get https it solved this problem for me.
I have a div on my website that won't be on the top, it's always a little bit below the top so I was looking for a way to make it be at the top without space between the div and the top, but I've had no luck yet.
Here is the CSS code I've tried so far:
.usertopbar {
display: inline-block;
background: url(images/counterbar_bg.jpg) repeat-x #111;
height: 32px;
bottom: 600px;
width: 1100px;
line-height: 30px;
text-align: left;
padding-left: 10px;
box-shadow: 0px 0px 16px #000;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
Your code looks ok (though I tend to avoid explicitly setting a height on things at all costs). I suggest including normalize.css before your own CSS. It will reset several of the browser's defaults, which is what I believe is getting in your way here. It's also the default used in the Bootstrap and Foundation frameworks, so you can bet it's one of the best reset stylesheets out there.
Set the margin and padding or your <html> and <body> to 0. To be specific, I think it is the margin of the <body> that does it, but make it a habit to explicitly set them all to 0 by default.
You forgot to add a dot (or hash) to the element. Be sure to set the margin and padding of html & body to 0. See the answer and cleaned code below. If you want to have the div sticky at the top, add position: fixed; and top: 0; left: 0; to the snippet.
html,body {
margin: 0;
padding: 0;
}
.usertopbar {
display: inline-block;
background: url(images/counterbar_bg.jpg) repeat-x #111;
height: 32px;
width: 1100px;
line-height: 30px;
text-align: left;
padding-left: 10px;
box-shadow: 0px 0px 16px #000;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
<div class="usertopbar"></div>
I am trying to center a div #logo_alt containing an image using margin: 40px auto 0px auto;.
Problem:: On Chrome, it looks perfect, but in IE, this img-containing div is aligned to the left of its parent container #header_organizer. I just cant figure out why this is happening, and how it can be fixed in IE! Any help greatly appreciated :)
HTML
<div id="header_organizer">
<div id="user_bar">...</div>
<div id="user_bar_menu">...</div>
<div id="logo_alt"> <!-- <<<<< We are centering this div! -->
<img src="logo.png" \>
</div>
</div>
CSS
#header_organizer {
width: 100%;
height: 180px;
background: black url(../images/template/header.png);
float: left;
position: relative;
z-index: 1000;
}
#logo_alt {
width: 256px;
height: 55px;
margin: 40px auto 0px auto;
}
#user_bar {
height: 30px;
color: #CCC;
font-size: 13px;
margin-right: 10px;
padding: 0px 5px;
float: right;
cursor: pointer;
position: relative;
z-index: 3000;
}
#user_bar_menu {
width: 200px;
height: 165px;
background: white;
border: 1px solid #BEBEBE;
float: right;
position: absolute;
top: 30px;
right: 10px;
-moz-box-shadow: -1px 1px 1px rgba(0,0,0,.2);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.2);
box-shadow: 0 2px 4px rgba(0,0,0,.2);
display: none;
z-index: 1000;
border-image: initial;
}
The HTML file start off with <html xmlns="http://www.w3.org/1999/xhtml">.
Well there's your problem. You need to give your document an XHTML doctype declaration since your root element has that xmlns attribute anyway. Then IE will work in standards mode and render your margin: 0 auto style correctly.
Firstly, add a doctype to prevent IE from slipping into quirks more.
Then try this...
body {
width: 100%;
}
Evening,
HTML:
<input type="text" class="search" value="Search"><input type="button" class="searchimg" value="Search" />
CSS:
input.search {
font-size: 1em;
color: #383838;
margin: 7px 0 0 7px;
padding: 3px;
border: 1px solid #969696!important;
background: #FEFEFE!important;
height: 16px;
width: 250px;
}
input.searchimg {
text-indent: -99999px;
width: 24px;
height: 24px;
display: inline;
background: url(../images/search.jpg) 0 0 no-repeat;
border: 0px;
margin: 7px 0 0 0;
}
(search.jpg dimentions: 24x24px, 1px border is part of image, not CSS! http://img267.imageshack.us/img267/6779/searchr.png)
Top version shows how it's supposed to render, the bottom picture is showing how it is actually rendering, in all broswers. It is 2px higher than it's supposed to be. I'm not really sure why it's doing this.
Thanks.
Try removing the line margin: 7px 0 0 7px;
Try vertical-align:top on input.search { ... } this should work because your input is affected by (previous?) inline styles.
For the future: it's easier to operate on elements styled with display:inline-block and it's well supported in browsers (IE 7 needs an small hack, IE 6 should be dead already).
I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).
The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)
CSS rules applied here:
#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}
Please help, what's wrong with my approach?
Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".
Alternatively adjust the width on #owners.
Edit: Seems you just need to clear:both on #owners.