I have a page where the header is a gradient and on first load everything looks perfectly fine. When I refresh the page the gradient gets messed up and it seems like it puts in 2 gradients (1 really small) example below:
The first one is after a reload and the second is on first hitting the page.
The small gradient on top that I don't want is the same height as the padding in that div.
I've also noticed that imgs get resized on reloads like this as well and I've solved that by setting the height in css. I can't set the height in css because the height should be dynamic.
Can anyone explain to me why this might be happening and a way to solve it? I would really prefer a non-javascript solution because I already know how I might solve using jquery.
Some Code:
HTML:
<header>
<a id="settings-gear" href="#"><img src="/img/gear.png"> </a>
<div id="logo">
<img src="logo" alt="logo">
</div>
</header>
CSS:
header {
background: -webkit-linear-gradient(top, #F0F7F7 0%,#B8D9DD 100%);
max-height: 122px;
padding: 12px;
position: relative;
display: block;
}
header #logo img {
display: block;
margin: 0 auto;
}
header #settings-gear img {
height: 33px;
}
Well, it's difficult if we can't see a link or example, but the first think that comes to my mind is set the background as image and tell it to fit only the content with background-origin:content-box;. Try put that line into the header properties, and hope it helps. Note that the background-origin property don't work in IE 5, 6, 7 or 8...
Related
I am currently trying to use svg files instead of images for modern browsers on a new fluid site. The idea is to use an SVG as a background image on a fluid div which can then be changed on hover and we can use modernizer (or similar) to fallback to the use of img backgrounds for unsupported browsers.
In theory this is all fine however on certain browsers (particularly Firefox) the right and bottom edges of the svgs have some strange pixelation at certain sizes which doesn't happen for imgs.
So if you view http://jsfiddle.net/deshg/xuq6812g/ you can see a grid of 4 x 25% columns each with a div or img (that is 100% width). Each one has either a div with svg or img background or an img element with the svg/img as the src. If you view this in FF and make it bigger/smaller you'll see at certain sizes the degradation i'm talking about. You can also see this in the image below (the areas circled in blue are the degraded bits which you can see occurs on the svg but not the img).
Can anyone shed some light on why this is happening and how to prevent it as it makes SVGs largely unusable in this way if it can't be fixed
CSS
body, html {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.container {
float: left;
width: 25%;
height: 100%;
}
.container img {
width: 100%;
}
.container div {
background-size: cover;
width: 100%;
padding-top: 100%;
}
HTML
<div class="container">
BACKGROUND SVG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg');">
</div>
</div>
<div class="container">
BACKGROUND IMG:<br>
<div style="background-image: url('https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png');">
</div>
</div>
<div class="container">
SVG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rga8anccnpyublh/svg.svg" alt="">
</div>
<div class="container">
IMG IN IMG TAG:<br>
<img src="https://dl.dropboxusercontent.com/s/rb1u7l90q9ny8bh/img.png" alt="">
</div>
From working with vector images for years and years, when you crop them accurately, yet they need aliasing, then the crop looks odd -- flattened at the curves. So circles, text, logos, and so forth need some extra edge in the view box. Here I've add a lot more, but you get the idea.
DEMO with before and after: http://jsbin.com/buquw/1/edit
ORIGINAL -- cropped accurately, but too close, because this image needs aliasing.
NEW VERSION -- you don't need this much, used to exaggerate the situation:
Okay, so i need a slider which is in a normal page to span across the whole screen.
The wrapper and all other elements is 960px max-width so thats how far the slider goes.
If i change these, the whole site will become messed up.
Im using Wordpress 3.5 with Twentytwelve theme as parent.
SLIDER: http://rocketplugins.com/wordpress-slider-plugin/
This is the only code i use in the post. So i guess i need to make the post wider?
[slider id='32' name='']
Not too sure about the product that your link explains but you will need to edit your page template.
There will be a content div (the one with max-width set). your new div, the one for the new slider, needs to be above it. I made a page layout fiddle just for you.
HTML
<div class="newdiv">Slider here</div>
<div class="content">
<p>Your WordPress post stuff here</p>
</div>
CSS
.content{max-width:960px; height: 800px; background: #D3D3D3; margin: 0 auto;}
.newdiv{width:100%; height:200px; background:#BADA55;}
Solved by
<div id="slider">[slider id='32' name='']</div>
and
#slider {
position: absolute;
left: 0;
right: 0;
height: 563px;
display: block;
}
Its not the best solution. But it works!
I have a thumbnail image and another smaller image which overlaps the thumbnail image. But the padding changes for the smaller overlapping image as I zoom in and out and the problem exist only with the CHROME browser. Its working fine with IE and firefox. I tried using percentage to set the padding values for the smaller image but the problem still exist.
Here are the images.
This is the HTML
<div class="car-item">
<div class=" car-image">
<img src="/~/media/images/thumb.ashx" alt="Image 1" />
</div>
<div class="car video">
VIDEO
</div>
<div>
position for car video is absolute
position for car item is relative
and for car-image is static
You will have issues at times when using percentages. This is a good example of when to use absolute positioning.
I have no idea what your code looks like so here is a basic example of how to accomplish what you have pictured above with absolute positioning. I used a span tag instead of an additional image tag but it should work all the same.
You might have to modify your HTML and CSS a little furthor to get it to work in your environment.
http://jsfiddle.net/6C8gT/
Here is an updated jsFiddle (http://jsfiddle.net/6C8gT/1/) that uses your markup and another one with reduced markup (http://jsfiddle.net/6C8gT/2/). You don't really need those DIVs unless you have plans for them in the future.
I just did what I have posted below but modified the CSS to match your HTML. You'll have to check out the jsFiddles.
HTML
<div class="container">
<img class="thumb" src="http://lorempixel.com/300/200/" />
<span>Video</span>
</div>
CSS
.container {
position: relative;
}
.container img {
display: block;
}
.container span {
color: white;
background-color: black;
padding: 5px 10px;
position: absolute;
left: 0;
bottom: 0;
}
I am building a website here: argit.bounde.co.uk
I have been searching for hours to try and find the solutions. I am trying to build my own slider which will be fluid width so I cant define height / width where possible. I have got the bulk of the slider working with stock images however when I put elements underneath it they are 5px lower than they are meant to be. This happens in all browsers except IE that I have tested. I want to give the banner which is underneath my slider a negative top margin so that it will display over the slider but until I can figure out what is causing this 5px margin I cant.
The html is here:
<div id="slider">
<div id="sliderwidth">
<ul>
<li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
<li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
<li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
<li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
</ul>
</div>
</div>
<div id="sliderborder">
Things I have tried:
Removing all jQuery: didnt work.
Removing all CSS styling the slider: didnt work.
Setting img height to 300px: didnt work.
Setting li height to 300px: worded.
replacing imgs with divs 300px high: worked.
setting padding 0, margin 0 to every element in the slider: didnt work.
checked for validation errors: fully validated.
checked imgs are 300px high: they are.
checked every element in dev tools to check for any rogue margin/padding: none found.
I am literally out of ideas, any help would be greatly appreciated!!
There is nothing strange... Just add display:block to your images.
By default all images are inline-elements (inline or inline-block) and handled as a line of text. This space is where the hanging part of a y or gwould go. This very poorly explained but you get the idea.
div#slider ul li img {
width: 100%;
display: block;
}
just try with
div#slider ul img {
display: block;
width: 100%;
}
or
div#slider ul img {
vertical-align: top;
width: 100%;
}
since, by default, images are inline-block elements so they may need a proper vertical-align setting
All you have to do is just add vertical-align: bottom; like this:
div#slider ul li img {
width: 100%;
vertical-align: bottom;
}
For some reason, I just had a 5px margin at the top of my website and to the left side. I couldn't get rid of it... until I set the margin on the body element to 0. Problem solved. Hope this helps anyone that comes across this annoying issue. :)
I've been using http://ryanfait.com/sticky-footer/ and it works great until you need a margin/padding at the top of the page. The design I'm working with has a patterned body and all the page content is in a white box that starts 15px from the top. I still need a footer that sticks to the bottom cross browser. Any ideas?
UPDATE:
Thanks for all the ideas but noting works perfectly. Adding a margin to a sub element of the wrapper puts in an un-nessary scrollbar: Working example: http://jsfiddle.net/cronoklee/p2cPD/
If you're open to scrapping the sticky footer you've been using, here's how I would go about making one from scratch.
HTML
<div class="wrapper">
<div class="content">
... Your Content Here ...
</div>
</div>
<div class="footer">
... Your Footer Here ...
</div>
CSS
.wrapper {
background: #eee;
padding: 15px 0 100px;
}
.content {
background: #fff;
}
.footer {
background: #ccc;
bottom: 0;
height: 100px;
left: 0;
position: fixed;
right: 0;
}
That should work cross browser. The only nuance about this to be aware of is that position: fixed doesn't work in IE 6. Any improvements are welcome :)
Could you apply a margin-top to the body?
body{
margin-top:15px;
}
This works with firebug on the page you linked to.
A solution without adding a scrollbar. Make these adjustments:
.header{
height:168px; /*15px + image height*/
image-position:bottom;
margin-bottom:37px;
}
.download{
top:175px;
}
Well, I just found this thread since I have had the same problem ten minutes ago and I'd like to share my solution to the problem with "unnecessary scrollbar caused by vertically-down-shifted footer caused by my header-div with margin-top: 20px, because I just want it to be 20px from the very top of the page", which I came up in the meantime.
Just change your .content{margin-top:15px;} to .content{padding-top:15px;} and it should work. The scrollbar should disappear and the content has it's distance from the top.
As seen here: http://jsfiddle.net/p2cPD/24/
Yes - it will expand the content-div's background, but if you don't want it there it can be solved by using some transparent png of some sort or whatever.
Also, according to the http://ryanfait.com the <div class="push"></div> thing should be at the end inside wrapper-div and after content-div, not inside content-div.