I have an image I use as a ruler between content. It's a simple 1px x 1px image that I stretch out depending on the size I need.
If I stretch it to, say, 250px wide and leave it at 1px in height, it will not show up in IE (I'm currently on 10, but it doesn't show on the earlier versions either). It does, however, show in Firefox and Chrome. If I raise the height to 2px, it will show in IE, but it is too thick in the other browsers that could view it at 1 px in height.
example:
<img src="images/blackline.jpg" style="margin-top:35px; margin-bottom:20px;" height="1" width="275"><br>
NEW TEXT ITEM HERE<br>
<img src="images/blackline.jpg" style="margin-top:35px; margin-top:20px;" height="1" width="275">
Anyone know a way to get this to work properly?
Related
I'm trying to achieve something but i don't know the right way to do this. Hopefully someone can help me in the right direction.
With responsive images the image will get smaller as soon as the screen is as big as the image and then the image will get smaller together with the screen (if I'm right). But i am trying to make an image get smaller as soon as the screen gets smaller.
This is the page https://videosafari.nl/banner-test/ and it's about the red logo (NPO1).
The actual problem is that the images underneath the logo get smaller when the screen gets smaller but the logo stays the same size. I want the logo to stay in proportion with the images underneath it so i would like it to get smaller to. Any suggestions?
.carousellogo {
display: inline-block;
margin: 0px 0px 12px 30px;}
<div class="carousellogo"><img src="https://videosafari.nl/wp-content/uploads/800px-NPO_1_logo_2014.svg_.png" alt="" width="75" height="" class="alignleft size-full wp-image-23274" /></div>
The original image is width="149" height="100" but i made it smaller to make sure the image stays sharp at retina screens. width="75" height="".
I hope I was clear enough and thank you for taking the time to read my question. BTW i am just a beginner with css and html.
Have a nice day and stay safe.
you can use width: calc(4vw + 30px); on .carousellogo to control the width of the element to 4% of the viewport and add another 30px to it. I tested the code calc(4vw + 30px) looks perfect for your site on both desktop and mobile. Hope it helps.
I've nothing something strange in Firefox. I am using the current version of Firefox on Mac OS X but I think this can be reproduced on Windows machines, too.
I am embedding images on the website via the img tag using the alt, width and height attribute. The values fit the actual image size.
But:
When opening the page information and choosing media Firefox tells me the following:
Dimensions: 0px × 0px (Skaliert zu 500px × 400px)
why is this happen?
On some images Firefox shows "Dimensions: 450px × 294px"
Could you tell why Firefox is doing this? And is there a way to correct it, if necessary?
I have a weird box showing up around my images in Chrome. There is an example here: http://ulrikhogrebe.com/projects/bbcme.html - if you open it in chrome, and look at the first image under the header image (black and white), you will see a border around it (scale your browser if you miss it).
Tried border: 0; - but can't seem to loose it. Also, it's fine in Firefox.
Any ideas?
That's because your img tag has no src. You will not be able to remove this border with CSS.
The only way to fix this is to use the img tag correctly. You are currently setting a background image on the tag rather than using it as it is design with a src attribute.
Your current code..
<img class="article__img article__img--full" src="" alt="">
.page--bbcme .article__img--full {
...
background: url("../img/bbcme/bbcme2_784.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
...
}
Correct usage...
<img class="article__img article__img--full" src="../img/bbcme/bbcme2_784.jpg" alt="Image description">
If you for some reason need to use an img with a background image, you can use a transparent image as the source. A 1px x 1px transparent gif or png would do the trick.
My SVG graphics are not rendering crisply in Firefox. For example, the following should produce a 14px x 14px square with a 2px stroke width:
<svg width='14' height='14'><rect x='1' y='1' width='12' height='12' stroke='black' stroke-width='2' fill='transparent'/></svg>
Firefox usually produces a square with antialiased edges. This can be seen in the following jsfiddle. In fact, when I resize the browser window, the fuzziness changes: sometimes it appears crisp and sometimes it gets fuzzy.
http://jsfiddle.net/auq8x3ce/
Chrome and Safari draw the SVGs fine. I've only seen this happen in Firefox. Any help would be appreciated.
I generated a PDF file using wkhtmltopdf from a html page. The html page uses tables which have 1 pixel borders. If I open the PDF with Acrobat or Foxit they randomly miss to draw vertical borders, but they appear if I zoom in. So I guess it's some kind of rounding error, because the lines are too thin?
If I print the PDF it looks good.
And I just realized, it only happens if I set a background-color.
How can I fix this?
Here's a sample PDF. The border separating the characters "a" and "b" disappears depending on the zoom factor. I generated this file like this:
echo "
<html><body>
<span style="border: 1px solid black; background-color:red;">a</span>
<span style="background-color:red">b</span>
</body></html>"
| wkhtmltopdf.exe - test.pdf
Your line is not missing, it is just too small to render on the screen.
This is because PDFs are rendered according to their page size, not according to how large the features on the page are. Everything on the page is scaled up or down to make it fit into the PDF page, and so your line is being scaled down and thus disappearing: 1 / 3 = 0.333 = no line.
To fix this you have the following options:
Reduce the page size on wkhtml2pdf using: --page-size A4
Reduce the width & height of the page exactly using: --page-width 9in --page-height 6in
Make your line thicker.
Option 3 is probably preferable in this case. It's not a very elegant fix, but you don't have many options to play with. If you were writing the PDF on low-level then things could be done, but since you're using wkhtml2pdf then you are limited to what it allows you to set.
I had similar problem with borders of a table. What helped me was use of pt instead of px in my css.
See W3C:
But in general you would use a different set of units for display on screen than for printing on paper.
I'm assuming that you want thin line, or else you wouldn't have set the width to 1px.
The key to having thin, hairline borders displayed in PDFs made with wkhtmltopdf is to use SVG backgrounds like so:
.hairline-border {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%' stroke='black' fill='white' stroke-opacity='1' /></svg>");
}
For a hairline separator (think <hr>), I use:
.hairline {
height: 0.5mm;
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
}
and I use them like so:
<div class="hairline-border"></div>
And it's rendered correctly in Firefox and Safari/Chrome, and wkhtmltopdf at least keeps the line width as it is.
There's been some discussion that a base64 transform of the SVG would warrant greater compatibility on IE. Frankly, I couldn't care less if IE is happy or not but see Inline SVG in CSS, if you must.